Вопрос: Нужен совет по созданию меню
Здравствуйте, есть потребность сделать меню с hover-эффектом, но более плавным, нежели это происходит при обычном li:hover {...};Примерно похожее меню на поднадоевшем dragoninteractive.com, но мне нужно без спрайтов и с текстом, а не надписью на картинке.
Примерный код:
Html:
<ul class='menu'>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li class='active'><a href='#'>3</a></li> /*Активный в данный момент пункт меню*/
<li><a href='#'>4</a></li>
<li><a href='#'>5</a></li>
</ul>
CSS:
ul#menu {
height:40px;
list-style-type:none;
}
ul#menu li {
float:left;
width:100px;
height:40px;
background-image:url(menu_li_norm.png) repeat-x;
}
ul#menu li.active {
background-image:url(menu_li_act.png) repeat-x;
}
ul#menu li.active:hover, li:hover {
background-image:url(menu_li_hover.png) repeat-x;
}
Я поглядываю в сторону jQuery и fadeIn/fadeOut, но немного не могу разобраться с порядком слоев, было бы просто здорово, если бы кто-о нашел время и желание помочь мне.
P.S. код вставлял через тэги pre и code, и не было времени избавиться от экранирования кавычек, прошу не обращать внимание.