В общем нужно как то реализовать такое меню, что бы полоска активного элемента перемещалась по разным элементам меню при наведении на них, тоесть не внезапно появлялась а плавно перетекала.
Я бы с помощью javascript постоянно изменял бы место линии которая подчеркивает элементы меню вычесляя положение блока на который наводят, в общем вот похожий пример:
Задаем изначальные стили:
#menu {
padding: 0;
margin: 0;
position: relative;
list-style: none;
height: 40px;
background: #000;
font: 12px/14px Tahoma, Helvetica, sans-serif;
}
#menu li {
margin: 0 0 0 0;
position: relative;
display: inline-block;
height: 14px;
padding: 12px 15px 14px;
}
#menu li a {
color: #fff;
text-decoration: none;
margin: 0;
}
#menu li#line {
display: block;
position: absolute;
content:'';
bottom: 0;
left: 0;
text-indent: -10000px;
height: 3px;
width: 0;
padding: 0;
background: #fc0;
}
В html обычный не сортированный список и сама линия.
<ul id="menu">
<a href="javascript:;">Главная
<a href="javascript:;">Категории
<li class="active"><a href="javascript:;">О нас
<a href="javascript:;">Контакты
<a href="javascript:;">Выйти
<li id="line">
В js блоке мы создаем полосу которая в дальнейшем перемещается по разным элементам, в начале задаем ей изначальную позицию в которую она постоянно возвращается, начальную позицию задает первый active элемент, далее идут смещения посредством вычисления элемента на который наводят и перемещения в ту позицию линии.
$(function () {
var $menu = $("#menu");
$line = $("#line"),
$indicator = true,
$active = $menu.find(".active"),
default_pos = $active.offset().left - $menu.offset().left,
default_width = $active.outerWidth();
$line.css({left: default_pos,width: default_width});
$("#menu li").hover(function () {
if (this===$active.get(0)) return;
var self = $(this);
var diff = self.offset().left - $menu.offset().left;
$line.stop().animate({
width: self.outerWidth(),
left: diff
}, 400);
}, function () {
if (this===$active.get(0)) return;
$line.stop().animate({
width: default_width,
left: default_pos
},400);
});
});