Create a Sprited Navigation Menu Using CSS and MooTools

Discussion

1. Anton

   Some bugs:

   1. Demo page menu overlaps with the site footer.
   2. When pressing mouse button on any of the menu items and then dragging the pointer out of the button and THEN releasing the button, the mousedown state is not reset to the original state, making the menu text move a little on hover.

   Firefox 3.5.4
2. David Walsh

   @Anton: Both of those worked for me easily.
3. Chris the Developer

   Oh my goodness! Could you format the CSS better please? :P
4. David Walsh

   @Chris the Developer: Don’t pass out! If you understand one block for one navigation item, you understand them all!
5. Adam Meyer

   If you removed the text (very generic anyways), you could hugely reduce your css, and you gif, and make it modular, so you could easily take away or add any menu item.

   I get sometimes you need the image text though.
6. Arnar

   I’m all for what Adam Meyer is saying.

   The added comfort of being able to add navigation buttons from your CMS is great.

   Besides the fact that search engines don’t like images in menus.
7. Adriaan

   @Adam Meyer: Yes, but then you have to use horisontal repeating backgrounds, which isn’t always applicable…
8. Abba Bryant

   Search engines don’t dislike images in menus. That is a bad generalization. For SEO this uses an image replacement technique. Look at the HTML and you can easily still see the plain link text in there.

   Google etc. will index this fine.

   One thing to note though, on FF 3.5.4 on OS X all of the inactive links except for the rightmost have an annoying pixel twitch going on. Likely just a bad negative position in the css.
9. Arnar

   Oh yeah, I didn’t read through the code but as you said it’s fine for search engines.

   But it’s still a downside to have to modify the links using photoshop but not a CMS.

   It’s all good though in cases were there is no need to edit the menu.
10. Lars Weimar

    I use this trick on my website…I absolutely love it and I receive countless compliments on the navigation on my site. I think the CSS isn’t that bloated…it’s trying to do a lot!

    I’ve been using jquery to run the animation but I like this mootools answer…degrades just as nicely too. Thanks David!
11. Ryan Florence

    It’s strange to me to see all the comments about removing the text from the images for sake of modularity.

    This would hardly be an article on *sprites* if there were no images. It’s a little like saying “You could just get rid of the CSS completely, and the javascript, and then the page would load faster.”

    Any time you use sprites, you’re going to have a lot of CSS for all the background positions and typically suffer a hit to modularity. But some sites are high design, and that’s how you have to roll.

    I usually have one file called `sprites.png` that’s an aggregation of almost all the pages graphics, and two named `repeat-x.png` and `repeat-y.png`, for obvious reasons.
12. Morgan Hirtle

    I believe I have everything set up properly, I have examined and re-examined the code, but I can’t figure out why the .current class isn’t registering. The file validates yet something is broken.

    http://morganhirtle.ca/tmp/hirtles
13. ugg uk

    nice article and I agree with almost everything, but I think you create a new problem, where people are forced to make their point in the first three lines or 140 characters which isn’t necessarily a good thing.
14. Jonathan Bennett

    Oooooh. Pretty! :D
15. Tim

    Is it possible to use the standard mootools lib to get this, because of have other mootools gadgetss on teh same page and this and esp the snook nav didn’t play nicely with them because of different commands for teh same call. I am still just a noob.
16. Paul

    This is nifty, but what if you want to turn your menu into an include file so that it will dynamically call the JS and CSS?

    Currently you are indicating the home page and the about page are the current page in the php of the li….so, how would one go about setting this up?

    Thanks and super job!
17. Arnar G

    @Paul: If you want that you could use only the background Image and place the seperators and text dynamicly.

    That would require you to add a class to the li’s ( eg. li.MenuItem ) and style them all at once. The id would remain for JavaScript purposes.

    You could then use li.MenuItem:hover to change the text colors.

    The php would then use either a while loop or a foreach to render the li’s inside the ul.

    $q = mysql_query("SELECT * FROM menu_table ORDER BY sort");
    while( $row = mysql_fetch_array($q) ){
       if( $_GET['page'] == $row['id'] ){ $current = 'Current'; }
        echo '' . $row['text'] . '';
        $current = '';
    }
    

    * Although after reading through the javascript I don’t see the ID being used for anything but CSS styling. You would of course just create one master class for all the elements.

    From what it seems it would be

    ul
    
    li.MenuItem
    li.MenuItem:hover
    
    li.MenuItemCurrent
    

    This of course needs some modification to fit into your application but I hope this helps you as to how one would approach this.
18. Arnar G

    oops, the html rendres so I hand to make another go at this

    $q = mysql_query("SELECT * FROM menu_table ORDER BY sort");
    while( $row = mysql_fetch_array($q) ){
      if( $_GET['page'] == $row['id'] ){ $current = 'Current'; }
       echo '<a href="?page=' . $row['id'] . '" rel="nofollow">' . $row['text'] . '</a>';
       $current = '';
    }
    
19. Paul

    @Arnar G: OH! Great response Arnar, thanks!

    Buuut, I guess I should have been more clear. I was thinking in terms of using it for specific images, such as a handful of thumbnails in a sprite format, for a portfolio. That way I wanted to use it as an include file for multiple pages.

    I’ve seen other solutions for CSS for hyperlinks and current page that identified the current page in the body tag as an id or at the top of the page with a PHP tag. Had hoped there might be an easy solution for this sample code too.

    Cheers!
20. Jay

    Really cool.. :)
21. shaik

    what if i have to call the .js without using php? can any 1 help me withthat…
22. Stephanie

    I have been trying to figure out how to make the link for the current pages. So far I have been unsuccessful in writing code that works.

    I have this:
    ul.rollover-ex li a:current { background-position: 0 -300px;}
    ul.rollover-ex li.button2 a:current { background-position: 0 -750px; }
    ul.rollover-ex li.button3 a:current { background-position: 0 -1200px; }
    ul.rollover-ex li.button4 a:current { background-position: 0 -1650px; }
    ul.rollover-ex li.button5 a:current { background-position: 0 -2100px; }
    ul.rollover-ex li.button6 a:current { background-position: 0 -2550px; }

    But it seems I may need to designate each button for the page it is associated with and I’m not sure how to write that in.

    Any suggestions?
23. culinor

    focusing not working, I even downloaded that .php file from your website and put it on my hosting but it’s not working yet, could please give me a hand where my mistake could be, thank you a lot