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
    \par \tab\tab

    * \par \tab\tab\tab Home
    * \par \tab\tab\tab Plant a tree
    * \par \tab\tab\tab Travel
    * \par \tab\tab\tab Ride an elephant
    \par \tab\tab

    # \par \tab

    \par \tab
    \par \par \par } �

    Scott said

    Love it! I’m really impressed. Awesome man.

    srinoo said

    my god that great menu!!! lookslike flash menu…great work!

    Vilandra said

    I’m trying to make this work in flash as well, anyone know how you’ld get the same effect in flash??

    Mark said

    Hi,

    I am having issues getting this script to work. Any time I try to implement the script i get an “$E is not defined” error in Firefox’s error console.

    I have even tried putting it together outside of my application copying and pasting the code from the site.

    Thanks in advance for all your help.

    Mark Romero

    ashok said

    really!!! great menu… look like a flash….. I like it.

    Gustavo said

    Almost all of my development is in ASP.net c# (chastise me later) and I noticed that when using master pages, whenever I click on a link, the menu resets to the Home position. I’m assuming this is due to the master page behavior, where it is actually reloading the entire page…I really don’t want to use an iframe to fix that (mostly cause i hate the iFrame) and am thinking about just plugging in some custom AJAX for it, however, AJAX won’t actually run any code or scripts on the requested page…I’m sure I can figure something out, unless someone has a cookieless way (maybe using sessions or cookies that expire at the end of the session, to have the current class get set based on click and have that follow throughout all subpages…) I was wondering how you got your menu to maintain the links click after a full page refresh.
    Thanks!
    fyi…page devel in progress at http://www.gmtaz.com

    Martin said

    Hi,
    cool menu for our webdesign, and even SEO friendly!

    THUMBS UP!

    Bas said

    Looks great and I’ve got it working but not without the mootools.js which is 24Kb and not the 1.5Kb you mentioned in the article?

    What am I doing wrong here? I need to cut down the JS to as small as possible.

    Sebastian said

    PLEASE MAKE A TEXT BASED EXAMPLE FOR EASY EDITING!! Thanks :)

    Dustin said

    Really hoping you can put up an easy to use zip file that has everything we need (just needs to be edited to fit out needs) soon…

    Timo said

    Is there any workaround to get this sweety work with IE Quirksmode? Everything is messed as soon as you go into quirks (needed to remove unneeded scrollbars in MSIE)

    In desperate hope of some solution …

    This is a great article! Keep up the good work!

    Fede said

    Una pregunta. Cuál es la fuente tipográfica que utilizaste para los botones?

    Mahavir said

    Great functionality and good tutorial.

    thkkx

    郑永挺 said

    真的非常棒!谢谢!

    J.P said

    So Cool!!!!!!
    Thanks.

    lost said

    people who doesn’t work links must be correct the string

    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, onClick: function(ev, item) { ev.play(); }});

    Flux said

    Amazing. May i use this Javascript code for my blog? Thank you.

    funkyeh said

    thats pretty cool, good work, but this is just like vista, do you love microsoft?

    schitck said

    Has anyone come up with a way to add a drop down nav?

    Tapety said

    Very nice. Soon, Flash’s domination on the effects field will no longer be so stable. Great job!

    IN said

    Download it

    Tapety said

    This is like Flash animation. WOW, really nice! :)

    Nishanthe said

    Nice effect. thanks

    Steven said

    The menu effect is good, but what really makes this good is the excellent tutorial you put together. Thanks.

    arjun said

    very sexy!!!!!!

    A very nice and useful menu, I really like it. Thanks for sharing

    kral oyun said

    thank you.

    A very nice and useful menu, I really like it. Thanks for sharing

    Thanks for sharing

    Here is jQuery port/enhancement. Its easier to use and supports vertical lists too:
    http://meta20.net/Smooth_Menu_widget_for_jQuery

    nonato said

    how put my link en this menu?

    osCommerce said

    nice nice nice, thanks for sharing!

    nonato said

    exelente menu, pero como le pongo los link? cambio el # por una direccion y no lo abre……….gracias y saludos

    Jeff said

    Awesome script – thank you for sharing it with us!

    I do have one question. I incorporated your script (and it worked perfectly with links too)… but then I added a script called “glider.js” (which also required an “effects.js” and “protoype.js” scripts) and since incorporating them – the fancy menu doesn’t work… I have looked all over to try and find a fix but to no avail…. would you know what could be causing the conflict? Any help is greatly appreciated!

    vince said

    Great job. What do I need to change to keep the menu bar centered in the windows (as browser window is resized/maximized)? thanx

    vince said

    Answered my own question…
    margin-left: auto;
    margin-right: auto;

    For the benefit of jQuery lovers, i have ported this excellent effect as a jQuery plugin. Feel free to take a look at it http://gmarwaha.com/blog/?p=7.

    Thanks Guillermo Rauch for this amazing widget.

    Nice tutorial!

    Victor said

    Hi,

    Your fancy menu is great. I am having a problem with it though if I will have “lightbox image viewer” run together with the fancy menu. Each of them works perfectly if I will remove either of the two from my index page. I think there must be some conflicting variables or ID names. Have you or the other users of your fancy menu experienced the same problem? Help will be much appreciated. Thanks and more power to you.

    -Victor

    Guillermo Rauch said

    Comment #300

    John said

    Great menu, however I’m confused about the step with the png/gif image. The example you give is not very clear and I’m not exactly sure how to go about doing it.

    Julio said

    Please Guillermo…

    I’m looking forward the vertical oriented menu… will you present us soon?

    Great job!!

    Guillermo Rauch said

    @Julio
    Yes, extremely soon

    Guillermo Rauch said

    @John
    The edges of good-looking fonts are ‘antialiased’. This means some pixels are slightly transparent. .gif cannot achieve this, it can set a transparent pixel but can’t determine the level of transparency.

    That’s why you have to hard-include the border (in my case, the orange one), with your favorite image editing tool, for .GIF, and leave .PNG as is.

    azhar said

    Very Excellent Work

    John said

    @Guillermo Rauch

    What I’m asking is this. For each link item (eg: HOME) you have created two images. One is gif the other is png (I understand why, just not how).

    So because the font colour is white with a transparent background, for the png image you just save it as a white text colour with transparent background, but when saving it as a gif you’re saving it as a white text colour with orange stroke (border) and transparent background. Is that correct?

    Guillermo Rauch said

    @John

    That’s correct, except it’s not a complete border.

    John said

    Not a complete border? What did you do to achieve the gif image border? I use Fireworks or Photoshop and I can give it a complete border but obviously that’s not right.

    p.s. Sorry to be a pain in the butt.

    Guillermo Rauch said

    John,

    When you export and select the transparency (alpha transparency), there’s a Matte option with a color picker. Select the color and it’ll add the partial border to your fonts.

    John said

    Ah thank you for that, I’m still getting use to using FW and didn’t even realise what that was for. You’re a champ :)

    shaon said

    Thanks guy for this nice stuff

    Dean said

    Very good, however I a lot of work is needed to make these compliant.

    denswor said

    @Guillermo!
    what about lightbox script & your menu together using? it doesn’t works 8(

    anyway – great menu! thanks!

    Hesson said

    Very good, however I a lot of work is needed to make these compliant

    Help said

    When will the vertical menu version be released? I really need it soon, and am looking forward to it!

    vipin ck said

    very nice menu

    AnGiKo said

    WOW…..Thank you very much

    pico said

    This menu is really nice. Trying to get it work so that after you click on a link, the slider stays on that link … Anyone able to get this to work?

    Nick said

    I agree, you should put this in a file for download!

    very nice, thanks

    Fredy Gil said

    Hi, Guillermo

    Any idea on how to do the same but with two levels?

    Thanks!

    Jarman said

    I just don’t get it, I am trying to sort out the images in Fireworks but it’s the exporting bit I’m confused about. So if I had a text “Home” with a nice colour #CC9966. Do I export this as a PNG32 file (matte currently white) and what about the gif? Leave this as a normal GIF file? This is the only thing I’m unsure of, sorry but a novice here trying something a little of course of knowledge! but i love this nav! so got to have it!

    Jarman said

    got it to work!! Now I need to change the background colour of the hover. How do we change that? It’s black but I want it another colour! HELP!!!

    Affilates said

    Wow! That’s very nice. I think only Flash can do something like this before. Css is so powerful now

    dave said

    I’m using this on links that have click events that do not go to a different page… I noticed in the first example, it stays highlighted on whatever element i clicked on… It isn’t doing that however when I implemented it myself, everything works right.. except when I click on a link, it returns to the first one…

    jarman said

    Dave

    for each page, remember to move the class=”current” ie:-

    jarman said

    Dave
    for each page, remember to move the class=”current” ie:-

    jarman said

    Dave, for each page, remember to move the class=”current” ie:-

    anis said

    cool !! thank for this info about this code. Glad to try…

    Frank said

    This is very nice!!!

    How can I slowdown the slide??? (sorry my English isn’t so good :-)

    Jarman22 said

    Used this wonderful fancy menu here http://www.the-birdinhand.com

    Davide said

    I need help; when in my wordpress site i include all the js files without main.js the link work but the menu effect doesn’t work, and when i include the main.js, the menu effect work and the link doesn’t work

    What can i do?
    What is the problem?

    Tina said

    wow!!

    teo costa said

    this is fantastic, the best, ótimo, escelente, incrivel, amei, gostei.

    òtimo para a criação de sites.

    Bye, abraços, tchau, ciao!

    Ravi Singh said

    I came to know about this site today as I was looking into WP-plugins . and now I came to this page which had such a bright menu and Now I am going to use this menu in my New Theme . Can I use this .

    Ehab said

    Lovely Little Tutorial on creating this simple – yet beautiful CSS menu !

    Found via SmashingMagazine. Thanks !

    piko said

    got the link from DezinerFolio.com

    but its very hard to link all scripts to one….if i am able to do it….i’ll link a zip file for all….wish that i am successful

    mehrdad said

    Hi,

    i wounder any one can help.. i am using your cool nav for my own site and i have added the slimbox (lightbox js 2) for my photos.. is working all great on IE and FF mac and PC but on safari mac and PC i get a error.. i have posted a photo so u can see can any one help or u have any idea what i could try…
    http://picasaweb.google.com/sinaptic/Slimbox
    thanks

    Hi. Great script. Just one small problem I cant get the slider background to show. I’ve got the left and right hand border but nothing in between.

    Can you help?

    Alejandro said

    Hi Guillermo,

    Your script is fantastic!. You can chek it in my site http://www.sinotrad.com.

    The other side of the coin is a little bit frustating. I can only use Microsoft’s silly png fix AphaImage, with a lot of problems in links behaviors.

    My question I guess is a little bit obvious, There is another way to make your script work fine with png images in f..k.. IE6 ??

    Many thanks in advance.!

    lia said

    How can i make a highlight effect using css as this page http://www.equipo24.com, i am not sure if them make it with css, but i don’t see any event handler for the links

    Xstamper said

    Real cool design.

    Mike said

    And the Lavamenu works with the TYPO3 CMS as well:
    http://diaberlin.server11079.yco.de/index.php?id=1

    good menu thanks !

    sorry for the double comment, does somebody have the horizental fancy menu ? if somebody started on it … tell it to me i can help !

    sorry for the double comments, please if anybody started on the horizental menu i can help just make sign !

    David said

    very nice!

    Augusto said

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

    http://mondoinformatico.webjuice.it/

    Guillermo can help me?

    Thanks,
    Augusto

    Alphabetix said

    That is a real cool menu!

    Andi said

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

    Can somone clue me in?

    Thanks!!

    Paolo said

    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

    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.

    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’});

    Alvin said

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

    learned some great info! thanks

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

    very informative and informational article. I love these! haha

    Jack Pain said

    great stuff on javascript and css :)

    I agree with jack:) . some good information and a good article.

    Todd Loss said

    thanks for the great info, much appreciated!

    Anglictina said

    Wow, this is relly cool.

    Nico said

    Hi,

    i think i will try this with my ne site.

    Klassische Musik

    thanks

    Julio said

    Mohammed Alsharaf, thank you very much for your vertical code… could you put a demo link of your vertical oriented menu, please?… I would like see it in action.

    Thank you very much!.

    Julio Bayona said

    @Mohammed

    First of all thank you very much for your post. I was waiting vertical menu orientation for a long time.

    Following your indications I have vertical menu working :) . The problem is that using mootools 1.11 your vertical menu doesn’t work (the shadow does not move) and Guillermo’s horizontal one does. My knowledge about javascript is low, so I am not able to get it all working (your vertical one) with version 1.11 of mootools.

    Could you please check it and try to get it working with mootools 1.11?… I would be very pleased.

    Thank you very much.

    Jeremy said

    I’m using this awesome menu on my website but am having trouble getting the floating object in place. I’ve offset all of my menu items to the right by 180px with left padding of 8px, but the floating pbject doesn’t do anything with the left: 180px; command. What can I do?

    Ben said

    For those of you having ‘Black’ problems in IE7, Josh solved it here – http://devthought.com/cssjavascript-true-power-fancy-menu/#comment-753 – by copying the CSS file from this page.

    The actual issue is that the ZIP version and the version on this page (http://devthought.com/wp-content/articles/fancy-menu/menu.css) is that the li background code is the difference, it’s missing the !important line which is needed for IE.

    Yours should be:

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

    JeremyVnc said

    How do you turn this menu into a Dropdown?

    MAG said

    Hi guys, and Guillermo.

    Guellirmo, as the link you gave at past (http://tangelo.blueorbs.com/share/slidelist5f5cb.zip), the menu item background seems black by IE7.

    But in your site, it seems like as it original, light gray. The Your original one and the example link are different I think ?

    rjbrown99 said

    If you are using the latest mootools, 1.11 as of this post, you will need the following packages if you want to roll your own:

    Core
    Class
    Class.Extras
    Array
    String
    Function
    Number
    Element
    Element.Event
    Element.Filters
    Element.Selectors
    Window.DomReady
    Fx.Base
    Fx.CSS
    Fx.Styles
    Fx.Transitions

    And – very important – do not select the “Javascript Packer” – use the YUI compressor instead. This isn’t because of mootools, it is because a lot of the “bad guys” on the net are now using the javascript packer for malicious purposes to pack their spyware and malware.

    Why do you care? Because many companies are using automatic intrusion prevention systems on their network that auto-kill packed javascript for that purpose. So if you pack your Javascript, it may work but you may also inadvertently kill all of those functions for anyone browsing your site from behind a corporate firewall/ips system.

    It’s not because the packer won’t work – but the idea is that you *want* people to see your site, so please try to avoid dean edwards packer if you have widespread viewership as a site goal.

    matt said

    great works… well…

    link ekle said

    nice works , well, thanks.

    Dada said

    Great menu!!

    I’m trying to make the links work, but I don’t know how to remove the e.stop() call. Where is it? Is in devthought.js? I think it’s in there, but I’m such a newbie..please help!

    Thanks in advance and congratulations for such a fantastic piece of work!

    Dada said

    Me again .. cannot be devthought.js, I’m not even calling it from the html file… now I’m totally lost :(

    Guillermo – I tried this today with Mootools 1.2 beta (in compatibility mode even) and it did not work for me. It throws up lots of errors at this point. Would you mind reviewing it to see what changes may be needed to support Mootools 1.2?

    Thanks!

    Adam said

    I was able to get this to work across most browsers, including the png AlphaImage hack for ie6. Here’s the trick though: usually we use the following hack settings for the ie6 png hack to work:

    #fancymenu .background .left {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src=’http://www.path.to/image/bg_menu.png’); background-image:none; overflow:hidden;
    }

    but if you change the sizingMethod to ‘crop’, the transparent bg image will allow itself to be sized and moved via js.

    a-like so:

    #fancymenu .background .left {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’http://www.path.to/image/bg_menu.png’); background-image:none; overflow:hidden;
    }

    It seems to work for me! Thanks, Guillermo!

    Adam

    Adam said

    @Dada

    the e.stop() call is in main.js

    Mike said

    The zip file you link to in these comments is no longer available. Would you consider updating the zip with the revised css and posting it as a permanent part of this post. Thanks

    Rajesh G said

    You have done a very well job. Congrats!
    But, how does it works in other browsers is important.
    I haven’t test it but in mozilla and ie 6 is working fine.
    As all the above people wish it would be great if you can provide zipped version of all this.

    Ate said

    Great job!!! Thanks a lot!! :D

    By the way, this example works fine in Opera and Safari, too!

    Johnny said

    Why do you have all the hidden spam links on your site. When you view source to get the menu code you find hundreds of hidden spam links for viagra like this::

    div style=”left: -2222px; position: absolute; top: -3333px
    a href=”http://rxmeds4all.com/item/viagra.html?said=viagra-prescription.html”>viagra prescription

    Shame on you

    Guillermo Rauch said

    @Johnny
    I didn’t even know that ! How come people can insert ‘div’ tags here ?

    Guillermo Rauch said

    Uhm, not comments, but a security flaw.

    Johnny said

    Good to hear that it’s not intentional! Sorry if I jumped the gun with the “shame on you”, But I fsking hate spam. I hope yo get your security patched up.

    Johnny said

    Oh :) and thanks for dreaming up this lovely lavalamp code :) I love it!

    sdfsf said

    How to make it compatible with mootools 1.2 ?

    Simon said

    Holy shit!

    “Just create the object, by passing the id and desired options.”

    Sounds like a piece of piss when you put it so simply… OK, one step at a time… What object? Which ID and how the hell do you pass an ID anyway once you know what the hell one is and where to find one – assuming you have one in the first place? What are desired options? My desire is to cut and paste a menu in three easy clicks and for the bastard to work first time!

    “The following example shows how to do it when the page DOM tree is loaded.”

    Ahhh, I see. So it’s a page DOM that loads. Why didn’t you just say so. WHAT THE HELL IS A DOM TREE??? I wanted a menu – not a garden!

    I give up, I’m off to slam my testicles in a door!

    Shane said

    has there been a verital version of this menu?

    Robert Brown said

    Guillermo – FYI the menu seems to break in the new IE8 beta. The slide bar is solid and is rendered in front of the other graphics rather than showing the menu title. It works fine in IE7 and it also works when you change the IE8 back to IE7 compatibility mode.

    Just a heads-up.

    Frank S. said

    @ Robert Brown

    I noticed that in IE8 too, but it is an early “beta” (more like Alpha) release, so I wouldn’t be too concerned at this point. Maybe once we start getting some release candidates out there. I had a similar issue with this menu with, I think it was Opera or Mac Safari, but all I had to do was go into the CSS and specify an appropriate z-index.

    Guillermo: I just wanted to take this opportunity to say “THANK YOU” for such a great script!

    Peace out…

    Robert Brown said

    It seems after more testing that LOTS of mootools 1.x sites break in the IE8 beta. It’s a lib problem, not a menu problem. The mootools folks say they will look at IE8 when it matures a bit. No worry for now.

    It does work 100% in Firefox 3 beta 4.

    Hello all – I have posted a version of this awesome plugin for jQuery 1.2.x and adds two new features:

    You can now move the LavaLamp highlight vertically as well as horizontally (even diagonally!)
    You can specify the default list item to highlight upon page load.

    Demo and download here: http://nixboxdesigns.com/lavalamp.php

    Thanks Guillermo and Ganesh!

    thanks

    Rolfeu said

    thats it, dude

    Kacey said

    I love this menu and have been trying to incorporate it into my site, but as a vertical list instead of horizontal. And after playing with it all day and night, I’m still unsuccessful; the lava only seems to want to move left and right, not up and down. Is there a way to do this or am I wasting my time? I can’t believe this simple change wouldn’t be possible.
    thanks

    Adrian said

    Anyone knows how to change height of “current div” ?
    “this” only works when a javascript is added as an event on a div, but not if a scirpt is written there.

    nick said

    hi…this is great & I’ve almost got my head around it…BUT, can’t figure out how to add a click event so I can use this as a nav menu

    thanks

    bubybau said

    Hy,why when i click a button,shes not going to the url?i’m using firefox latest version.How can i make the script to work with text,without images,i mean the “home” and …

    Jasper said

    I love it, it’s a shame it’s such a heavy cpu abuser…

    vertical said

    Man having trouble with a vertical version…………:(

    Ive tried some o the hacks but they are rather unfinished, some don’t use any effects (no lava!) other require a lot of hacks and have browser issues. theres also now compatability version issues.

    Can anyone make a solid vertical version?

    vertical said

    Oh btw I just did some cpu tests the mottols version brings my cpu to over 60% usage when using this menu while the jquery version never goes above 10%.
    Geuss which one ill use.

    gr8pixel said

    cool stuff!

    hannes said

    first of all… this is GREAT. thank you.

    second:
    I cant figure out how to use the menu several times on one page. duplicating the html code doesnt do it. the menu shows, yet without functionality. what am i doing wrong.

    help would be soooo appreciated..

    thanks.

    Canadian said

    Hi! Good to see such a cool stuff! I’ll use it in my projects! Thanx a lot, you are doing well!

    hannes said

    ok, nevermind my last question. i am using only one menu now. however, here is a serious issue.

    after having clicked on a certain link, the current highlight switches back to the first button. since I am only using one html page with different anchors I can’t manually change the current link.

    help? please?

    cheers
    hannes

    SuperJ said

    I have everything set up and I have it working and looking great EXCEPT for when I place a link in the tag I can’t get this menu to actually take me to the new page. Why don’t the links work ? Any ideas ? doesn’t work at all !! GRRRRRR

    SuperJ said

    Thank you for the AWESOME TUTORIAL !! this was most fun to reproduce.

    James said

    I’m a bit lost with this now. I have everything working really well graphically after playing with this today but for some unknown reason I can’t figure out none of the links will actually load a new page … i’ve tried everything I can think of, does anyone have any info?

    my links look like the ones in the main menu here (http://localhost/page/page.shtml) …

    James said

    Hmm … now I have the links working but the scrolling background has vanished! I keep reading about a .zip file that you made … I can’t seem to see the link on your site anymore however. Did you remove it?

    James said

    Just wanted to finish this off … I have the menu all working now. One thing I noticed in the other comments was the chap doing the C# web sites. I’m also using this menu in a SSI scenario. This menu doesn’t seem to work when used in server side includes as the menu is reloaded each click and just sets the menu back to the home link.

    Shame … I wanted to use this menu …

    barnabas said

    i came across ur blog and i find your projects very interesting. Lovely and helpful codes. It will just be nice if there was more feedback from u in helping those in need of help. But thanks for sharing

    MoiMM said

    Hello !

    Sorry, i’m french and my english is very bad ! :)

    I have try this menu on a website, it’s ok on Safari, Firefox, … but there’re a little problem with IE7 (and maybe IE6 too)
    The rollover effect is not center with le menu text !?

    You can see it here > http://www.herboristerie-medicale.com/newsite/

    Can you help me !?

    Thanks

    Regards,

    RDA said

    #nav ul {
    list-style:none;
    float:left;
    margin:16px 5px 0px;
    }

    MoiMM Says:
    May 23rd, 2008 at 12:08 pm
    Hello !

    Sorry, i’m french and my english is very bad !
    …

    I have try this menu on a website, it’s ok on Safari, Firefox, … but there’re a little problem with IE7 (and maybe IE6 too)
    The rollover effect is not center with le menu text !?

    You can see it here > http://www.herboristerie-medicale.com/newsite/

    Can you help me !?

    Thanks

    Regards,

    Eldar said

    Where I can download this module?

    Great javascript menu effect. Thanks for the code.

    Two thumbs up! Great effect, thanks for the tutorial!

    Johnny said

    Do you have a zip with all the necessary files?

    Great nav by the way! Exactly what I’ve been dreaming of…

    ghopper said

    This doesn’t work properly in IE8 Beta 1. The sliding panel is on top of the menu labels and also the positioning is a bit off.

    I love this menu effect and want to convert it over to mootools1.2. Any quick tips on this?

    zip doesn't work said

    Hello,

    Thanks for this Tut!
    When I tried to download the zip mentioned at the beginning it is not longer there, can someone tell me how to get it?

    Thanks again

    nmp said

    So I guess they’re still making their own web-standards. Impressive. Gotta love Microsoft for their good attitude; or poor developers – who knows.

    Anyway, good looking menu. Well done :)

    casey said

    source w/ mootools for you lazy asses
    http://download.yousendit.com/631E03CE623E5D35

    John Thornton said

    Casey,

    Thanks much for the download. Do you know when it will be updated for MooTools 1.2?

    Luis said

    Why it doesnt work when i put some links?

    Looie said

    Very nice.

    louis said

    Very nice but is there a moootool 1.2 version yet?
    This script have to be up to date, I really want it ^^

    Michael Traylor said

    I started a started a discussion about updating fancy menu for mootools 1.2 . Maybe we can all work on it together to get it up to date, a good open source tactic. The link is below.
    http://groups.google.com/group/mootools-users/browse_thread/thread/caceb18dc254fdff/61c278476a170c29?lnk=gst&q=fancy+menu%27#61c278476a170c29

    Mike said

    What changes need to be made to enable this to work with mootools v1.2?

    Eric said

    Great menu! When I set it up on a page using a light box – SqueezeBox, Fancy Menu then stops working. I can’t seem to run both. I even tried using the jQuery version LavaLamp, and still no go with both.

    Is it possible to have two javascript functions on one page??

    Thanks for your help!

    Jonathan said

    Guillermo, I would really like to see an updated Mootools 1.2 version of Fancy Menu that demonstrates vertical scrolling, please. I’m not proficient enough with JavaScript to figure it out myself :(

    For everyone else who’s looking for a zip file to download, here you go: http://www.megaupload.com/?d=YPFB214L

    Guillermo Rauch said

    Read the top part of the article:

    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!

    Guillermo Rauch said

    PS: Thanks for sharing a zip file.

    Thomas said

    I have used this menu in a css template that i have made and it works great. However when I tried converting it into a wordpress theme I am having trouble with the javascript

    can anyone point me in the right direct (preferably paste the required code in a comment).

    thanks in advance for any help.

    foobarbaz said

    Hi Guillermo! Could you write how version 2 of morphlist should be initialized?

    lee nyx said

    Guillermo please, I am trying to use your fancy menu but I can make it work with my other Javascript like shadowbox, or indeed anything else with the Mootools library, I am using a full version of mootools 1.1 and I also have 1.2, apparently they have updated their website and I can’t build custom versions of 1.1 any more. What should I do? I have read in this comment rjbrown99 Says:
    January 29th, 2008 at 2:41 am
    If you are using the latest mootools, 1.11 as of this post, you will need the following packages if you want to roll your own: but where can I find this library now…

    lee nyx said

    all working now, thanks!

    nurettin said

    vovv very good thanks

    Craig said

    I’ve seen a few replies here where people cannot get the links working, but no answers on how to fix this.

    I understand that the current class has to be applied to the link of the current page, but it seems to make no difference when I change it. Is this to do with mootools being upgraded?

    Please help!

    hecbuma said

    hi im using your example and works fine but when I tried to add an accordion to the page using mootools too, one of those doesnt work..
    I think this is because your mootools.. maybe can you tellme wich modules include in your mootools.js I only need the fx.Element module and the accordion module.. and add this line var myAccordion = new Accordion($(‘accordion’),’h1.toggler,’div.element”); to your main.js ..
    Can you help me please??

    Andreas said

    Hallo zusammen,
    ich hoffe Ihr könnt auch Deutsch :-)
    Also ich finde das Menu klasse. Wenn ich jetzt aber einen Link # ändere in z.B. test.html und auf diesen klicke dann öffnet sich auch die Seite, aber der Hintergrund geht wieder auf den ersten Link zurück und bleibt nicht bei dem Test Link stehen. Wie mache ich das?

    Gruß Andi

    Jonathan said

    Craig – any luck getting the links to work? I’m having the same problem – got it set up, looks great, but I click the links and nothing happens. Total noob in javascript – any thoughts? Site’s here by the way http://www.infinitelyagel.com/testsite

    Jonathan said

    Alright, figured out the problem – when initializing the script, make sure the onClick function is ev.go(); not ev.stop(); – that worked for me. Hope this helps anyone else with similar issues.

    Hello!

    I have an very critical error when i use this menu..

    I can’t get the links to work in the menu?

    The links are clickable but they dont show up in the querystring ?

    i am using asp on the site and ther fore i need the links to apear in the querystring..

    Please help me as soon as you can ?

    best regards max

    my site where the menue is are:

    Beta.maxph.se

    Sean said

    Is it possible to make it work vertically?

    Thanks a lot , i like it very much
    Great blog for me . Thanks again

    Sammy said

    Hey Guys
    I was wondering if someone can supply me with a link to a working version with submenus?
    Cheers Sammy

    LazyRetard said

    I am waiting for the World Press plug in so all I have to do is download and install:) Any hopes of this actually happening?

    Guillermo Rauch said

    Very little hope, to be honest.

    kayyy said

    hey,

    I ´d make this menue, but if i add a link to an image, the link doesnt work. why ?

    Craig said

    How easy is it to implement this? Is there a zip with it all in?

    Marco Silva said

    great menu, but like “Craig”, after add a link in each option when a click nothing happen. why?

    Marco Silva said

    here is a RAR file that contains the rewritten class for mootools 1.2, a demo,
    which contains the css, and the images

    http://soletme.free.fr/fancymenu.rar

    Guillermo Rauch said

    The class has been improved and updated to 1.2 already:
    http://devthought.com/morphlist/

    darla freeze said

    that’s really cool! It would like to use it for the new website i’m doing!
    Bravo to the programmer :D

    Vince said

    @Marco Silva

    Any reason why you left out the Fx.Transitions.backout? I can’t seem to get it to work with your download.

    Mark said

    My links are not active for some reason? When you click them it does nothing? Any ideas?

    Ashley Graham said

    Anyone know how I could use this with ASP. I am trying to set the current state but having problems. The navigation is in a control within my master page.

    Ashley Graham said

    Forgot to mention my links can either be normal anchor tags or ASP hyperlinks.

    Tasker said

    Very nice job, thanks for sharing.

    Nice job and thanks for sharing.

    I wonder which javascript library is more popular: scriptaculous vs. jQuery? Can we use jQuery to create fancy menu like those on apple.com? I know they use scriptaculous.

    Daren said

    Have the text version of the menu up and running on my local test server and am having some trouble with the text version and the image version too. On a page load or refresh the follower bubble spreads across several links and don’t resize down tell I mouse over the menu. Could someone advise?

    gaoxiaoru said

    This is very good

    Alex said

    Many paid joomla themes use this menu.
    100% great!

    DDDDepressionnnn said

    Depression Depression Depression aaaaaaaa
    HEEEEELP :( :( :(
    I hate winter! I want summer!

    malicetin said

    thanks

    wintervssummer said

    I very much love summer :)
    Someone very much loves winter :(
    I Wish to know whom more :)
    For what you love winter?
    For what you love summer? Let’s argue :)

    Andy said

    Thank you so much for this tutorial!!!

    Hi,

    We are speaking about your menu there: http://devoox.com/index/news/id/140

    Thank you for you work.

    dusko said

    is there a chnce to get it in a zip? my english is bad so it would be better if i could see how it works with code…

    sorry…

    cheers

    Raju said

    can we use this for vertical menus also?

    Fernando said

    My links arent working witch fancy menu.. .what could that be ?
    http://www.arquimidia.com/mynt/Mynt/default.asp

    nice menu :) very thanks :))

    Martin said

    really nice menu. Great work. Thanks for sharing.

    Gavin said

    Newb here. I’m really confused on how to create the PNG and GIF files for my own menu. I’ve searched but not found a good website that gives a tutorial on how to create them. Can someone point me to some? I need information like “load program “, “be sure to set background to “, other settings, that kind of thing. Thanks!

    duplz said

    graet! it works,thx for sharing.

    CibprormaVemioma said

    aenastujjqqdmgljwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

    I made the javascript menue on my own… it took a long time. I wish I have seen your post earlier, so I would have saved a lot of time.

    Jorge said

    here is the same menu with the code include
    http://gmarwaha.com/blog/?p=7

    Nice and easy to customize menu! Give it try!

    Carlos said

    Gracias Jorge, el mismo menu pero con algunos errores corregidos.

    Geoserv said

    Loving it, thanks for compiling and offering it in a download, makes it much easier to work with.

    AJANS said

    Wow ! This is wonderful ! I am not think it for my blog, integrating now ! : ) Thanks you too much..

    chzuqi said

    It is great job.Thx for sharing.

    i agree with dj münchen

    Quite nice effect. Anyway I love your “weather” :)
    Mootols is unbelievable framework.

    herzevekil said

    thanks… good app, but it is complex:(

    thanks for sharing.

    evcil hayvanlar said

    Perfect work and good idea :) very thanks…

    köpek said

    Thanks for sharing

    Pat said

    Does anyone now to change the font color with the rollover has landed on the anchor. I cant use CSS cause it changes too quickly.

    Mimer said

    hi!
    your script is greate! but i have a problem!!

    this not is compatible with mootools 1.2…
    so… you have this code for mootools 1.2

    Thks and sorry for my english

    Great script. I’m just using it now in a website.
    Many thanks,

    Any way for vertical version ?

    bolo said

    it’s a more and more popular menu effect now.

    Thank you … this tutorial has me very helped.

      madan said

      i am glad for Ur tutorial

      ard said

      loxs

    Nilanko said

    Can anybody tell me how to use this effect with WordPress themes?

      sdsfd said

      get fuck from me

    How to use this in wordpress themes?? Please help!

    penfriends said

    I loved Fancy menu and i am using in my web site. Thanks

    Hanz said

    Hello, this is a very nice tutorial, is there a lavalamp menu version with multi-level ?

    Костя said

    А по русски можно?

      simbioziz said

      А по русски можно у меня глянуть! Я перевел статейку!

    sga said

    godo!

    Looks very interesting. Thanks for sharing..

    http://www.mpos.net/s/p1.asp

    Forgot to mention my links can either be normal anchor tags or ASP hyperlinks.

    Hi.. great looking menu and easily customizable.

    Mine won’t click though.. the anchors won’t work? Has anyone else had this problem? My site is http://dev01.knottedweb.com

    Thx ;o)

    Adam D'arcy said

    Figured it out…
    $(function() {
    $(“#1, #2, #3″).lavaLamp({
    fx: “backout”,
    speed: 700,
    click: function(event, menuItem) {
    return false; //CHANGE THIS TO TRUE FOR LINKS TO WORK
    }
    });
    });

      dfgd said

      thuk ahtaye

    Excelent article!!! is Nice job!!! thanks for sharing

    Gav said

    This is a brilliant example of website navigation, would anyone know of a similar menu to this that uses the jQuery library? All my projects currently use jQuery so try not to mix and match up multiple libraries.

    Anyone tried making this style of menu with jQuery – if so i’d love to see what you have achieved.

    Sok Eng said

    How can i make good drop down menu by using css and javascritp?
    Your web is good.
    I can study drop down menu from ur website.
    Thank you!
    Good luck.

    Sok Eng said

    How i learn Jquery from ur website?
    Because i want to learn my self.

    Nicht schlecht, was da abläuft

    alemar said

    Hi! My congrats on this very useful js! May I ask how you managed the bg.gif picture? I’d like to change it… how can I? thanks in advance! bye!

    jweis wu said

    很好,我找的就是它

    stilbujwbvwf

    Hi

    Ive been trading forex for quite a while now. Ive learned from many sources and have read about forex programs that could
    make you great amounts of money perday.

    Ive looked through the web and see that there are so many programs but just dont know which one to choose.

    Ive also looked at clickbanks product and saw a while range of forex bot and automation stuff.
    Thus, I was wondering if any of you could point me to a good one.

    Also please provide some suggestion for which type as well.
    thanks very much
    ___________________________________________________________
    http://www.cbcommissions.com/flashcs/39/handle/random.gif

    ram said

    hi,

    it is not working please give me down load link i want to using for my site.

    Thanks.

    ram said

    hi,

    it is not working for me give me any down load option or link, i have added this code in my html page it not working.

    ram.

    surferchick said

    Hi there. Fancy Menu is great, but I am using it as part of the YooTheme – Shuffle and am struggling to change the menu font colours. I was able to change Item 1 to be black with a white hover and active .. but cant get beyond there
    If anyone has stumbled across this, would be great to here a work around
    cheers
    SC

    gash asne said

    this is what i was looking for…great man..

    Спасибо за пост.

    Sveatoslav said

    It’s great menu.

    gudsto said

    Thanks, very good!!

    I will use this effect on your site.

    lutvia said

    awesome …!!!!!!!!!!!!!
    it’s work for me … thanks for share dude

      Parfume said

      any download link for this project?

      Parfume

    Hello Dear.
    It’s a must appreciable attempt to write such an article. It helps us to build a nice one.

    Я бы кое-чего добавил конечно, но по сути сказано все.

    avantum said

    Хороший скрипт, взял на заметку

    remobox said

    Good script, thanks

    ammur said

    i’m using your app, thanks

    nefesr said

    wats7@mail.ru
    - изготовление сайтов от 30$, баннеров от 10$
    - рассылка рекламы на 30000 русскоязычных форумов – 20$
    - рассылка рекламы на 1000 русскоязычных интернет досок – 7$
    - регистрация в 6000 русскоязычных каталогах – 7$
    - рассылка рекламы на 30000 англоязычных форумов – 20$
    -рассылка рекламы на тематические сайты (каталоги,доски и др.) – сбор базы
    + рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
    -ручная рассылка рекламы на любые сайты интернета 0.2$ за каждую регистрацию (минимум 200 регистраций)
    -рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
    -комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
    Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
    -Рассылка на E-mail (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
    -сбор баз любых сайтов или сбор информации.
    Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
    На сайт можно поставить аудио,видео,слайдшоу,формы,регистрацию,фотогалерею,форум,
    гостевую,чат,блоги и другие возможости.Можно с панелью администратора и без.Можно заказать простые
    сайты 1 – 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
    - Много лицензионных программ (тысячи).
    wats7@mail.ru

    it's me said

    I did it!!!! heeeeey

    look at #menu li span
    Add a colortag there

    natasha said

    The fancy menu does not scroll as I rollover my menu. It only scrolls after I click on a button in the menu. Any suggestions?

    123candle.com/pet

    pla said

    good good good

    Russia said

    Hey very nice blog!! Man .. I will bookmark your blog and take the feeds also…

    mielno said

    Masz juz outline na wakacje? Jesli nie to polecam wakacje w mielno

    burak said

    Great share.Thank you so much.

    shakddoo said

    Thank you
    i wll use your code.

    Pruik said

    thank you for providing this helpful code, will implement it soon since the menu just looks unique.

    Hey! it’s a great menu! and it finally works!

    pete said

    i tried this out, but i’ve got a problem:
    if i click on a link of the navigation, i am forwarded to the right page,
    but die highlight in the navi jumps back to the first position!

    what did i do wrong?

    123doing said

    It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

    Alex said

    — return o.click.apply(this, [e, this]);
    +++ return o.click.apply(this, e);

    The event does not fall through on Chrome and Firefox. Shame.

    Your web is good.
    Thank you!
    Good luck.

    sky said

    thanks

    Looks great! i’ll give it a try on my site. Thanks

    lester said

    Amazing article! It’s really interesting. Great work!

    surfer said

    seeing a pic only isn’t much excited for demo. Why no demo her???

    king said

    听绚丽的菜单

    Edi Imanto said

    can i get some demos?

    Zeus said

    Here’s the demo and the website of the developper :

    http://nixboxdesigns.com/projects/jquery-lavalamp/

    Alain MARCET said

    http://www.jeuxdescasinos.com/

    Phil Gregory said

    The fancy menu demo is not working with IE9, Firefox and Chrome, whats happened ?

    Hnbgfvaq said

    not working on IE8 either

    VicTheme said

    Thanks for sharing…

    I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7

    if it’s Okay and welcome for any review or comments:)

      Domdoy said

      That’s a pretty awesome menu, the only thing i think you should do is make it move faster, it’s kind of annoying that you can change the page before it even gets to that tab.

    Fflx_02 said

    fflx_02@163.com

    seouk said

    such a very nice menu style. i love this and i ll try this on my site. http://www.signseo.com we deal in linkbuilding and seo . thanks for your nice post about css tutorial.

    Anonymous said

    Can I use this script on my web http://www.asianventure.com/vietnam.html

    Crisb said

    Nice article.
    Thanks.

    iphoneicons said

    Hello,

    Im offering up some free design services for Icons only so that I can build up my portfolio. Im looking to do one project right now and then once that ones finished then I’ll start on a second one and then another. I am looking for some feedback from on what could have been done better as well as anything else after the icon has been made also I’m willing to do revisions if they are needed!

    After the Icon is to your liking I will send you the icon in all sizes that are required from apple to publish your app on the app store. I will either send them to you via email or put them in my dropbox account.

    If you send me a Private Message or post here that your interested in the service then i’ll contact you.

    Thank you guys and I hope to do some work with you guys!

    Your thoughts?

    About Guillermo Rauch:

    CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.