jQuery的水平導航欄/菜單滑動邊框底部

我有一個水平導航欄的想法，你所在的頁面會有一個下劃線或底部邊界，當你去< li>在下劃線/底部邊框將以大約中等速度移動到< li>鼠標懸停在上面。任何幫助將大大讚賞。jQuery的水平導航欄/菜單滑動邊框底部

對不起，不提供示例代碼。我只是不知道從哪裏開始

這裏的菜單，只是一些示例：

<html> 
<head> 
<style> 
ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
li 
{ 
display:inline; 
} 
li.active 
{ 
border-bottom: 2px solid red; 
} 
a 
{ 
text-decoration:none; 
} 
</style> 
</head> 

<body> 
<ul> 
<li class="active"><a href="#home">Home</a></li> 
<li><a href="#news">News</a></li> 
<li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 

</body> 
</html>

來源

2011-11-25 Gᴇᴏᴍᴇᴛᴇʀ

爲什麼出現了反對票？ –

我沒有downvote，但它可能是因爲你沒有發佈你所嘗試的 –

我不認爲你的解釋是非常明確的。發表一些代碼說，單槓。當你說'你打開的頁面會有一個...底部邊框'，這讓我想到了一個頁腳。 – mrtsherman

嗯，這是我認爲你是後。當您在一個水平導航欄中將鼠標懸停在某個項目上時，它應該動畫化一個標記以在該項目下移動。您可以通過給標記一個固定位置並將其頂部和左側屬性設置爲位置來完成此操作。

http://jsfiddle.net/dBxn8/

$('li').mouseover(function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    var top = $(this).offset().top + $(this).height() + 5; 
    var left = $(this).offset().left + ($(this).width()/2); 
    $('#marker').stop().animate({ top: top, left: left }, 2000); 
});

來源

2011-11-25 07:00:34 mrtsherman

是啊！就像那樣，但我希望它只能左右移動，並且它將成爲文本下面的一行 –

http://jsfiddle.net/dBxn8/1/ – mrtsherman

jQuery的水平導航欄/菜單滑動邊框底部

回答

相關問題