CSS菜單 - 移動欄：出了什麼問題？

-1

我想爲我的網站實現一個移動欄進入我的導航欄，但我遇到了一些麻煩。作爲一個教程，我跟着這個鏈接（http://css-tricks.com/jquery-magicline-navigation/）CSS菜單 - 移動欄：出了什麼問題？

這是我的結果：http://matt-productions.be/berto/index.html

會有人這麼好心檢查出了什麼問題？

非常感謝！ Matt

來源

2013-04-06 Matt

問題是什麼？你有什麼嘗試？似乎在Chrome上工作... – dougajmcdonald 2013-04-07 00:14:34

我已經在線編輯我的代碼，所以它現在可以工作。感謝@andyb – Matt 2013-04-07 08:52:34

首先，由於在CSS中有一個名爲#MagicLine的選擇器，因此#magic-line的CSS缺失。

其次，.hover()選擇器不正確。它應該將懸停事件綁定到菜單項'子女<a>標記$("#example-one li a").hover(function() {，但您已將其綁定到魔線而不是$("#navMagicLine li a").hover(function() {。這導致寬度的計算導致錯誤的值，這使得魔術線比預期長得多。

修復這些問題應更正您的菜單，但將來我建議再次查看任何示例代碼或嘗試創建您自己的獨立演示。我常常發現，在試圖創建jsFiddle演示或者，這個問題變得清晰:-)

編輯另一個演示網站：

你的CSS還是不一樣的演示。 列表項需要爲display:inline-block，否則jQuery將無法計算出.width()。聯機元素沒有寬度（或高度）。

CSS必須是：

#navMagicLine li { 
    display: inline-block; 
}

的.hover()需要在的<a>你菜單，而不是動態的行上。它需要是：

$("#navMagicLine li a").hover(function() { 
    // function body 
})

來源

2013-04-06 17:03:31 andyb

我做了所有你說的改變（如果我理解正確）。更改CSS後，我可以看到酒吧移動到我的標題上方（錯誤的寬度）。更改JS後，欄消失。我不確定我是否做了正確的事情，所以你會介意再次檢查嗎？謝謝！ – Matt 2013-04-06 19:00:13

我編輯了我的答案。請檢查您鏈接到您的問題的演示網站，因爲所有的答案都在那裏:-) – andyb 2013-04-06 20:31:11

它確實對我做了一切正確，顯然不是... 我真的很高興你花時間修復我自己的啞巴問題謝謝！真的，謝謝 – Matt 2013-04-06 21:28:23

CSS菜單 - 移動欄：出了什麼問題？

回答

相關問題