2012-08-13 32 views
1

在開始時我一直在尋找如何創建一個巨大的下拉導航,因此我繞過網絡研究,並開始意識到定義每個下拉的寬度和位置是最好的。對不起,如果你不明白,但我也找到了js.fiddle。我如何將這兩組編碼結合在一起形成一個巨大的下拉導航

JS小提琴的下拉導航:http://jsfiddle.net/Pnn6V/9/

但是,我意識到導航上的標題(例如,Home,5列等)並不是均勻分佈的,因爲它們分佈在固定的px中。因此我去研究如何均勻分佈標題。然後我發現,實際上通過使用CSS顯示:內聯文本證明我可以做到這一點。對不起,如果它讓你困惑。但我也發現了一個js小提琴。 http://jsfiddle.net/NGLN/dqBNr/3/

我膩在一起,加入跨度標籤,也是證明性結合他們,我也改變了顯示器內聯和inline-block的,但整個事情:

JS搗鼓使用CSS均勻地分佈導航弄亂。

我想知道如果有人有什麼想法我能做些什麼來將這兩組編碼結合在一起?非常感謝。如果您對我在談論的內容有任何疑問,請讓我知道,以便我可以嘗試重述它。謝謝。

+0

沒有人可以幫助我:( – Panda 2012-08-15 10:45:47

回答

1

所以標題完全展開,我假設你在談論你何時改變它們,以至於這些下拉菜單會被奇怪地抵消。由於以下規則,此問題正在形成:

#menu li:hover .dropdown_1column 
{ 
    left:-841px; 
    top:auto; 
} 
#menu li:hover .dropdown_2columns 
{ 
    left:-2px; 
    top:auto; 
} 
#menu li:hover .dropdown_3columns 
{ 
    left:-736px; 
    top:auto; 
} 
#menu li:hover .dropdown_4columns 
{ 
    left:-248px; 
    top:auto; 
} 
#menu li:hover .dropdown_5columns { 
    left:-110px; 
    top:auto; 
} 

有幾種方法可以解決此問題。通過使用JavaScript/jQuery附加到onhover事件並將左側設置到正確的位置(#菜單的左側)。

另一個更好的方法是使用CSS位置屬性來充分利用它。我得到this jsfiddle工作正常。從#menu li

    • 新增position:relative;#menu
    • 刪除position:relative;新增position:absolute;.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
    • 設置上的所有懸停規則left:0px;那曾經有過:我做了如下的變化(如#menu li:hover .dropdown_1column。)特定的像素值。

    這是有效的,因爲下拉菜單上的position:absolute;現在將定位到菜單的位置,而不是像之前那樣相對於菜單項。

  • +0

    感謝您的解釋和解決方案...我的工作,謝謝你這麼多 – Panda 2012-09-15 07:21:10

    +0

    嗨...嗯我想知道像頭單詞「家」,「設計」,「繪畫和混合媒體」等...可以使用內聯屬性均勻分佈,如我的第二[js fiddle鏈接](http://jsfiddle.net/NGLN/dqBNr/3 /) – Panda 2012-09-15 07:32:36

    相關問題