Скользящая нижняя граница jQuery для горизонтальной панели навигации / меню - PullRequest
Новая
       20

Скользящая нижняя граница jQuery для горизонтальной панели навигации / меню

1 голос
/ 25 ноября 2011

У меня была идея для горизонтальной навигационной панели, что страница, на которой вы были, будет иметь подчеркивание или нижнюю границу, чтобы при переходе к

в меню, где подчеркивание / нижняя граница, была примерно на средней скорости, переместитесь к , на которую наведена мышь. Любая помощь будет очень признательна.

Извините, что не предоставил пример кода. Я просто понятия не имею, с чего начать

Вот меню, просто для примера: 

<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>

1 Ответ

1 голос
/ 25 ноября 2011

Ну, это то, что я думаю, что вы после.Когда вы наводите курсор мыши на элемент на горизонтальной панели навигации, он должен анимировать маркер для перемещения под этим элементом.Вы можете сделать это, задав маркеру фиксированное положение и анимируя его верхнее и левое свойства для положения.

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 );
});
...