I don't have much experience with jQuery, so need a small help to build up one navigation menu bar where hover image will float/animate from previous(.current) location.
Example: If the hover image remaining under 'HOME' as current page and if i hover/mouseover to 'CONTACT' menu then the 'hover_img' will float(animate) under 'CONTACT' and same way it will float (left to right/right to left) on mouseover/hover in menubar.
my css:
#nav_menu { clear: both; width: 960px; height: 80px; padding: 0 10px;
background: url(images/back_menu_img.png) no-repeat bottom; }
#nav_menu ul { float: left; width: 600px; margin: 0; padding: 40px 0 0 30px; list-style: none; }
#nav_menu ul li { padding: 0px; margin: 0px; display: inline-block; }
#nav_menu ul li a {
float: left;
display: block;
width: 100px;
height: 26px;
padding: 5px 0;
margin-right: 5px;
font-size: 14px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
outline: none;
border: none;
}
#nav_menu ul li a:hover, #nav_menu ul li .current {
color: #333;
background: url(images/hover_img.png) no-repeat;
}
anybody please help me to write jQuery to perform this action, here is my html:
<div id="nav_menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>