我會如何在li項目下添加一行到我的jquery菜單中？

我真的不知道從哪裏開始，但我有一個菜單在jQuery中完成。當您將鼠標懸停在正確的位置時，它會對文本進行一些淡入/淡出效果，並手動處理鏈接。我會如何在li項目下添加一行到我的jquery菜單中？

我想添加一個簡單的線，也許在css中完成？當你徘徊的時候，你也可以在每一件物品下滑動，滑到你懸停的裏面，而不僅僅是出現。

我只是不知道從哪裏開始，因爲我從來沒有真正做過，沒有圖像（最好）。當你用鼠標離開div時，它會粗糙地需要從某個地方開始並單獨移動ul並停止它，並且當你點擊一個鏈接時我想保持它。雖然我沒有要求任何人爲我做這件事（除非你覺得這樣），只是爲了指出正確的方向。我已經看到了一些免費的代碼，它們提供了這樣的菜單，並試圖使用它們，或者模擬它們，但它不會與我的菜單一起工作。

Fiddle

來源

2012-07-16 Grant

'li a：hover {text-decoration：underline; }或li：懸停{...}' – 2012-07-16 04:37:13

你的代碼在哪裏用html和css – 2012-07-16 04:41:30

現在在OP中添加它。 – Grant 2012-07-16 04:43:21

我這樣做是前一陣子，也許這是你所需要的。它將計算你徘徊錨元素的寬度和成長的底襯元素（一個div），以它的寬度和位置都

//underliner 
$('#menu a').hover(function(){ 
    var position = $(this).position(); var width = $(this).width(); 
    $('#underliner', '#menu').animate({width: width,left: position.left}, 200); 
}); 
$('#menu').hover(function(){ 
    $('#underliner', '#menu').animate({opacity: 1}, 200).show(); 
}, function() { 
    $('#underliner', '#menu').animate({opacity: 0}, 200).hide(); 
});

CSS的下劃線元素（其他城市的高度和背景顏色你似乎契合）

#underliner { 
    display: none; 
    position: relative; 
    height: 5px; 
    line-height: 5px; 
    font-size: 1px; 
    background-color: #44c8f5; 
    width: 1px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
}

HTML

<div id="menu"> 
    <ul> 
     list items with <a href>'s 
    </ul> 
    <div id="underliner"></div> 
</div>

編輯：我試着用你的代碼合併，但因爲你沒有包括叔他HTML，我不得不猜測你的'navibar'是如何佈局的。無論如何，試試這個小提琴：http://jsfiddle.net/c_kick/DuWcz/

來源

2012-07-16 06:07:24

你爲什麼使用.hover（）和.mouseleave（）？如果將兩個函數傳遞給它，使用.hover將覆蓋mouseenter和mouseleave ... – Ian 2012-07-16 07:24:35

你是對的，錯過了。這是我爲這個答案重新編寫的一段舊代碼。考慮它更正！ – 2012-07-16 07:41:10

沒問題，只是想指出來！ – Ian 2012-07-16 21:11:08

我會如何在li項目下添加一行到我的jquery菜單中？

回答

相關問題