魔線CSS/Javascript代碼 - 添加子導航

我正在實施這個「魔線」代碼到我的導航菜單中，但我似乎在添加子菜單時遇到了麻煩。當您將鼠標懸停在任何子菜單項上時，魔術線將一直拍到頁面的左側。我希望它留在子菜單下的菜單項上。魔線CSS/Javascript代碼 - 添加子導航

您可以查看我的網站在這裏：http://www.christmaslightsinstallation.ca/

原來的腳本（不含子NAV）：http://css-tricks.com/examples/MagicLine/

（我試過這樣的小提琴，但因爲它是在WordPress它沒有翻譯得非常好）

我的JavaScript如下：

$(function() { 

var $el, leftPos, newWidth, 
    $mainNav = $("#menu-main-menu"); 

$testing = $(".menu-header"); 

$testing.append("<span id='magic-line'></span>"); 
var $magicLine = $("#magic-line"); 

$magicLine 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

$("#menu-main-menu li a").hover(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 
    $magicLine.stop().animate({ 
     left: leftPos, 
     width: newWidth 
    }); 
}, function() { 
    $magicLine.stop().animate({ 
     left: $magicLine.data("origLeft"), 
     width: $magicLine.data("origWidth") 
    });  
}); 
});

我嘗試使用「＃menu-main-menu li li a」創建第二個懸停功能，並嘗試使用「preventdefault（）;」事件。這只是造成了很多錯誤。

我對JavaScript相當陌生，所以限於我能想到/知道該怎麼做的事情，爲此嘗試修復。

來源

2014-06-27 Keryn Gill

$("#menu-main-menu li a").hover(function() {

更改上面的行到：

$("#menu-main-menu > li").hover(function() {

編輯：

另外改變：

newWidth = $el.parent().width();

到：

newWidth = $el.width();

來源

2014-06-27 19:06:33 Coby

謝謝@Coby大多數情況下工作。現在唯一的情況是，當你將鼠標懸停在某些東西上時，魔術線佔據了導航欄的整個寬度，而不僅僅是寬度。我可以手動輸入寬度，但有沒有一種動態的方式來做到這一點？ –

請參閱我更新的寬度修復答案的第2部分。 – Coby

非常感謝！這工作像一個魅力。 –

魔線CSS/Javascript代碼 - 添加子導航

回答

相關問題