Little jQuery Slider Navigation

Little jQuery Slider Navigation

I love the little stuff jQuery can do

I was noodling around the other day with jQuery, and decided to share another simple little navigation script. It is only 8 lines of code, which includes the ready function, and closing brackets, so if you actually take into account just the stuff that matters, only 5 lines. You can check out the demo below.

View Demo

Yes, all it does is move the arrow around on rollover, but it is a simple effect and you might be able to come up with something better knowing how to do this.

Here is the HTML you will need:

<div id="container">
    	<li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
    <div id="arrow"></div>

Here is the CSS:

#container {
	font: bold 14px Arial, Helvetica, sans-serif;
	width: 1000px;
	margin: 50px auto;
	position: relative;
	border-bottom: 1px #99CC99 solid;
	padding: 0 0 2px;
ul {
	margin: 0;
	padding: 0;
	background-color: #778377;
	overflow: hidden;
li {
	list-style: none;
a {
	display: block;
	float: left;
	padding: 5px 10px;
	border-right: 1px #000000 solid;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	width: 100px;
	outline: none;
	background-color: #778377;
	-moz-transition-property: background-color;
	-webkit-transition-property: background-color;
	-moz-transition-duration: 0.8s;
	-webkit-transition-duration: 0.8s;
a:hover {
	color: #99CC99;
	background-color: #525f52;
#arrow {
	width: 20px;
	height: 20px;
	background: url(images/newMenuArrow.png) no-repeat left top;
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0 0 0 55px;

If you look at this nav in a webkit browser you will see the background color transitions that are defined in the CSS. In every other browser, you just won’t see the color fade in.

Here is the jQuery:

$(document).ready(function() {
	var currentPosition = 0;
	var moveWidth = 120;
	$('ul').delegate("li", "mouseover", function() {
		currentPosition = ($(this).index());
		$('#arrow').animate({'left' : moveWidth*(currentPosition)}, 200);	

What is going on there?

Glad you asked or there wouldn’t be a point to this, would there? First are a couple of variables which you will need to make all this work. The currentPosition variable is the index value of the ‘li’ you rollover. At the start, it is set to 0. The moveWidth is set to 120 because I made this navigation to be a fixed width nav. Now we get into the actual move stuff code.

The delegate is actually cool in that it sets the mouseover handler on the ‘ul’. It checks to see if an ‘li’ was moused over, and if so, run the function. If you didn’t use delegate, you would then have a handler on each ‘li’. This means better efficiency with jQuery. So you mouseover an ‘li’, and the function is called, which sets the current position to the index value of ‘this’, which is the ‘li’ your mouse is on. Then the animation on the div with an id of ‘arrow’ happens. That div moves ‘left’ equal to the amount of the variable ‘moveWidth’ (which is 120) times the currentPosition variable. So if you rollover the second ‘li’, its index value is 1, then times that by 120. In that case, ‘left’ would be 120. Those numbers are recalculated every time you rollover an ‘li’ and the ‘arrow’ div then moves the correct amount. The ’200′ at the end is just the speed I want the animation to move. You can change that to whatever you want.

Further reading

Like I stated at the beginning, this is a simple script, doing a simple animation. If you look at it in a webkit browser, you will see the color changes from the CSS transition. If you are really new to jQuery, looking at little bits of code like this helps you figure out a lot. I also wrote an article a while back on jQuery’s delegate method, which you can read here.

Any questions, let me know! And I hope you guys new at jQuery learned a little!

Coupon Code: webmachine

Leave a Reply