jeson_park
دوشنبه 12 فروردین 1392, 08:24 صبح
<body>
<div id="download">
<a href="#">Download Source!</a>
</div>
<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</body>
استایل
body {
background-color: #222222;
}
a {
-moz-transition: all 200ms ease-in-out 0s;
}
div#download a {
bottom: 0;
color: #555555;
height: auto;
padding: 0 5px 5px 0;
position: absolute;
right: 0;
text-decoration: none;
width: auto;
}
div#download a:hover {
bottom: 0;
color: #FFFFFF;
height: auto;
position: absolute;
right: 0;
width: auto;
}
div#navigation {
background-color: #333333;
box-shadow: 0 0 16px #000000;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
ul#nav {
bottom: 50%;
list-style: none outside none;
margin: 0;
position: absolute;
z-index:1; /* ################################################## ######## */
width: 80%;
}
ul#nav li {
/* background-color: #666666;*/
border-bottom: 1px solid #333333;
color: #FFFFFF;
margin: 0 0 5px -40px;
padding: 0 0 0 20px;
}
ul#nav li a {
color: #999999;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFFFFF;
}
/* ################################################## ########### */
/* MAGIC li bg */
#libg{
background:#666;
position:absolute;
z-index:0;
width:0px;
left:0px;
opacity:0;
-moz-opacity:0.0;
}
این رو هم توی $(document).ready() بزارید
$('#navigation').append('<div id="libg"></div>');
var posTop, liW, liH;
$('#nav li a').hover(function(){
posTop = $(this).offset().top;
liW = $(this).parent('li').outerWidth();
liH = $(this).parent('li').height();
$('#libg').css({top: posTop+'px', height: liH }).stop().animate({width: liW+'px', opacity: '1'}, 500);
},function(){
$('#libg').stop().animate({width: '0px', opacity: '0'}, 0);
});
موفق باشید