Hey there! I'm currently working on designing a sliding menu bar that can move left or right based on user interaction with arrow buttons. When the user hovers over the right arrow, the navigation bar smoothly slides from right to left until it reaches its final position, where it stops. Similarly, hovering over the left arrow triggers the navigation to slide in the opposite direction, stopping once it hits the end point.
I'm struggling to piece everything together, so if you could take a look at the fiddle here: http://jsfiddle.net/DdkLS/
HTML
<div class="nav">
<div class="arrowLeft"><</div>
<div class="arrowRight">></div>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
...
<li><a href="#">why us</a></li>
</ul>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.nav {
width: 940px;
...
}
...
SCRIPT
var leftMove = 0;
var rightMove = 0;
var leftValue = $('.nav').find('ul').css('left');
var rightValue = $('.nav').find('ul').css('right');
...
If anyone can offer some guidance, I would greatly appreciate it. Thank you in advance!