IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

Let me introduce you to Fancy Menu:

fancymenu

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:

<div id="fancymenu">
  <ul>
    <li class="current" id="menu_home"><a href="#">Home</a></li>
    <li id="menu_plantatree"><a href="#">Plant a tree</a></li>
    <li id="menu_travel"><a href="#">Travel</a></li>
    <li id="menu_rideanelephant"><a href="#">Ride an elephant</a></li>
  </ul>
</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:

#fancymenu {
  position: relative;
  height: 29px;
  width: 421px;
  background: url('images/bg.gif') no-repeat 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;
  list-style: none;
}

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

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:

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

#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;
}

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:

  •  
  • 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:

    #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 */
    }
    

    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.

    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({left: (el.offsetLeft)+'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;
    		this.back.fx.custom({
    			left: [this.back.offsetLeft, to.offsetLeft],
    			width: [this.back.offsetWidth, to.offsetWidth]
    		});
    	}
    });
    
    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.

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

    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!

    691 Comments

    Haitham said

    why don’t you provide a download page that has the scripts, the images, and the HTML file and documentation so that people like myself can follow your steps and know where they went wrong? i have tried over and over going through details in your description but i am unable to get this to work!!

    simonjs said

    I really like this effect. You can make a similar effect in flash with a little bit of ActionScript but this is a much better solution as it degrades better than flash would.

    If you were to use flash ideally you’d have to use js to insert it to overcome IE’s Activex plugin control.

    With this it’s like you skip a step! who needs flash now!

    Job well done and great tutorial, thanks!

    eeels said

    cool!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Guillermo Rauch said

    @Haitham
    Sure. I’ll make a zip with the library and many examples soon.

    @simonjs, @eeels
    Glad you like it

    Rob said

    On dial-up, for about 45 seconds after the menu images (Home, Plant A Tree, etc) have loaded, it doesn’t do anything. The moving background seems to take ages to load

    Hi! I´m sure that you can speak in spanish since you are from Argentina, but is not important the language in this comment. Your solution is very nice! I don´t have experience in programming (only design and coding) but i need for sure learn some of javascript, i´ll look more into your code and i´ll do some sample, when i get this done, i´ll contact you for share my work.

    By the way, i think that we all are waiting for more posts here! lol!

    Mark said

    I don’t get it. All I see is an orange background behind some white links. What am I supposed to see? What is the “moving background”? Can you put a couple of screengrabs up for people (like me) that can’t see what you are talking about.

    WiCk3D said

    What about a vertical menu???

    Whiteboard said

    I have also seen a very similar effect with ActionScript…and I think that it is much easier with Actionscript, but having it with CSS and javascript is awesome. I think that i’ll wait for you to compile everything into a Zip so that I don’t run into the same problems as the first poster. Nice work.
    Shredder

    toykilla said

    Any way to incorporate a drop down with this?

    dakine said

    I like the menu…a zip will be nice.

    Guillermo Rauch said

    For the time being:

    http://tangelo.blueorbs.com/share/slidelist5f5cb.zip

    Though the definite zip will be much better. I’ll also look into your bug reports.

    goggleBOX said

    Nice, works perectly in Opera 9 but the CPU usage hits 100% while doing so. This is not really a complaint as your script/CSS are really niffty.

    Adam said

    Doesn’t look very good in IE7. The “moving background” is black instead of a dark orange. :(

    Mike said

    Thanks, very interesting….

    Jenny said

    I love this site

    Dave Q said

    WOW!

    Donnerschlag said

    Here is another nav menu with the same type of thing but the code is *very* messy.

    http://pupius.co.uk/

    John said

    This a good tutorial, the .zip helped me a lot. How would one implement this as a vertical menu? I like the style of it, but the horizontal menu doesn’t fit the layout of the sites I’d like to incorporate it in.

    Matt said

    This all seems a little over my head, but what the hell! I’m going to try this out… it’s way to cool not to. Thanks!!!!! You Rock!!!!!

    that is nice,
    fantastic.
    what do you that?

    iyimiÅŸ tebrikler

    Could this be easily changed to work with menus made out of text, rather than images, so that it scales proportionally when the text on the page is enlarged / shrunk?

    Guillermo Rauch said

    @Tudor Hulubei

    It would be possible to use this for text, but we’d need to see if it’s possible to obtain the width and offsets in ems from Javascript, rather than pixels.

    Guillermo Rauch said

    Coming soon, by the way:
    – Text based example
    – Another menu example
    – Vertical menu

    AS said

    I am looking forward to the text based example!

    midorigin said

    It’s not clear to me how to make clicking the menu items actually navigate to some URL. Should I change the href attributes in the list, or is there something I need to change somewhere else?

    Guillermo Rauch said

    Just the href attributes. You can use the onClick property of the options parameter if you want custom JS code when some item is clicked.

    For text you’ll need the height too, otherwise the moving shadow/background will not cover the entire text when the font is enlarged. I’m looking forward to the text example as well as to the vertical menu! Thanks!

    Guillermo Rauch said

    Naturally. But if I don’t figure out how to calculate ems, and you increase the font size, the box size will remain unupdated until you pass your mouse over it again.

    I guess I’d be ok with that, as long as the height is properly re-calculated on the next mouseover (right now it is not). Also, for text you’d probably want to make the shadow a bit larger than the width x height, to make sure there is some empty space around the text and whoever sets the text doesn’t have to artificially add spaces around it. Probably something like 1.2em or so, but I guess you thought of that already.

    Mex_89 said

    Grande guille. Donde aprendiste?

    This is very cute! Since my site’s already using mootools for effects, I’m playing with a modified version of this on my site now, with { brackets } instead of a bg color. The front page has a very different menu structure, but this fits very nicely into the horizontal menu across the top of the main body of the site!

    @John: try adding
    top: [this.back.offsetTop, to.offsetTop],
    to the fx.custom call in moveBg.

    Ronak Bhagdev said

    perfect, man!!!

    Jonic said

    You. Are. A. Genius.

    Thanks for this man… I can see myself using this technique in the future :)

    Guillermo Rauch said

    By the way, I haven’t been able to find a computer with IE7 to fix the alleged bugs there.
    Can anyone help with that ? Maybe a screenshot, some Javascript debug info?

    Nader said

    This should be in Mootools Gallery…TAGGED!!

    Chris C said

    This is really cool, how well does this work in older browsers? say back to IE5, or FireFox1? NS? I love that it is cross browser but will it still look “decent” in older browsers?

    very fancy menu…

    thanks!!

    Kim Schulz said

    This script is really nice, except that it makes my IE7 crash every time I move the cursor over the menu or press any of the menu items.
    Works like a charm i Firefox, Opera and IE6 though (I have implemented it at http://www.chilifan.dk but without using images for menu items and without using a background image for the entire menu.

    Owen said

    Cute menu.

    And I do not get tired myself of speaking that I love mootools \o/

    Guillermo Rauch said

    @Luis Junior
    Nor do I !

    @Kim Schulz
    I have tried the script with IE7 and have not seen that behavior. Do you have any idea why that could be happening? I don’t know how to debug something on IE either :/

    @Chric C
    One of my biggest problems right now is testing my script with many different browsers. I’d like to hear how it does on IE5.5, but I’m not really interested in older browsers.

    omar said

    Does the menu work on safari or mac ie?

    Guillermo Rauch said

    @omar
    Safari is my main browser. I guarantee it works. I don’t use mac ie, so I don’t know about that.

    Chirag said

    Dude, You did some excellent work here.

    just a suggestion .. If you can try building some wizard to change CSS themes n stuff .. so that people can customize it.. that would b great…

    Keep up the good work… :)

    Guillermo Rauch said

    @Chirag
    Great idea.. I’ve seen that many people do like those wizards (count me out though), and it would even help make Mootools more popular.

    /me adds it to TODO list.

    celsius said

    nicely done!

    Nick said

    This may sound basic, but I’ve adapted this menu nicely to my website. I’ve changed all the images and properties, and everything works just like the one on the site here. That’s the problem:

    I can’t, for the life of me, get the buttons to link properly. I can right-click on them and “open in new tab” and it will link fine, and so I know the links are written correctly, but when I simply left-click, nothing happens. Have other folks gotten this to work and not just look nice (which it looks great, by the way).

    Guillermo Rauch said

    Nick,

    If you can show me an URL I’ll give you a hand. Are you sure you have removed the e.stop() call ? I’ve included it in order to avoid clicks in the orange example!

    It’s the onClick property ;)

    Nick said

    Hello Guillermo-

    Your site has been awesome for helping me learn CSS. Thank you for making your scripts public!

    Here’s as far as I’ve gotten with your fancymenu (trial posting only):

    The visuals worked from my desktop, and the links didn’t. Now, the links work and the visuals don’t! Thanks for any help you can give.

    I embedded the ENTIRE Style sheet in the html for viewing.. :)

    Nick said

    Whoops that link didn’t show:
    http://www.everydayprophets.com/theroadtrip/index.html

    Guillermo Rauch said

    Check that this exists and can be accessed:

    http://www.everydayprophets.com/theroadtrip/mootools.js

    Nick said

    OK! It was a permission problem. Now we’ve got the visuals- clicking on the menu items should take us to a 404 page.

    Hmmmm…

    Guillermo Rauch said

    Now edit main.js, and make sure the SlideList initialization looks like this:

    FancyExample = new SlideList($E(‘ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700});

    I removed ” , onClick: function(ev, item) { ev.stop(); } “, which stops the propagation of the event. In other words, I didn’t want my visitors to go anywhere when they clicked “RIDE AN ELEPHANT” ;).

    gosciu said

    Hmmm your comment system strips all the tags ;]
    In var back = $(’ ’).appendTo( $(menu).find(’ul’) ); there should be HTML from _second_ “Click here to see HTML code” anchor on this page.

    PS. Love to see transition You use as jquery’s easing ;)

    Guillermo Rauch said

    @gosciu

    Can you email me the file so I can create a new post ?
    I’m sure all JQuery users will be thankful for your effort.

    Best,
    Guillermo

    Szymon Pilkowski said

    Whoa, very nice piece of code.
    Anyway, works strange in Opera 8.54/Win.

    Guillermo Rauch said

    It would be nice to make it work on as many browsers as it’s technically possible.

    So, all those willing to help, try to describe what actually is going on, if it’s a CSS / Javascript bug and provide debug info when possible.

    Nick said

    Thank you very much for your help Guillermo! I will post a link when I get the site completed and looking good, with your fancy menu!

    michael said

    For a text version it should be simple enough to just alter the CSS.

    Remove the following:

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

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

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

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

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

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

    and replace with:

    #fancymenu ul li a {
    z-index: 10;
    display: block;
    float: left;
    width: .1em;
    position: relative;
    font: bold 14px tahoma, sans-serif;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 15px 7px;
    }

    #fancymenu > ul li a {width: auto;}

    shouldn’t be any need to change the JS.

    Also, if you want to create your own build of the mootools lib that works with the example, you’ll need to add the following…

    Under Effects:
    Fx.Styles (not Fx.Style)
    Fx.Transitions

    Under Addons:
    Dom

    That should give you most of the dependencies, however you will also need:

    Under Native:
    Event

    Under Window:
    Window.Base

    So the full list to get the example to work is (14 items):
    Moo
    Utility
    Array
    String
    Function
    Element
    Event
    Common
    Dom
    Window.Base
    Fx.Base
    Fx.CSS
    Fx.Styles
    Fx.Transitions

    Viktor Kelemen said

    Nice, but it makes my firefox really slow…

    Beautiful!

    Ryan Gene said

    that’s amazing!!

    vickeybird said

    Wow! Very cool indeed.

    好东西,真是不简单啊.

    Yasir said

    if some one have complete code of this menu please mail me at yasirhaleem@gmail.com
    :( im unable to make sample like this

    many many thanks

    lichi said

    awesome!!!

    Paul said

    Hi,

    Very nice job!

    I try this menu in Drupal 5.1 site, but not working.
    The Drupal 5.x use jQuery, and the loaded jquery.js disable your function.

    What is the correct solution?

    Regards, Paul

    Very impressive!

    I like it very much, ’cause we can see that we doesn’t have to use flash to apply this kind of menu fx…

    Thank you!

    Key said

    Hi all !
    I really loved the way you hide the codes. How can I use the same effect on my pages? Can I hide whatever I want in that divs?
    Please help…

    kerwin said

    I love the menu, but i’m not a javascript big shot

    Is there a way to set the “current” class to the button clicked on?
    like an onClick solution or whatever, i don’t know shit about these things, thkx in advance!

    Guillermo Rauch said

    @kerwin

    That’s SlideMenu default behavior ;) When an item is clicked, it’s set as the current. Test the orange menu. Click Travel. Then hover any other item and unhover it. The background will return to Travel instead of Home.

    casey said

    @Kim Schultz

    I really like the changes you’ve made, especially without the images. Do you mind sharing your source?

    Thanks,
    Casey

    Kim Schulz said

    @casey

    You can just grab the source from http://www.chilifan.dk in the css file just look for /* fancy menu*/ and take from that point and down.
    The javascript is in a script of it’s own + a bit in the index file. the images for the sliding background is the same as from this article.
    Still havent solved the IE7 problem though, but I guess the solution will be to use the gif’s only

    […]16. letni mulc iz Argentine, ki sliÅ¡i na ime Guillermo Rauch je na svojem blogu DevThought.com objavil zelo sjaksi*, fjansi** in sploh kul CSS+Javascript hover za navigacijske menije …[…]

    Nick said

    If anyone would like to see how I used this awesome fancy menu (without many changes), check out
    http://www.singleb.com/theroadtrip/index.html

    Thanks guillermo!

    Marshall said

    Nice work. You should add this to the anchor css to get rid of the outline when selecting a link in the menu.

    outline:none;

    -Marshall

    guoguolovephp said

    好东西 期待,学习

    calmquiet said

    FYI:
    What about the *current* page… I wanted to print these pages for study while I was off line.
    Please look at Print Preview (for Safari or FireFox/Mac at least) and see how unreadably different divs overlay each other.

    calmquiet said

    PS: Follow-up
    As it turns out I guess it’s a *feature* of having code hidden. One I have clicked on all your “click here to see code” options the display is fine. FWIW.

    Ty tzmedia said

    Sorry I haven’t read all the comments:
    Has it been discussed how much processor power this menu takes?
    The menu is smooth as butter on my computer at work, which has a gigabyte of RAM, and a 3 gig processor. At home though the animation is sluggish, my home machine has a 1.4 gig processor, but only 256 Ram I think.
    I tested it in fireFox on both machines.
    Could there be anything else making it sluggish on my home machine. Does Javascript have version numbers for example that are installed in the system?
    Any suggestions on leveling performance on different machines, Any ideas. thanks.

    Roi Perez said

    Hey guys, I think I solved this display problem all of us were having in IE7. I dont know if someone already managed to solve it, but any way, meh, ill show you what i did:

    http://testing.roiperez.com/menu/

    ConnyLo said

    Interesting. May be easier with a bit Flash?

    Hi, I wanted to signal to you that I have published on my situated one version translate in Italian of your beautifulst article “Fancy Menu”. I make you compliments.

    http://www.sickbrain.org/?document_id=115&topic_id=8&page=0

    Regarding browser issues, use http://www.browsercam.com to view screenshots of all possible browsers on all platforms, with the ability to vnc into multiple different machines with all necessary browser editions and versions (Windows, Mac, Linux).

    For independent developers that cringe at the cost, just go to fundable.org and keep an eye out for the group plan that usually comes up every month or two so that it’s only $25/year. Steal.

    Kim Schulz said

    @Roi Perez

    Your menu attempt crashes my IE 7 the same way as the one on this page.

    Andreas said

    Very cool stuff. I like it. Something came across: It’s common practice though, but i forgot it while tinkering with the script: be sure to load the stylesheets BEFORE the javascripts. If you don’t Safari freaks out with the “initial” state of the fancymenu placing it somewhere in the wild when the page is loaded or reloaded.

    George said

    Nice work. Thanks for sharing.

    Guillermo eres un monstruo !
    I thought it was FLASH.
    The slizing effect is so well done.
    I’m working on the design of my next site, Casino Lemonade (don’t juge it now, it have no design) and I think I will use this technique.
    Thanks for sharing it with us.

    Saludos,

    Alex

    carl said

    very nice.
    tried to implement it on a site, and seemes to work ok, but I don’t manage to get the sliding background to stick to the selected menu item after the selected page is rendered..
    some hints on this would be much apreciated!

    crysfel said

    woaw! this is awesome, i really like this!

    li said

    where img download?

    Theron said

    I have cleared the ” , onClick: function(ev, item) { ev.stop(); } “and now the image upon the Link does not remain that I visit. Some aid please.

    arjun said

    very nice menu.Applause!!!!!!!!!

    consideredharmful said

    Freakishly beautiful.

    Robin said

    Great show, but ugh. How many more Javascript libraries until the dev community picks one that we can settle on? I spent the last 1/2 year with JQuery, now this mootools comes along….

    hay its too good!, really i Appreciate that

    Amlur said

    very good menu !!!! but Please can somebody help me making the same menu but horizental ?? please very urgent

    Amlur said

    verical please :s not horizental

    Impressive!

    Have you made the Download file yet? I would like to make a menu using your menu system. I will also like a photoshop file of the words for the menu items.

    JtChurch said

    Just a quick question: Does the code know which page its on and retain the ‘clicked’ status of a menu item? Or does each page just have a slightly different menu that has its menu item as default?

    -Looks Great btw

    Ben said

    Guillermo,

    Awesome work with the menu. I do have a question though. I got the menu to work just fine using just text, however, I want to try and add vertical css drop down menus below your menu…..and well so far I have been unsuccessful in displaying them vertically and without blowing the whole menu out of whack. Any ideas?

    Damien said

    The reason it is Buggy in IE is because of the transparent PNG’s

    Edski said

    When te menu is sliding the mouse over cursor flickers like crazy in ie6.
    Is there a fix for this?

    Edski said

    I use a stand alone version of ie6… that’s why it flickers, on a normal version of ie6 there is no problem with flickering!

    Great menu!

    Pentacle said

    Hi. I appreciate your great work for this menu and thank you so much for it.

    Btw, I modified it for a text-based version. Everything is ok except Internet Explorer.
    My page has a wrapper div with this line:
    “margin: 10px auto;”

    The problem is that the absolute background item is not inside the centered wrapper in ie6.

    It’s mentioned in the article that we need js calculations to make it work in relative positioning.

    I’m a javascript newbie and couldn’t make it out. Can someone help me?

    ogalican said

    not bad.

    raul said

    awesome work… I wonder if it could be combined with a good dropdown menu technique… or a moofx type sliding drawer to open a div of menu options… hmmm

    Scott said

    *screams in fustration*
    I’m creating a website (for my dad) and I can’t find the font you use, and it’s driving me insane (*laughs manically*).

    What font do you use?

    Save me from insanity,
    Scott

    Scott said

    Never mind about the text, but I have a question.

    I downloaded the .zip file, and basically changed around the pictures in Fireworks to match what I want (I’m only a teen + no expirence = helplessness), but when I try to create a new object, nothing happens.

    Since I’m not a complete idiot, I decided to add 3 items in the unordered list and create some new images and call them “menu_mn, menu_ks, menu_ia” and add the following CSS code:

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

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

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

    I think everything should be alright, but it’s not. Can you help? Thanks much.

    tim said

    that font is vag rounded, i think its an adobe font, but can be found here: http://www.webpagepublicity.com/free-fonts-v.html

    Erik Paulsson said

    @Guillermo
    GREAT work on this, very nice!

    @Kim Schulz

    I like you the changes you have applied for a text only version of this. However, I have noticed a problem with it for Firefox on Win and OS X. If you place the mouse in the padding of an for a menu item the background image does not slide to that menu item, but instead bounces around erratically.
    I think I have found a solution for this. Instead set up your menu items something like this:

    Technology

    and then apply your padding to the like this:

    #fancymenu ul li a span {
    padding: 0 7px;
    }

    I haven’t tested it on all browsers yet but have not run into any problems on Firefox, Safari, or IE6.

    I hope this helps somebody out.

    Erik Paulsson said

    That didn’t format how I planned…. I’ll try again.
    [li class=”menuItem”][a href=”#”][span]About[/span][/a][/li]
    obviously replacing the square brackets with angle brakets

    I got this far: http://www.keepingthelight.com/menutest/

    Why does it not snap back like yours does?

    zhaiduo said

    really good, thanks for sharing.

    Christian said

    It seems that whatever I do, I cannot get the link to actually go anywhere. It shows in the window, but does not navigate on left click. Also the image is black locally. ANy ideas. Thank you for your code.

    Christian said

    Actually I should have looked in the comments closer. I managed to get it working with clicking. Here is the interesting thing. When I use IE7 to view your site, the menu looks fine, but when I use the code in your zip on the same browser the hover is black. Is there a reference issue?
    Thanks

    Marco said

    Hi Guillermo, i downloaded the zip file with the files and i opened in dreamweaver 8 in OS X, when i wanted to see the page, for some reasons it was not loading the styles. If i downloaded the same file to a Windows machine, it worked fine, is there anything im doing wrong? I noticed that in Windows the extracted files had an OS X folder and i couldnt see that folder in my Mac.

    Thanks

    Josh said

    Hi Guillermo,
    This is an awesome tutorial…thanks for this nifty menu. Anyhow, I was having the problem with the menu having black backgrounds in IE 7 as well, but then found out that the CSS file u have in the Zip file was missing something. I just copied your CSS from
    http://devthought.com/wp-content/articles/fancy-menu/menu.css
    and now it works in IE 7 =)

    Alex said

    Hi, I love this and have implimented it onto my site: http://www.alexhays.com

    The thing is, in Safari the background sits slightly to far to the right. It looks fine in Firefox, but Safari has issues. Im not sure if its some obvious problem but I can’t seem to figure it out. It also doesnt work whatsoever in IE, haha.

    Thanks – you’re awesome

    Jeremy said

    I am eager to use this, but I can’t. Either I need to find a way make new menu choice images (instead of “riding an elephant”) without photoshop or fireworks, or I need to find a way to make the text version work. Can someone just sort of end me a working model?

    This is freaking awesome man! Thanks :)
    It is tools like this that help us web designers build great sites.

    “You are a gentleman and a scholar. Go into my stable and take my finest steed. His name is Windjammer :)” Tedd – How I Met Your Mother (TV Show)

    quard said

    Thabks for great menu!
    I have question: when I open page in IE6 on clients PC, I saw top bar with security notice like “page have active content and must be blocked” And fancy menu don’t work. Yeas, I can navigate, but “shadow” not drawn :(

    In Firefox work’s fine. How to check this ? I can’t tell any person to enable java and other stuff. Bu I love fancy menu!

    Rabarbara said

    GREAT Menu. I use it for my Fanpage. And it looks just cool.

    Thanks.

    @quard

    See if your files work on a host. The active content blocked usually only happens locally. I had a similar problem when implementing iepngfix and someone clued me in that it only happens locally.

    dsfsdafasdf asdf f

    sgdfgfsdgsdf

    Hi, I really like your fancy menu. Where can I download all the project code including images and such? Thanks again and you’ve done a great job with the menu.

    Thanks,

    Mario

    evren said

    cool script, thanks.

    Tom said

    Hey, I have problem with IE6 png. I’ve tried everything (including behavior: url(iepngfix.htc); ) and I don’t know what should I do right now.Did anybody have such a problem? I will be thankful for solution .

    Jonny said

    I love this, and the text-based solutions look promising. Guillermo, or some other savvy soul, would you be able to fine-tune the text version?

    I’m also interested if this could be created as a Joomla! menu module. That would be powerful.

    dotlife said

    and the same with scriptaculous exists ?

    Rory Fitzpatrick said

    Hi there,
    Really sweet menu! I’m trying to port it to jQuery to use on my project and seem to have done pretty well but have a couple of problems I wondered if you could help me with:

    – The CSS sets the background ‘visibility:hidden’ which somehow gets switched to ‘visible’ but I can’t see where this happens. I’m guessing its probably an ‘automagic’ thing in mootools but the only way I can see to do it is to add visiblity to the properties being set at the beggining of the setCurrent function.

    – Whenever I move the mouse from one link to the other, the background transitions back to the current element before moving to the new element. Basically the moveBg function is being called twice. How are you stopping this happening in your version?

    – What does the bind() call at the end of each addEvent do?

    – What is the effect variable in setCurrent for?

    Thanks for your help and creating an awesome menu. I’ll let you know once I’m finished, I’m sure plenty of others will want this!

    Cheers,
    Rory

    sabin said

    nice

    Steel said

    It seems in IE that the sliding background is black !! i cant seem to change it to the transparent gray…

    Any thoughts ?

    Hem said

    This is amazing! But how can I make the second example picture selector clickable as a link like the first example? If I change the
    if($(‘pictureselect’)) PictureSelect = new SlideList(‘pictureselect’, { onClick: function(ev, item) { ev.stop(); } });

    to

    if($(‘pictureselect’)) PictureSelect = new SlideList(‘ul’,’pictureselect’, { onClick: function(ev, item) { ev.stop(); } });

    The a href link works, but the effects stop. How is this done? Thank you! Any help is greatly appreciated.

    Christian said

    I’ll try a bit to get a textbased-variante… but for the images: the effect only starts after I clicked on a picture. Is it possible to make it start when the cursor get in the aria. Perhaps via mouseover the div or so?

    Kevin said

    Is it possible to make this for a vertically oriented menu?

    jacob said

    Too bad it’s slow as F*&*K

    Christian said

    okay, I got it! [http://qooby.qo.funpic.de/]
    next problem is a submenu. it should have the same effect, but with a new moving backgroud-so the one of teh mainnav keeps in place….
    any advise?

    GiorgosK said

    I guess mootools can do some pretty amazing things huh ?

    Jon Brown said

    I got the menu to work, but the links do not work, any ideas help anyone!!!

    http://www.jonbrown.org/slidelist/

    Jon Brown said

    As you can see from the above post if you view source you can see the links have content in them but they do not work, please help!!!

    Jon said

    Found the solution, thx.

    Joul said

    And What’s the solution, please? I have the same problem. The menu is working but not the links.

    Thanks you.

    Guilty said

    thank youu coool : s — : )

    larson said

    nice menu….

    it’s really to creative, i like moo tools and css technique.

    Decio said

    Awesome work! You should get some some of award for this!

    For the N00bs like me, remember you have to change the Main.js file for the links to work.

    from:

    FancyExample = new SlideList($E(‘ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});

    to:

    FancyExample = new SlideList($E(’ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700});

    Kemar said

    Is there a way to create a drop down for this?

    Thanks

    Mkbart said

    Links don’t work, i don’t know why.

    Look: http://www.grafa3d.republika.pl/POD

    Mario said

    First thanx to share this great menu with us!
    I’m a beginner in web language, i tried to customize my menu.
    Everything is ok except one thing : how could we modify the color of the li?
    I’m sorry if that’s a dumb question but i really don’t understand how.
    Thanx a lot.

    fabio said

    i must be stupid, cos i cannot get it to work at all….
    this is what im getting:

    {\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}} {\*\generator Msftedit 5.41.21.2506;}\viewkind4\uc1\pard\f0\fs20 \par \par \par \par \tab \par \par \tab \tab\par \tab\par \tab \par \tab\par \tab \par \par \par \par \par \tab