Navigation is one of the things you'll see on every website. I wanted to give this part a little bit extra life, and when I saw a movie yesterday that included slot machines, it suddenly hit me. Using jQuery and some basic CSS and HTML, we could add some sweet slot machine style animation to a normally boring kind of navigation. So, for today, we'll be creating a slot machine style navigation that you could use on your website.

Since it's not such an advanced technique, this is also a jQuery quickie. These relatively simple tutorials will also give you a good understanding of jQuery. Simply check out the demo or download the source to see what we're going to make.

  

Already wondering how it works? Check out how you can create this slot machine yourself. Of course, this could easily be transported to be used with social media buttons (instead of the main navigation of your site).

HTML

As usual, we want to keep our HTML as short and clean as possible. We'll simply use an unordered list that'll contain links. We'll style it later on with CSS.

 
<ul id="jquerynav" class="navigation">
   <li><a href="#" class="marcofolio">Marcofolio.net</a></li>
   <li><a href="#" class="rss">RSS</a></li>
   <li><a href="#" class="twitter">Twitter</a></li>
   <li><a href="#" class="jquery">jQuery</a></li>
</ul>

Take note of the different class and id attributes we need to use. All the links have a different class, since we'll need to reference it from the CSS.

This is all the HTML we need to make this example work. Now to add some style using CSS.

CSS

Although the CSS isn't very spectacular, there is something that is the actual key to make this technique work. Let's take a look at the first part.

 
.navigation { list-style:none; width:800px; height:75px; }
.navigation li { display:inline; text-indent:-9999px; }
.navigation li a { display:block; float:left; width:200px; height:75px;
   background-image:url("../images/buttons.png"); }

Nothing really much going on over here. Just some links that are placed in a horizontal row with a fixed with and height. But it's the last line that is very important: The background-image is set.

Since we didn't set the background-repeat or background-position properties, the bottons.png image will be placed on a 0, 0 (top left) position and will be repeated all over. We'll be using CSS sprites for this technique.

Now you'll see why all the links have different classes. We need to set the background-position property, to show the correct button.

 
.navigation li a.marcofolio { background-position:0 0; }
.navigation li a.rss { background-position:-200px 0;  }
.navigation li a.twitter { background-position:-400px 0; }
.navigation li a.jquery { background-position:-600px 0; }

We now have the base of what we need to make the slot machine work. All the links are in place, and the background-position is all correct. Now to make some magic happen with jQuery.

jQuery

First things first: We need the Background-Position Animations plugin, since we need to animate the background-position property (by default, jQuery can't do this). We'll also use the jQuery Easing Plugin to use some custom animation. Ofcourse, we'll need the jQuery core to make this all work.

Before we handle the hover() function, we'll need to do some preperation. We need to capture the original X position of the button, since we'll need to animate back to that value later on. We'll also set the default Y position to 0 (top), which will be increased by the hover() action later on.

 
$("#jquerynav li a").each(function(){
   // Returns "##px" and "##px"
   var backgroundPositions = $(this).css('background-position').split(" ");
   
   // Retrieve the original X position
   $(this).data("originalXpos", backgroundPositions[0].slice(0, -2));
   
   // Set the new Y position to 0
   $(this).data("newYpos", 0);
});

Now that we have all that, we can finally go on with the core of this technique: the hover() event.

 
$("#jquerynav li a").hover(function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 600, "easeOutCirc");
   }, function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 400, "easeInCirc");
   });

Let's break it down a little bit. The newYpos value from the element is increased by one. By doing this (and using it later on with the animate function), we ensure the button will slide down forever, giving it the slot machine effect. Since the background image is repeated, we'll always see a copy of the same image over and over. We'll use the originalXpos to maintain the same character, so it will not look odd.

The onMouseOver (first function) is slightly faster than the onMouseOut (second function), but you can change that if you want. This also counts for the easing effect, which is now set to easeInCirc and easeOutCirc (both from the easing plugin).

That's about it! All the code your need to create a nifty looking slot machine navigation.

Conclusion and Download

Although it might look a little bit weird at first, it does give the site another dimension. I know my design isn't that strong, but maybe others can take it to another level. Also, this is just another example on what jQuery can do with just a couple of lines of code. Of course, you could make the animation slide down even further (just to make it look even more like a real slot machine), but that might annoy the user.

  

The download also includes the PSD for the buttons. And what do you think? Do you see this used on websites? Or do you have and comments on the code? I wanted to port this to CSS3 animations too, would it be worth it? Feel free to share!

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• Generating the pixellogo from TechCrunch in HTML
• The Apple.com navigation menu created using only CSS3
• Animated fullscreen background image slideshow
• jQuery Quickie: Smooth animated quote display

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Christian DeBoben - CSS3   2010-08-02 19:46:14 I definitely think that you should make a CSS3 version. Mainly for the sake of iPhone and iPad compatibility, but I'd like to know how to use this in CSS3, also. Reply | Quote

Beben - Beben   2010-08-06 15:50:25 so smooth thanks Reply | Quote

Deko Mühendislik - Really nice   2010-08-24 21:23:19 Thank you very much for sharing... Reply | Quote

campuscodi - License?   2010-09-21 10:33:28 What is the license of your scripts? Reply | Quote

Kenneth - Nice tut dude   2010-10-04 09:55:38 These scripts are amazing stuff to play with. Like it a lot. Lance alot Reply | Quote

Finnegan - not working in ff5   2011-07-13 17:21:47 Love this but just found it doesn't work on the first item only while checking in firefox 5. I tried editing to work with 5 but anything I do to get it working in FF5 breaks things everywhere else. Reply | Quote

Finnegan - ff5 issue pinpointed / workaround   2011-07-13 18:03:02 I've concluded that this is choking when the bg position for the initial state is set to (0,0). I added the 1st sprite to the end of the sprite graphic and made the first "li a" use the last sprite, making it's starting position (-5XXpx, 0) instead of (0,0) and it seems to work now. Reply | Quote

Vinger - Make a JQuery slot machine like Menu   2011-09-08 11:18:24 Hi, Do you maybe know how I can go about creating a jquery menu that looks like the menu on the following site? http://www.wix.com/hennie79gmailcom/twala Looking forward to your reply Thanks in advance!! Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.