Hi Expert!
I want to create menu that functionality as following
Menu where the item that the mouse is over slides to the right. After the mouse leaves, I want the div to move back to its original position.
My problem is, on mouse over, the div moves to the right, but when I mouse out, it just stays there and doesn't move back to the left.
<script>
$(document).ready(function(){
$(".menu_option").mouseenter(function(){
$(".menu_option").animate({left:'50px'});
});
$(".menu_option").mouseleave(function(){
$(".menu_option").animate({right:'50px'});
});
});
</script>
CSS line of code as following
.menu_option {
height: 50px;
width: 150px;
position: relative;
}
.menu_holder {
float: left;
height: 300px;
width: 150px;
position: relative;
}
HTML line of code as following
<div class="menu_holder">
<div class="menu_option">Content for class "menu_one" Goes Here</div>
</div>
Please help me!
Your help is greatly appreciated.
Thanks in advance!
AVADHESH PATEL
11-May-2013