CSS+Javascript power. Fancy menu

Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing!

Let me introduce you to Fancy Menu:

When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style as tabs. Lately, such navbars are everywhere, as many people believe they’ll make their site more Web 2.0-compatible. Personally, I just think they’re semantically better and accessible.

In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

Introduction

Every time that I know I’m going to use Javascript to alter the behavior or look of something, I try to come up with a simple markup, and make sure it renders perfectly with Javascript turned off. To illustrate this point, imagine that you want to make an element wider on rollover. The property Javascript would change is width:, so I make sure first that my style works when I modify the width randomly.

For this menu, as we’ll be having a movable element that acts as the background, we should first make sure that just by using css, we can freely move it and that it won’t affect the display of the menu. If you didn’t do this, when you’re coding the JS and face a bug, you’ll find yourself wondering if it is caused by the CSS, the Javascript, the browser?

Mark it up

Just like any other navigation, we’re going to use an unordered list with some anchors:

Click here to see HTML code

  1. <div id="fancymenu">
  2. <ul>
  3. <li class="current" id="menu_home"><a href="#">Home</a></li>
  4. <li id="menu_plantatree"><a href="#">Plant a tree</a></li>
  5. <li id="menu_travel"><a href="#">Travel</a></li>
  6. <li id="menu_rideanelephant"><a href="#">Ride an elephant</a></li>
  7. </ul>
  8. </div>

This is the foundation of a semantically correct, degradable navigation structure.

The CSS styling

As I said before, it’s paramount that we create flawless, cross browser CSS code. Let’s get to it

The first problem we face is that it’s impossible to use the background property for the rounded box that follows your mouse, with the current CSS specs shared by most browsers. That forces us to add a new LI item that will act as the moving background.

We’re going to set position: relative to the unordered list, and position: absolute to the moving item, so that it’s easy to move it between the menu boundaries from Javascript. If you don’t quite understand how this works, I encourage you to quickly read this article about CSS positioning. You’ll understand that if we simply set position: absolute to it, we’d have to do some hard, useless calculations Javascript side to positionate it correctly.

Then, this is the code we have so far:

Click here to see CSS code

  1. #fancymenu {
  2. position: relative;
  3. height: 29px;
  4. width: 421px;
  5. background: url('images/bg.gif') no-repeat top;
  6. padding: 15px;
  7. margin: 10px 0;
  8. overflow: hidden;
  9. }
  10.  
  11. #fancymenu ul {
  12. padding: 0;
  13. margin: 0;
  14. }
  15.  
  16. /* Don't apply padding here (offsetWidth will differ in IE)
  17. If you need padding add it to the child anchor */
  18. #fancymenu ul li {
  19. float: left;
  20. list-style: none;
  21. }
  22.  
  23. #fancymenu ul li a {
  24. text-indent: -500em;
  25. z-index: 10;
  26. display: block;
  27. float: left;
  28. height: 30px;
  29. position: relative;
  30. overflow: hidden;
  31. }

So far it’s quite easy, and I included some comments for the tricky parts. The text-indent property is used to hide the text without adding extra markup, and keeping it accesible.

Now, we have to add the background images for each link:

Click here to see CSS code

  1. #menu_home a {
  2. width: 59px;
  3. background: url('images/menu_home.png') no-repeat center !important;
  4. background: url('images/menu_home.gif') no-repeat center; // ie!
  5. }
  6.  
  7. #menu_plantatree a {
  8. width: 119px;
  9. background: url('images/menu_plantatree.png') no-repeat center !important;
  10. background: url('images/menu_plantatree.gif') no-repeat center;
  11. }
  12.  
  13. #menu_travel a {
  14. width: 70px;
  15. background: url('images/menu_travel.png') no-repeat center !important;
  16. background: url('images/menu_travel.gif') no-repeat center;
  17. }
  18.  
  19. #menu_rideanelephant a {
  20. width: 142px;
  21. background: url('images/menu_rideanelephant.png') no-repeat center !important;
  22. background: url('images/menu_rideanelephant.gif') no-repeat center;
  23. }

In the following section you’ll see why we use .gif images for Internet Explorer by using the !important hack.

The moving background

As we discussed, there’s a LI that moves in a lower layer and stretches to take the shape of each element. Because of its structure, we’re going to implement something similar to the Sliding Doors technique, but without text.

Its markup would be the following:

Click here to see HTML code

  1. <li class="background"><div class="left">&nbsp;</div></li>

As it doesn’t have any semantic role in the unordered list, we’re going to include it from Javascript. Of course, for testing, you can include it first manually and then remove it. This is the style for it:

Click here to see CSS code

  1. #fancymenu li.background {
  2. background: url('images/bg_menu_right.png') no-repeat top right !important;
  3. background: url('images/bg_menu_right.gif') no-repeat top right;
  4. z-index: 8;
  5. position: absolute;
  6. visibility: hidden;
  7. }
  8.  
  9. #fancymenu .background .left {
  10. background: url('images/bg_menu.png') no-repeat top left !important;
  11. background: url('images/bg_menu.gif') no-repeat top left;
  12. height: 30px;
  13. margin-right: 9px; /* 7px is the width of the rounded shape */
  14. }

The use of this technique is one of the main reasons why we don’t use filters to display the PNGs in Internet Explorer. You can’t decide the position of the background with them, which would make the right corner side display above the left part. Read this article about the png hack limitations to find out more. Another reason is that Microsoft is updating users to IE7 automatically, which supports png perfectly.

Keep in mind, as well, that when you export the .gifs you’ll have to set the Matte to match the background color, otherwise everything will look really bad. This picture illustrates what your images should look like:

PNG and GIF comparison

Scripting it

Thanks to our smart CSS code, our Javascript is very short and simple. Its job is limited to adding the extra background markup, and of course the effects for shrinking and moving it.

We’re just going to need Mootools’ Fx.Style.js, Dom.js, and of course their dependencies. For this article’s example, I also used a custom transition found in the Fx.Transitions package (remember that transitions are what make the movement of the background vary). It’s coded in the form of a Class, so that it’s possible to initialize several menus on the same page.

Click here to see Javascript code

  1. var SlideList = new Class({
  2. initialize: function(menu, options) {
  3. this.setOptions(this.getOptions(), options);
  4.  
  5. this.menu = $(menu), this.current = this.menu.getElement('li.current');
  6.  
  7. this.menu.getElements('li').each(function(item){
  8. item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
  9. item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
  10. item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
  11. }.bind(this));
  12.  
  13. this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
  14. this.back.fx = this.back.effects(this.options);
  15. if(this.current) this.setCurrent(this.current);
  16. },
  17.  
  18. setCurrent: function(el, effect){
  19. this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
  20. (effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
  21. this.current = el;
  22. },
  23.  
  24. getOptions: function(){
  25. return {
  26. transition: Fx.Transitions.sineInOut,
  27. duration: 500, wait: false,
  28. onClick: Class.empty
  29. };
  30. },
  31.  
  32. clickItem: function(event, item) {
  33. if(!this.current) this.setCurrent(item, true);
  34. this.current = item;
  35. this.options.onClick(new Event(event), item);
  36. },
  37.  
  38. moveBg: function(to) {
  39. if(!this.current) return;
  40. this.back.fx.custom({
  41. left: [this.back.offsetLeft, to.offsetLeft],
  42. width: [this.back.offsetWidth, to.offsetWidth]
  43. });
  44. }
  45. });
  46.  
  47. SlideList.implement(new Options);

Finally, it’s time to start it. Just create the object, by passing the id and desired options. The following example shows how to do it when the page DOM tree is loaded.

Click here to see Javascript code

  1. window.addEvent('domready', function() {
  2. new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
  3. });

The script first looks for the element that has the current class. If it finds it, it positions the background behind it. If it doesn’t, it waits till the user first click on some item to set the ‘current’ class. This comes in very handy for menus meant for user selection, like the example below, instead of menus with links to actual URLs.

There’s an onClick option, which calls a function with an Event object, and the clicked element object reference as parameters. You can also change the effect duration, transition, etc.

Extend it

If you’ve made it this far, you must’ve noticed that it hasn’t been dead easy. In fact, the tutorial is not aimed solely to teach you how to create a menu, but for you to understand the possibilities you have using CSS and Javascript to make something stand out, and at the same time provide some tips to get you started if you want to create your own.

Here’s another example, using the very same Javascript class!

Fill in your name:

Select a picture:

Tags: CSS, Javascript, Menu, Project on January 29th, 2007

505 Responses to “CSS+Javascript power. Fancy menu”

Pages: « 34 … 31 30 29 28 27 [26] 25 24 23 22 21 … 1 » Show All

  1. 390
    Jack Pain Says:
    December 24th, 2007 at 12:35 am

    great stuff on javascript and css :)

  2. 389
    Michael Weight Says:
    December 24th, 2007 at 12:33 am

    very informative and informational article. I love these! haha

  3. 388
    Jeff Review Says:
    December 24th, 2007 at 12:32 am

    wow, thanks for all the code, I think I will be able to use a lot of this…

  4. 387
    Todd Chocolate Says:
    December 22nd, 2007 at 7:41 pm

    learned some great info! thanks

  5. 386
    Alvin Says:
    December 20th, 2007 at 3:53 pm

    Why you use image for displaying text on this menu it is not necessary. I think you should simplify a little. Here is a basic css so people around can make some changes easily to it. It use a underline instead of bg rollorver


    #fancymenu {
    position: relative;
    width: 100%;
    background:#2E5F6B;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;}
    #fancymenu ul{
    padding: 0;
    margin: 0;}
    #fancymenu ul li {
    float: left;
    list-style: none;}
    #fancymenu ul li a {
    display: block;
    float: left;
    color:#fff;
    padding:10px 20px;
    position: relative;
    overflow: hidden;
    z-index:10;
    text-decoration:none;
    font-size:18px; }

    #fancymenu li.background {
    z-index: 8;
    border-bottom:5px solid #18B3DB;
    position: absolute;
    visibility: hidden;
    padding:0 0 0;
    height:40px;
    }

  6. 385
    I Dont Give A Flying Fuck! » Blog Archive » CSS+Javascript power. Fancy menu Says:
    December 16th, 2007 at 9:53 pm

    [...] (more…) [...]

  7. 384
    mohammed alsharaf Says:
    December 16th, 2007 at 5:39 am

    one modification for IE7:
    replace:
    this.back.setStyles({top: (el.offsetTop)+’px’, width: (el.offsetWidth)+’px’});

    with:
    this.back.setStyles({top: (el.offsetTop)+’px’,left: (el.offsetLeft)+’px’, width: (el.offsetWidth)+’px’});

  8. 383
    mohammed alsharaf Says:
    December 16th, 2007 at 5:36 am

    I have modified the menu to be verticle:

    CSS:
    #fancymenu {
    position: relative;
    height: 130px;
    width: 421px;
    background: url(’images/bg.gif’) repeat-y top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
    }

    #fancymenu ul {
    padding: 0;
    margin: 0;
    }

    /* Don’t apply padding here (offsetWidth will differ in IE)
    If you need padding add it to the child anchor */
    #fancymenu ul li {
    float:left;
    clear:left;
    list-style: none;
    }

    #fancymenu ul li a {
    text-indent: -500em;
    z-index: 10;
    display: block;
    height: 30px;
    position: relative;
    overflow: hidden;
    }

    #menu_home a {
    width: 59px;
    background: url(’images/menu_home.png’) no-repeat center !important;
    background: url(’images/menu_home.gif’) no-repeat center;
    }

    #menu_plantatree a {
    width: 119px;
    background: url(’images/menu_plantatree.png’) no-repeat center !important;
    background: url(’images/menu_plantatree.gif’) no-repeat center;
    }

    #menu_travel a {
    width: 70px;
    background: url(’images/menu_travel.png’) no-repeat center !important;
    background: url(’images/menu_travel.gif’) no-repeat center;
    }

    #menu_rideanelephant a {
    width: 142px;
    background: url(’images/menu_rideanelephant.png’) no-repeat center !important;
    background: url(’images/menu_rideanelephant.gif’) no-repeat center;
    }

    #fancymenu li.background {
    background: url(’images/bg_menu_right.png’) no-repeat top right !important;
    background: url(’images/bg_menu_right.gif’) no-repeat top right;
    z-index: 8;
    position: absolute;
    visibility: hidden;
    }

    #fancymenu .background .left {
    background: url(’images/bg_menu.png’) no-repeat top left !important;
    background: url(’images/bg_menu.gif’) no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
    }

    Javascript: (menu.js)
    var SlideList = new Class({
    initialize: function(menu, options) {
    this.setOptions(this.getOptions(), options);

    this.menu = $(menu), this.current = this.menu.getElement(’li.current’);

    this.menu.getElements(’li’).each(function(item){
    item.addEvent(’mouseover’, function(){ this.moveBg(item); }.bind(this));
    item.addEvent(’mouseout’, function(){ this.moveBg(this.current); }.bind(this));
    item.addEvent(’click’, function(event){ this.clickItem(event, item); }.bind(this));
    }.bind(this));

    this.back = new Element(’li’).addClass(’background’).adopt(new Element(’div’).addClass(’left’)).injectInside(this.menu);
    this.back.fx = this.back.effects(this.options);
    if(this.current) this.setCurrent(this.current);
    },

    setCurrent: function(el, effect){
    this.back.setStyles({top: (el.offsetTop)+’px’, width: (el.offsetWidth)+’px’});
    (effect) ? this.back.effect(’opacity’).set(0).start(1) : this.back.setOpacity(1);
    this.current = el;
    },

    getOptions: function(){
    return {
    transition: Fx.Transitions.sineInOut,
    duration: 500, wait: false,
    onClick: Class.empty
    };
    },

    clickItem: function(event, item) {
    if(!this.current) this.setCurrent(item, true);
    this.current = item;
    this.options.onClick(new Event(event), item);
    },

    moveBg: function(to) {
    if(!this.current) return;
    $(’pictureselect’).innerHTML = to.offsetTop
    this.back.fx.custom({
    top: [this.back.offsetTop, to.offsetTop],
    left: [this.back.offsetLeft, to.offsetLeft],
    width: [this.back.offsetWidth, to.offsetWidth],
    height: [this.back.offsetHeight, to.offsetHeight]
    });
    }
    });

    SlideList.implement(new Options);

    i have test it in IE7 and FF.

  9. 382
    Paolo Says:
    December 13th, 2007 at 8:43 pm

    Hi!
    I just saw and added your fantastic menu script to my website. Congratulations, really!
    I’ve only one question and I hope you’ll answer me, please.
    As can you see in my website (beta) if you use IE to visit it the image that moves in the links is black, while in Firefox and Opera is orange. Please can you tell me how to fix that error???

    thanks a lot and congratuations again,
    Paolo

  10. 381
    Andi Says:
    December 13th, 2007 at 5:49 pm

    Here is my site:
    http://www.pages.drexel.edu/~amb98/

  11. 380
    Andi Says:
    December 13th, 2007 at 5:49 pm

    I cannot figure out why my links are not working properly.

    Can somone clue me in?

    Thanks!!

  12. 379
    Alphabetix Says:
    December 12th, 2007 at 3:33 pm

    That is a real cool menu!

  13. 378
    Augusto Says:
    December 12th, 2007 at 9:21 am

    Hi all,
    i recive en error using it on IE7 .. arghhhh

    http://mondoinformatico.webjuice.it/

    Guillermo can help me?

    Thanks,
    Augusto

  14. 377
    13 Awesome Javascript CSS Menus | Vietnamese Webmaster Center Says:
    December 10th, 2007 at 4:14 am

    [...] with light weight code and extra two more interface styles. This effect was originally written by Guillermo Rauch using mootools javascript [...]

  15. 376
    wmwebtr ödüllü seo yarışması Says:
    December 6th, 2007 at 3:19 pm

    I like it thanks…

Pages: « 34 … 31 30 29 28 27 [26] 25 24 23 22 21 … 1 » Show All

Leave a Reply

WP-o-Matic Updated »