Flash like hover effect using jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.verttabnav ul li a').hover(function() { //mouse in
$(this).animate({ paddingRight: '+=10px' }, 300);
$(this).parent().animate({ left:'-=7'}, 300);
}, function() { //mouse out
$(this).animate({ paddingRight: '-=10px' }, 100);
$(this).parent().animate({ left:'+=7'}, 300);
});
});
</script>
<style type="text/css">
.verttabnav {
width:300px;
}
.verttabnav ul {
margin: 0 4px 0 10px;
list-style:none;
}
.verttabnav ul li {
padding:0 0 0 0;
border-bottom:1px solid #A38872;
border-right:1px solid #A38872;
border-top:1px solid #A38872;
border-left:1px solid #A38872;
margin:-1px 0 2px 0;
position:relative;
background:#FFEFD7;
}
.verttabnav ul li a {
padding:10px 30px 10px 0;
font-size:11px;
color:#8c6d53;
text-decoration:none;
text-transform:uppercase;
text-align:right;
font-weight:bold;
display:block;
}
.verttabnav ul li a:hover {
color:#000;
}
</style>
<div class="verttabnav">
<ul >
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
<li><a href="#">Menu Item 8</a></li>
</ul>
</div>
