メニューにアニメーションで下線が付いてくる
Result
jQuery
$('a','nav').mouseover(function(){
$('span','nav').animate({
'width': $(this).width(),
'left': $(this).position().left}
,'fast');
});
css
nav a{
text-decoration:none;
color:#333;
}
nav li{
display:inline-block;
margin-left:2px;
padding:3px;
background:#eee;
}
nav span{
background:#666;
height:2px;
display:block;
position:relative;
width:50px;
left:0;
}
html
<nav><ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02 / 02</a></li>
<li><a href="#">menu03 / 03 /03</a></li>
<li><a href="#">menu04 / 04 /04 /04</a></li>
<li><a href="#">menu05 / 05 /05 /05 /05</a></li>
</ul>
<span></span>
</nav>