CSS+Javascript power. Fancy menu

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

Let me introduce you to Fancy Menu:

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

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

Introduction

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

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

Mark it up

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

Click here to see HTML code

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

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

The CSS styling

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

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

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

Then, this is the code we have so far:

Click here to see CSS code

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

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

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

Click here to see CSS code

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

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

The moving background

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

Its markup would be the following:

Click here to see HTML code

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

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

Click here to see CSS code

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

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

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

PNG and GIF comparison

Scripting it

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

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

Click here to see Javascript code

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

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

Click here to see Javascript code

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

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

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

Extend it

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

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

Fill in your name:

Select a picture:

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

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

  1. Haitham, on March 15th, 2007 at 10:55 pm 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!!

  2. simonjs, on March 16th, 2007 at 6:03 am 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!

  3. eeels, on March 16th, 2007 at 7:19 am Said:

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

  4. aNieto2K | Fancy Menu con MooTools, on March 16th, 2007 at 9:53 am Said:

    [...] Fancy Menu es una librería javascript que te permitirá realizar un curioso menú reforzado con MooTools. # « Frase #54 [...]

  5. Guillermo Rauch, on March 16th, 2007 at 11:45 am Said:

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

    @simonjs, @eeels
    Glad you like it

  6. Rob, on March 16th, 2007 at 11:53 am 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

  7. Leonardo... from Colombia, on March 16th, 2007 at 12:04 pm Said:

    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!

  8. Mark, on March 16th, 2007 at 1:19 pm 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.

  9. xocea » This Week In: IT & Design, on March 16th, 2007 at 1:46 pm Said:

    [...] CSS+Javascript power. Fancy menu [...]

  10. WiCk3D, on March 16th, 2007 at 3:12 pm Said:

    What about a vertical menu???

  11. Whiteboard, on March 16th, 2007 at 3:13 pm 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

  12. toykilla, on March 16th, 2007 at 3:13 pm Said:

    Any way to incorporate a drop down with this?

  13. The Web Design Blog, on March 16th, 2007 at 3:18 pm Said:

    [...] something I found on digg today, a quick tutorial for a nice javascript/css menu. Link « Total Validator [...]

  14. dakine, on March 16th, 2007 at 3:32 pm Said:

    I like the menu…a zip will be nice.

  15. Guillermo Rauch, on March 16th, 2007 at 3:38 pm 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.

  16. goggleBOX, on March 16th, 2007 at 3:50 pm 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.

  17. Adam, on March 16th, 2007 at 4:09 pm Said:

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

  18. Mike, on March 16th, 2007 at 4:35 pm Said:

    Thanks, very interesting….

  19. Jenny, on March 16th, 2007 at 5:59 pm Said:

    I love this site

  20. CSS+Javascript power. Fancy menu « News Coctail, on March 16th, 2007 at 11:31 pm Said:

    [...] power. Fancy menu Filed under: Uncategorized — recar @ 7:30 am CSS+Javascript power. Fancy menu When it comes to creating the navigation part of your Website, the first thing you might think of [...]

  21. Dave Q, on March 17th, 2007 at 12:58 am Said:

    WOW!

  22. CSS+Javascript power. Fancy menu. « //burnz.blog, on March 17th, 2007 at 1:32 am Said:

    [...] Source [...]

  23. » Savaitgalio skaitiniai #18 Archyvas » Pixel.lt, on March 17th, 2007 at 2:31 am Said:

    [...] pas mus įkėlinėti per rss. El. paštas info@pixel.lt) (The Only) Ten Things To Know About CSS CSS+Javascript power. Fancy menu Tableless [...]

  24. Faire un menu en CSS avec du javacript qui a de la gueule, on March 17th, 2007 at 4:58 am Said:

    [...] un tutorial très détaillé qui présente une méthode pour faire un menu animé très sympa avec une petite [...]

  25. pligg.com, on March 17th, 2007 at 7:02 am Said:

    CSS+Javascript power. Fancy menu…

    CSS guide for good fancy menu :D…

  26. Donnerschlag, on March 17th, 2007 at 7:42 am Said:

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

    http://pupius.co.uk/

  27. CSS+Javascript power. Fancy menu » Prateek, on March 17th, 2007 at 7:51 am Said:

    [...] read more | digg story [...]

  28. Linky na víkend 52 na depi.sk - IT & Life Weblog, on March 17th, 2007 at 9:51 am Said:

    [...] CSS+Javascript power. Fancy menu РFantastick̩ menu pomocou CSS+Javascriptu [...]

  29. John, on March 17th, 2007 at 10:06 am 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.

  30. Matt, on March 17th, 2007 at 11:42 am 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!!!!!

  31. Fatih HayrioÄŸlu’nun not defteri » 18 Mart 2007 Web’den seçme haberler, on March 17th, 2007 at 2:22 pm Said:

    [...] Javascript ve CSS’in gücünü görmek isteyenlere güzel bir örnek. Link [...]

  32. levent veysi, on March 17th, 2007 at 2:48 pm Said:

    that is nice,
    fantastic.
    what do you that?

  33. levent veysi, on March 17th, 2007 at 2:48 pm Said:

    iyimiÅŸ tebrikler

  34. links for 2007-03-17 « toonz, on March 17th, 2007 at 3:22 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript menu navigation mootools) [...]

  35. its about time» Blog Archive » links for 2007-03-17, on March 17th, 2007 at 3:33 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu pretty!! (tags: css javascript webdesign menu navigation mootools web design) [...]

  36. Tudor Hulubei, on March 17th, 2007 at 4:07 pm Said:

    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?

  37. Guillermo Rauch, on March 17th, 2007 at 4:17 pm 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.

  38. Guillermo Rauch, on March 17th, 2007 at 4:19 pm Said:

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

  39. AS, on March 17th, 2007 at 10:10 pm Said:

    I am looking forward to the text based example!

  40. Candes Blog - Creative Specialist & Web Consultant » CSS+Javascript power. Fancy menu, on March 17th, 2007 at 11:02 pm Said:

    [...] to impress your friends, while keeping it accessible and unbelievably lightweight? Try this scriptread more | digg [...]

  41. midorigin, on March 17th, 2007 at 11:26 pm 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?

  42. Guillermo Rauch, on March 17th, 2007 at 11:36 pm 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.

  43. Tudor Hulubei, on March 17th, 2007 at 11:47 pm Said:

    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!

  44. Guillermo Rauch, on March 18th, 2007 at 12:00 am 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.

  45. Tudor Hulubei, on March 18th, 2007 at 12:10 am Said:

    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.

  46. Mex_89, on March 18th, 2007 at 1:37 am Said:

    Grande guille. Donde aprendiste?

  47. Egypt Urnash, on March 18th, 2007 at 3:36 am Said:

    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.

  48. GochaBookMarkClips, on March 18th, 2007 at 4:59 am Said:

    Re: Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu…

    Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menuCSSとJavaScriptだけでなめらかな動きをする横メニュー…

  49. Ronak Bhagdev, on March 18th, 2007 at 12:15 pm Said:

    perfect, man!!!

  50. Jonic, on March 18th, 2007 at 12:59 pm Said:

    You. Are. A. Genius.

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

  51. Guillermo Rauch, on March 18th, 2007 at 1:03 pm 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?

  52. Nader, on March 18th, 2007 at 3:17 pm Said:

    This should be in Mootools Gallery…TAGGED!!

  53. CSS + Javascript, Fancy menu | Pandibia, on March 19th, 2007 at 1:05 am Said:

    [...] Devthought publican un artículo de como implementar un bonito menú de navegación hecho con CSS y que sale [...]

  54. Chris C, on March 19th, 2007 at 6:21 am 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?

  55. cabezadeturco, on March 19th, 2007 at 6:33 am Said:

    very fancy menu…

    thanks!!

  56. Coole Navigation mit CSS und JS, on March 19th, 2007 at 7:48 am Said:

    [...] Es ist ja schon immer wieder erstaunlich was man mit ein paar Zeilen Code CSS und Javascript so alles hinkriegt. Der 16-jährige Webentwickler Guillermo Rauch macht es mit einer coolen Navigation vor: Fany Menu [...]

  57. Kim Schulz, on March 19th, 2007 at 8:42 am 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.

  58. Owen, on March 19th, 2007 at 9:13 am Said:

    Cute menu.

  59. Switch-Case / Blog Archive / Links for 3/19/07 [my NetNewsWire tabs], on March 19th, 2007 at 9:55 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu [...]

  60. Un bel menu e qualche trucco css + jscipr correlati - Tutti Per Uno - Forum, on March 19th, 2007 at 11:34 am Said:

    [...] bel menu e qualche trucco css + jscipr correlati http://devthought.com/cssjavascript-…y-menu/#more-5 __________________ "Il tempo e i fatti stanno già distribuendo ragioni e [...]

  61. Luiz Júnior Fernandes, on March 19th, 2007 at 12:08 pm Said:

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

  62. Guillermo Rauch, on March 19th, 2007 at 12:57 pm 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.

  63. omar, on March 19th, 2007 at 1:15 pm Said:

    Does the menu work on safari or mac ie?

  64. Guillermo Rauch, on March 19th, 2007 at 1:19 pm Said:

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

  65. davidbisset.com » CSS+Javascript “Bubble” Menu, on March 19th, 2007 at 1:21 pm Said:

    [...] An effect that will make people think it’s flash. [...]

  66. Fancy Menu: CSS and JS fun « outaTiME, on March 19th, 2007 at 1:30 pm Said:

    [...] Menu: CSS and JS fun 19 03 2007 Guillermo Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on [...]

  67. Top 16 Programming Diggs for Previous 30 Days - Intelligentedu.com Free Computer Training Blogs, on March 19th, 2007 at 4:03 pm Said:

    [...] About CSS a one-page tutorial that demystifies the cryptic and cranky rules of CSS. 90 commentsCSS+Javascript power. Fancy menu When it comes to creating the navigation part of your Website, the first thing you might think of [...]

  68. Chirag, on March 19th, 2007 at 5:18 pm 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… :)

  69. Guillermo Rauch, on March 19th, 2007 at 5:20 pm 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.

  70. celsius, on March 19th, 2007 at 6:47 pm Said:

    nicely done!

  71. AjaxNedir » Blog Archive » CSS+Javascript’in gücü. Fancy menu, on March 19th, 2007 at 6:59 pm Said:

    [...] Demo : http://devthought.com/cssjavascript-true-power-fancy-menu/ [...]

  72. Nick, on March 19th, 2007 at 7:09 pm 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).

  73. Guillermo Rauch, on March 19th, 2007 at 7:13 pm 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 ;)

  74. Nick, on March 19th, 2007 at 8:32 pm 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.. :)

  75. Nick, on March 19th, 2007 at 8:36 pm Said:

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

  76. Guillermo Rauch, on March 19th, 2007 at 8:40 pm Said:

    Check that this exists and can be accessed:

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

  77. Nick, on March 19th, 2007 at 8:54 pm 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…

  78. Guillermo Rauch, on March 19th, 2007 at 9:54 pm 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” ;).

  79. gosciu, on March 19th, 2007 at 9:59 pm 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 ;)

  80. Guillermo Rauch, on March 19th, 2007 at 10:02 pm 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

  81. Szymon Pilkowski, on March 19th, 2007 at 10:18 pm Said:

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

  82. Guillermo Rauch, on March 19th, 2007 at 10:19 pm 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.

  83. All in a days work…, on March 19th, 2007 at 11:11 pm Said:

    [...] CSS+Javascript power. Fancy menu has a ‘bubble’ for hover over highlighting of tab selections (tags: Navigation) [...]

  84. adkdev’s blog » Blog Archive » Fancy Menu: CSS and JS fun, on March 19th, 2007 at 11:44 pm Said:

    [...] 16 ปี จาก Argentina ได้เขียน fancy menu โดยใช้ CSS และ JavaScript โดยมี mootools [...]

  85. Filter for 20/3 2007 - Felt, on March 20th, 2007 at 3:31 am Said:

    [...] Devthought: CSS+Javascript power. Fancy menu Nice navigation using Mootols, with horisontal animation. [...]

  86. Webdigity webmaster forum, on March 20th, 2007 at 4:31 am Said:

    Fancy menu with Mootools…

    Just found a very nice menu which created with Mootools,…

  87. Päivän linkit 20.03.2007 | Satunnainen Björklund, on March 20th, 2007 at 7:20 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Nätti. tagit: [...]

  88. links for 2007-03-20 | Bill2me dot Com, on March 20th, 2007 at 7:21 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu This is a pretty impressive JavaScript / CSS menu that I’d like to return to later. (tags: JavaScript) [...]

  89. michi-r.ch // weblog ohne ziel und zweck » Wozu eigentlich noch Flash?, on March 20th, 2007 at 7:32 am Said:

    [...] weiteres cooles Beispiel, was sich mit JS-Bibliotheken wie Mootools, jQuery und Prototype so alles machen [...]

  90. CSS+Javascript power. Fancy menu » Webdesign Archive, on March 20th, 2007 at 7:55 am Said:

    [...] How to create a custom navigation bar with some cute Javascript effects that will certainly impress your friends. [go] [...]

  91. links for 2007-03-20 » mhinze.com, on March 20th, 2007 at 8:21 am Said:

    [...] CSS+Javascript power. Fancy menu hot (tags: css Javascript menu) [...]

  92. Nick, on March 20th, 2007 at 11:46 am 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!

  93. imagesafari blog » Blog Archive » CSS+Javascript power. Fancy menu, on March 20th, 2007 at 2:01 pm Said:

    [...] Link [...]

  94. michael, on March 20th, 2007 at 3:01 pm 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

  95. Fancy Menu: CSS and JS fun at 3motions.net, on March 20th, 2007 at 3:42 pm Said:

    [...] Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on [...]

  96. Easy Webbers | Webmasters Blog » Blog Archive » Speedlinking Week 12 (2007), on March 20th, 2007 at 4:38 pm Said:

    [...] CSS + JavaScript creates a fancy menu tutorial. [...]

  97. Viktor Kelemen, on March 20th, 2007 at 4:38 pm Said:

    Nice, but it makes my firefox really slow…

  98. house-of-wonder.com » Blog Archive » Javascript menu, on March 20th, 2007 at 5:05 pm Said:

    [...] This menu looks cool. Don’t have a use for it right now, but you never know! [...]

  99. Bitperbit » Lo mejor de CSS, on March 20th, 2007 at 8:52 pm Said:

    [...] a la programación Web. En lo particular, lo que más me gustó de esta entrega es un menú con CSS + JavaScript que es increíblemente liviano y muy [...]

  100. 煎蛋 » 本月 CSS 小甜点, on March 20th, 2007 at 11:08 pm Said:

    [...] 以 CSS+Javascript 为基础的强大的华丽的导航菜单 [...]

  101. Ramon Bispo, on March 20th, 2007 at 11:08 pm Said:

    Beautiful!

  102. my so-called blog » links for 2007-03-21, on March 20th, 2007 at 11:25 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu 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 c (tags: design css Javascript webdesign navigation menu mootools moo.fx) similar nonsense in: ill.icio.us |     No Comments » [...]

  103. Ryan Gene, on March 20th, 2007 at 11:52 pm Said:

    that’s amazing!!

  104. vickeybird, on March 21st, 2007 at 2:09 am Said:

    Wow! Very cool indeed.

  105. 八强网, on March 21st, 2007 at 2:55 am Said:

    好东西,真是不简单啊.

  106. CSS+Javascript power. Fancy menu « Know things, on March 21st, 2007 at 5:33 am Said:

    [...] read more | digg story [...]

  107. Yasir, on March 21st, 2007 at 8:12 am 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

  108. CONNECTDEALS » CSS+Javascript = Fancy menu, on March 21st, 2007 at 8:53 am Said:

    [...] démo et le code source sont disponibles ici (en [...]

  109. David Bloomfield’s Blog » Blog Archive » CSS creme of the month, on March 21st, 2007 at 8:59 am Said:

    [...] is a nice little post over at roScripts I found via digg. It links to some good resources such as fancy css navigation, 10 things to know about CSS and CSS Fly which lets you edit your CSS on the, erm, [...]

  110. Blog do Isra » O que anda rolando no mundo do CSS, on March 21st, 2007 at 10:11 am Said:

    [...] CSS+Javascript power. Fancy menu [...]

  111. lichi, on March 21st, 2007 at 10:56 am Said:

    awesome!!!

  112. Paul, on March 21st, 2007 at 11:36 am 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

  113. RUDEWORKS » Archivo » Alimenta tu mootools, on March 21st, 2007 at 11:53 am Said:

    [...] han preferido inventarse un menú propio, con muy buenos [...]

  114. heath’s Daemon Castle » Blog Archive » links for 2007-03-21, on March 21st, 2007 at 12:22 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript webdesign) [...]

  115. links for 2007-03-21 « 做足壹佰, on March 21st, 2007 at 12:27 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu CSS滑动菜单 (tags: css javascript menu) [...]

  116. Carlos Eduardo, on March 21st, 2007 at 12:55 pm Said:

    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!

  117. Key, on March 21st, 2007 at 12:59 pm 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…

  118. Cool JS Slider Menu at noisylime, on March 21st, 2007 at 4:11 pm Said:

    [...] http://devthought.com/ [...]

  119. kerwin, on March 21st, 2007 at 4:15 pm 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!

  120. Guillermo Rauch, on March 21st, 2007 at 4:17 pm 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.

  121. casey, on March 21st, 2007 at 5:01 pm Said:

    @Kim Schultz

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

    Thanks,
    Casey

  122. Kim Schulz, on March 21st, 2007 at 5:23 pm 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

  123. links for 2007-03-21 « toonz, on March 21st, 2007 at 8:32 pm Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript menu navigation design Good) [...]

  124. mynicki.net » Fancy Menü, on March 21st, 2007 at 8:39 pm Said:

    [...] Beach Shortcutskurz und frisch Fancy Menü2007-03-22 00:39:24mit mootols zaubern… Menü Menü! margin 0px auto;2007-03-20 00:10:38 Ein einziger CSS-Tag schafft es mich eine kleine Ewigkeit [...]

  125. Fancy menu: CSS + Javascript - felixker.com - blog, on March 21st, 2007 at 9:09 pm Said:

    [...] using CSS and Javascript, You can have a fancy menu for your blog, perhaps. It’s cross-browser tested (IE6/7, Mozilla, Safari) : To [...]

  126. D.C Life » links for 2007-03-21, on March 22nd, 2007 at 12:25 am Said:

    [...] CSS+Javascript power. Fancy menu (tags: css javascript navigation) [...]

  127. Em3r10.com > Zelo fjansi CSS hover meni, on March 22nd, 2007 at 3:57 am Said:

    [...]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 …[...]

  128. Nick, on March 22nd, 2007 at 7:54 am 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!

  129. » Under the hood and up to much good » Christian Graphic Design, Art and Community - Niphal.com, on March 22nd, 2007 at 11:32 am Said:

    [...] and, quick addition: nice nav animation .Kyle .∞ .Now That’s Talent · Web · Type . Leave a [...]

  130. MAXALEM » 416 Mp Kamera, on March 22nd, 2007 at 12:36 pm Said:

    [...] bu sayfadaki makaleyi yazan kisi css ve javascript ile kucuk oyunlar oynamayi ve bu oyunlari oynarkende mootools‘un genis kutuphanesini kullanmayi gozardi etmemis. bu etkilesim sonucunda, fancy menu adiyla anilan oldukca eglenceli ve web sitenize entegre ettiginizde etkileyici bir gorunum elde edebileceginiz bir menu cikmis ortaya. bu guzelim menunun toplam dosya boyutu 1,5 kb. isteklerinize ve yeteneklerinize gore kaynak dosyalari uzerinde istediginiz degisiklikleri yapin ve yepyeni, size ozel bir menunuz olsun. bunu goren arkadaslarinizda “wavvv..! ” desinler. Yorum yaz. [...]

  131. Marshall, on March 22nd, 2007 at 6:14 pm 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

  132. guoguolovephp, on March 23rd, 2007 at 4:35 am Said:

    好东西 期待,å­¦ä¹

  133. calmquiet, on March 23rd, 2007 at 11:29 am 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.

  134. calmquiet, on March 23rd, 2007 at 11:42 am 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.

  135. Ty tzmedia, on March 23rd, 2007 at 4:37 pm 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.

  136. Fancy Menu: CSS and JS fun, on March 24th, 2007 at 12:19 am Said:

    [...] Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on [...]

  137. Roi Perez, on March 24th, 2007 at 10:05 am 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/

  138. Links for the Weekend, 3-24-2007, on March 24th, 2007 at 12:24 pm Said:

    [...] CSS+Javascript power. Fancy menu - looks like flash, but it’s not… Book it: del.icio.us, digg, Reddit, YahooMyWeb Subscribe to this feed! [...]

  139. , on March 24th, 2007 at 2:22 pm Said:

    [...] CSS+Javascript power. Fancy menu - looks like flash, but it’s not… [...]

  140. ConnyLo, on March 25th, 2007 at 6:17 am Said:

    Interesting. May be easier with a bit Flash?

  141. SO-DEVE » Adding an expandable snippet box to your Wordpress blog, on March 25th, 2007 at 3:31 pm Said:

    [...] was roaming at digg when i stumble upon this page:CSS+Javascript power. Fancy menu. Inside, i was amazed to see the way the snippets presented. In an expandable box. You can even see [...]

  142. Create A Sliding Fancy menu » D’ Technology Weblog — Technology, Blogging, Gadgets, Fashion, Life Style., on March 25th, 2007 at 5:27 pm Said:

    [...] Continue to read full article…. [...]

  143. Egidio aka Sickbrain, on March 25th, 2007 at 8:01 pm Said:

    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

  144. Ted Jardine, on March 26th, 2007 at 12:07 am Said:

    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.

  145. Kim Schulz, on March 26th, 2007 at 7:48 am Said:

    @Roi Perez

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

  146. HorizontBlog » DanaÅ¡nji linkovi, on March 26th, 2007 at 8:49 am Said:

    [...] Da krenem prvo od develop linkova..Na sitepointu, dobri saveti oko markup-a: 37 Steps to Perfect Markup Rešenje problema png transparencije u internet exploreru: Cross-Browser Variable Opacity with PNG: A Real Solution Tutorial za izradu stvarno cool navigation bara: >>CSS+Javascript power. Fancy menu [...]

  147. Andreas, on March 26th, 2007 at 9:27 am 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.

  148. George, on March 26th, 2007 at 10:19 am Said:

    Nice work. Thanks for sharing.

  149. dailywebthing linkport, on March 26th, 2007 at 11:16 am Said:

    ‘cute’ effects…

    CSS Javascript power. Fancy menu[davidbisset.com]…

  150. Casino Lemonade, on March 26th, 2007 at 3:35 pm Said:

    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

  151. Blog Image & Web Solution » Menú elástico utilizando JavaScript y CSS, on March 26th, 2007 at 4:08 pm Said:

    [...] Fancy Menu [CSS Beauty] Enlace [...]

  152. carl, on March 26th, 2007 at 7:50 pm 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!

  153. crysfel, on March 26th, 2007 at 9:34 pm Said:

    woaw! this is awesome, i really like this!

  154. links for 2007-03-27 « The Exile, on March 27th, 2007 at 1:55 am Said:

    [...] CSS+Javascript power. Fancy menu (tags: javascript css navigation menu) [...]

  155. li, on March 28th, 2007 at 3:02 am Said:

    where img download?

  156. Theron, on March 28th, 2007 at 7:46 am 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.

  157. arjun, on March 28th, 2007 at 9:55 am Said:

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

  158. consideredharmful, on March 28th, 2007 at 10:03 am Said:

    Freakishly beautiful.

  159. Robin, on March 28th, 2007 at 2:52 pm 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….

  160. Atelred. Atrapadoenlared. Reflexiones Blog Noticias Actualidad Verdad, on March 29th, 2007 at 5:32 am Said:

    [...] Devthought nos ofrece la posibilidad de implementar un codigo CSS en nuestra página, a través del cual conseguiremos realizar un interesante y elegante efecto de navegación, listo para implementar en nuestro diseño. La verdad es que esta muy currado, merece la pena echarle un vistazo. [...]

  161. mcdave.net » links for 2007-03-31, on March 31st, 2007 at 3:27 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Un menu divertido con javascript y css (tags: css javascript navigation) [...]

  162. links for 2007-03-18 en newdisco, on March 31st, 2007 at 10:05 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Menu con CSS + Javascript novedosisimo. Creo que lo usaré (tags: css javascript ajax) [...]

  163. Baz Web Development: AJAX, Joomla, CSS » Blog Archive » Very Fancy Menus - CSS And JavaScript, on March 31st, 2007 at 3:36 pm Said:

    [...] by the image, but the image under that travel menu; it moves with the mouse hover. Check it out: Facny Menu. Bookmark [...]

  164. Rahul Dev Katarey, on March 31st, 2007 at 5:45 pm Said:

    hay its too good!, really i Appreciate that

  165. Amlur, on March 31st, 2007 at 11:17 pm Said:

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

  166. Amlur, on March 31st, 2007 at 11:25 pm Said:

    verical please :s not horizental

  167. Ranbir Rathore, on April 1st, 2007 at 10:31 pm Said:

    Impressive!

  168. ken edwards, on April 2nd, 2007 at 11:01 am Said:

    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.

  169. JtChurch, on April 2nd, 2007 at 1:10 pm 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

  170. Ben, on April 4th, 2007 at 3:50 am 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?

  171. TechMount » Archive » Daily Friction #230, on April 4th, 2007 at 6:15 am Said:

    [...] A fancy CSS + JavaScript menu. [...]

  172. Damien, on April 4th, 2007 at 7:17 am Said:

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

  173. Edski, on April 5th, 2007 at 11:23 am Said:

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

  174. Edski, on April 5th, 2007 at 2:04 pm 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!

  175. Pentacle, on April 5th, 2007 at 6:31 pm 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?

  176. ogalican, on April 6th, 2007 at 11:42 am Said:

    not bad.

  177. raul, on April 8th, 2007 at 12:52 am 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

  178. Scott, on April 8th, 2007 at 8:32 pm 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

  179. Scott, on April 9th, 2007 at 10:22 pm 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.

  180. tim, on April 10th, 2007 at 1:54 pm 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

  181. Erik Paulsson, on April 11th, 2007 at 12:39 am 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.

  182. Erik Paulsson, on April 11th, 2007 at 12:44 am 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

  183. Best of March 2007 | Smashing Magazine, on April 11th, 2007 at 12:59 pm Said:

    [...] Devthought: CSS+JavaScript Navigation Menu [...]

  184. CSS+JS=Nice menu at Ciorici Pavel, on April 11th, 2007 at 2:37 pm Said:

    [...] sa faceti un meniu foarte atragator vizitand acest site: Devthought. « Interviu anti-comunist Noutati [...]

  185. Скакунов Александр, on April 11th, 2007 at 5:51 pm Said:

    Very cool!
    Thanks for sharing!

  186. Fancy Menu « creativity, on April 12th, 2007 at 9:41 am Said:

    [...] http://devthought.com/cssjavascript-true-power-fancy-menu/ [...]

  187. » 25 Code Snippets for Web Designers (Part3), on April 12th, 2007 at 10:50 am Said:

    [...] CSS + Javascript Fancy Menu - 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 [...]

  188. Jeremy Karney, on April 12th, 2007 at 11:45 am Said:

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

    Why does it not snap back like yours does?

  189. More cool css, javascript stuff | Useful Web Stuff, on April 12th, 2007 at 3:21 pm Said:

    [...] fancy menu [...]

  190. Web Development Resources - denniland.com, on April 13th, 2007 at 3:21 am Said:

    [...] Fancy Menu with JavaScript and CSS [...]

  191. zhaiduo, on April 13th, 2007 at 4:49 am Said:

    really good, thanks for sharing.

  192. Sandor Korozsi’s weblog :: Fancy menu :: April :: 2007, on April 13th, 2007 at 5:34 am Said:

    [...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Comments » [...]

  193. Web design Snippets I can’t Live without | Flawless Mind, on April 13th, 2007 at 6:46 am Said:

    [...] CSS + Javascript Fancy Menu - In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects [...]

  194. Jaapjaap/ Blog Archief » Fancy Menu, on April 13th, 2007 at 4:29 pm Said:

    [...] Ik zeg weg met die Flash-menu’s. Bekijk het voorbeeld: http://www.devthought.com/cssjavascript-true-power-fancy-menu/ [...]

  195. Christian, on April 13th, 2007 at 10:35 pm 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.

  196. Christian, on April 13th, 2007 at 10:41 pm 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

  197. Marco, on April 14th, 2007 at 12:20 am 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

  198. Josh, on April 15th, 2007 at 6:22 pm 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 =)

  199. SOMUCHI // CSS+Javascript power. Fancy menu, on April 15th, 2007 at 7:56 pm Said: