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:
<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:
<li class="background"><div class="left"> </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:
#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:
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
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.
Click here to see Javascript code
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!
Tags: on January 29th, 2007
March 15th, 2007 at 10:55 pm
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!!
March 16th, 2007 at 6:03 am
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!
March 16th, 2007 at 7:19 am
cool!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
March 16th, 2007 at 9:53 am
[...] Fancy Menu es una librería javascript que te permitirá realizar un curioso menú reforzado con MooTools. # « Frase #54 [...]
March 16th, 2007 at 11:45 am
@Haitham
Sure. I’ll make a zip with the library and many examples soon.
@simonjs, @eeels
Glad you like it
March 16th, 2007 at 11:53 am
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
March 16th, 2007 at 12:04 pm
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!
March 16th, 2007 at 1:19 pm
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.
March 16th, 2007 at 1:46 pm
[...] CSS+Javascript power. Fancy menu [...]
March 16th, 2007 at 3:12 pm
What about a vertical menu???
March 16th, 2007 at 3:13 pm
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
March 16th, 2007 at 3:13 pm
Any way to incorporate a drop down with this?
March 16th, 2007 at 3:18 pm
[...] something I found on digg today, a quick tutorial for a nice javascript/css menu. Link « Total Validator [...]
March 16th, 2007 at 3:32 pm
I like the menu…a zip will be nice.
March 16th, 2007 at 3:38 pm
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.
March 16th, 2007 at 3:50 pm
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.
March 16th, 2007 at 4:09 pm
Doesn’t look very good in IE7. The “moving background” is black instead of a dark orange.
March 16th, 2007 at 4:35 pm
Thanks, very interesting….
March 16th, 2007 at 5:59 pm
I love this site
March 16th, 2007 at 11:31 pm
[...] 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 [...]
March 17th, 2007 at 12:58 am
WOW!
March 17th, 2007 at 1:32 am
[...] Source [...]
March 17th, 2007 at 2:31 am
[...] 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 [...]
March 17th, 2007 at 4:58 am
[...] un tutorial très détaillé qui présente une méthode pour faire un menu animé très sympa avec une petite [...]
March 17th, 2007 at 7:02 am
CSS+Javascript power. Fancy menu…
CSS guide for good fancy menu :D…
March 17th, 2007 at 7:42 am
Here is another nav menu with the same type of thing but the code is *very* messy.
http://pupius.co.uk/
March 17th, 2007 at 7:51 am
[...] read more | digg story [...]
March 17th, 2007 at 9:51 am
[...] CSS+Javascript power. Fancy menu – Fantastické menu pomocou CSS+Javascriptu [...]
March 17th, 2007 at 10:06 am
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.
March 17th, 2007 at 11:42 am
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!!!!!
March 17th, 2007 at 2:22 pm
[...] Javascript ve CSS’in gücünü görmek isteyenlere güzel bir örnek. Link [...]
March 17th, 2007 at 2:48 pm
that is nice,
fantastic.
what do you that?
March 17th, 2007 at 2:48 pm
iyimiş tebrikler
March 17th, 2007 at 3:22 pm
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript menu navigation mootools) [...]
March 17th, 2007 at 3:33 pm
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu pretty!! (tags: css javascript webdesign menu navigation mootools web design) [...]
March 17th, 2007 at 4:07 pm
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?
March 17th, 2007 at 4:17 pm
@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.
March 17th, 2007 at 4:19 pm
Coming soon, by the way:
- Text based example
- Another menu example
- Vertical menu
March 17th, 2007 at 10:10 pm
I am looking forward to the text based example!
March 17th, 2007 at 11:02 pm
[...] to impress your friends, while keeping it accessible and unbelievably lightweight? Try this scriptread more | digg [...]
March 17th, 2007 at 11:26 pm
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?
March 17th, 2007 at 11:36 pm
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.
March 17th, 2007 at 11:47 pm
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!
March 18th, 2007 at 12:00 am
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.
March 18th, 2007 at 12:10 am
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.
March 18th, 2007 at 1:37 am
Grande guille. Donde aprendiste?
March 18th, 2007 at 3:36 am
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.
March 18th, 2007 at 4:59 am
Re: Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu…
Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menuCSSとJavaScriptだけでなめらかな動きをする横メニュー…
March 18th, 2007 at 12:15 pm
perfect, man!!!
March 18th, 2007 at 12:59 pm
You. Are. A. Genius.
Thanks for this man… I can see myself using this technique in the future
March 18th, 2007 at 1:03 pm
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?
March 18th, 2007 at 3:17 pm
This should be in Mootools Gallery…TAGGED!!
March 19th, 2007 at 1:05 am
[...] Devthought publican un artículo de como implementar un bonito menú de navegación hecho con CSS y que sale [...]
March 19th, 2007 at 6:21 am
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?
March 19th, 2007 at 6:33 am
very fancy menu…
thanks!!
March 19th, 2007 at 7:48 am
[...] 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 [...]
March 19th, 2007 at 8:42 am
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.
March 19th, 2007 at 9:13 am
Cute menu.
March 19th, 2007 at 9:55 am
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu [...]
March 19th, 2007 at 11:34 am
[...] 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 [...]
March 19th, 2007 at 12:08 pm
And I do not get tired myself of speaking that I love mootools \o/
March 19th, 2007 at 12:57 pm
@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.
March 19th, 2007 at 1:15 pm
Does the menu work on safari or mac ie?
March 19th, 2007 at 1:19 pm
@omar
Safari is my main browser. I guarantee it works. I don’t use mac ie, so I don’t know about that.
March 19th, 2007 at 1:21 pm
[...] An effect that will make people think it’s flash. [...]
March 19th, 2007 at 1:30 pm
[...] 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 [...]
March 19th, 2007 at 4:03 pm
[...] 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 [...]
March 19th, 2007 at 5:18 pm
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…
March 19th, 2007 at 5:20 pm
@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.
March 19th, 2007 at 6:47 pm
nicely done!
March 19th, 2007 at 6:59 pm
[...] Demo : http://devthought.com/cssjavascript-true-power-fancy-menu/ [...]
March 19th, 2007 at 7:09 pm
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).
March 19th, 2007 at 7:13 pm
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
March 19th, 2007 at 8:32 pm
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..
March 19th, 2007 at 8:36 pm
Whoops that link didn’t show:
http://www.everydayprophets.com/theroadtrip/index.html
March 19th, 2007 at 8:40 pm
Check that this exists and can be accessed:
http://www.everydayprophets.com/theroadtrip/mootools.js
March 19th, 2007 at 8:54 pm
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…
March 19th, 2007 at 9:54 pm
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” ;).
March 19th, 2007 at 9:59 pm
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
March 19th, 2007 at 10:02 pm
@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
March 19th, 2007 at 10:18 pm
Whoa, very nice piece of code.
Anyway, works strange in Opera 8.54/Win.
March 19th, 2007 at 10:19 pm
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.
March 19th, 2007 at 11:11 pm
[...] CSS+Javascript power. Fancy menu has a ‘bubble’ for hover over highlighting of tab selections (tags: Navigation) [...]
March 19th, 2007 at 11:44 pm
[...] 16 ปี จาก Argentina ได้เขียน fancy menu โดยใช้ CSS และ JavaScript โดยมี mootools [...]
March 20th, 2007 at 3:31 am
[...] Devthought: CSS+Javascript power. Fancy menu Nice navigation using Mootols, with horisontal animation. [...]
March 20th, 2007 at 4:31 am
Fancy menu with Mootools…
Just found a very nice menu which created with Mootools,…
March 20th, 2007 at 7:20 am
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Nätti. tagit: [...]
March 20th, 2007 at 7:21 am
[...] 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) [...]
March 20th, 2007 at 7:32 am
[...] weiteres cooles Beispiel, was sich mit JS-Bibliotheken wie Mootools, jQuery und Prototype so alles machen [...]
March 20th, 2007 at 7:55 am
[...] How to create a custom navigation bar with some cute Javascript effects that will certainly impress your friends. [go] [...]
March 20th, 2007 at 8:21 am
[...] CSS+Javascript power. Fancy menu hot (tags: css Javascript menu) [...]
March 20th, 2007 at 11:46 am
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!
March 20th, 2007 at 2:01 pm
[...] Link [...]
March 20th, 2007 at 3:01 pm
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
March 20th, 2007 at 3:42 pm
[...] Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on [...]
March 20th, 2007 at 4:38 pm
[...] CSS + JavaScript creates a fancy menu tutorial. [...]
March 20th, 2007 at 4:38 pm
Nice, but it makes my firefox really slow…
March 20th, 2007 at 5:05 pm
[...] This menu looks cool. Don’t have a use for it right now, but you never know! [...]
March 20th, 2007 at 8:52 pm
[...] 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 [...]
March 20th, 2007 at 11:08 pm
[...] 以 CSS+Javascript 为基础的强大的华丽的导航菜单 [...]
March 20th, 2007 at 11:08 pm
Beautiful!
March 20th, 2007 at 11:25 pm
[...] 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 » [...]
March 20th, 2007 at 11:52 pm
that’s amazing!!
March 21st, 2007 at 2:09 am
Wow! Very cool indeed.
March 21st, 2007 at 2:55 am
好东西,真是不简单啊.
March 21st, 2007 at 5:33 am
[...] read more | digg story [...]
March 21st, 2007 at 8:12 am
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
March 21st, 2007 at 8:53 am
[...] démo et le code source sont disponibles ici (en [...]
March 21st, 2007 at 8:59 am
[...] 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, [...]
March 21st, 2007 at 10:11 am
[...] CSS+Javascript power. Fancy menu [...]
March 21st, 2007 at 10:56 am
awesome!!!
March 21st, 2007 at 11:36 am
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
March 21st, 2007 at 11:53 am
[...] han preferido inventarse un menú propio, con muy buenos [...]
March 21st, 2007 at 12:22 pm
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript webdesign) [...]
March 21st, 2007 at 12:27 pm
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu CSS滑动菜单 (tags: css javascript menu) [...]
March 21st, 2007 at 12:55 pm
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!
March 21st, 2007 at 12:59 pm
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…
March 21st, 2007 at 4:11 pm
[...] http://devthought.com/ [...]
March 21st, 2007 at 4:15 pm
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!
March 21st, 2007 at 4:17 pm
@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.
March 21st, 2007 at 5:01 pm
@Kim Schultz
I really like the changes you’ve made, especially without the images. Do you mind sharing your source?
Thanks,
Casey
March 21st, 2007 at 5:23 pm
@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
March 21st, 2007 at 8:32 pm
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu (tags: css javascript menu navigation design Good) [...]
March 21st, 2007 at 8:39 pm
[...] 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 [...]
March 21st, 2007 at 9:09 pm
[...] using CSS and Javascript, You can have a fancy menu for your blog, perhaps. It’s cross-browser tested (IE6/7, Mozilla, Safari) : To [...]
March 22nd, 2007 at 12:25 am
[...] CSS+Javascript power. Fancy menu (tags: css javascript navigation) [...]
March 22nd, 2007 at 3:57 am
[...]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 …[...]
March 22nd, 2007 at 7:54 am
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!
March 22nd, 2007 at 11:32 am
[...] and, quick addition: nice nav animation .Kyle .∞ .Now That’s Talent · Web · Type . Leave a [...]
March 22nd, 2007 at 12:36 pm
[...] 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. [...]
March 22nd, 2007 at 6:14 pm
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
March 23rd, 2007 at 4:35 am
好东西 期待,学习
March 23rd, 2007 at 11:29 am
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.
March 23rd, 2007 at 11:42 am
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.
March 23rd, 2007 at 4:37 pm
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.
March 24th, 2007 at 12:19 am
[...] Rauch is a sixteen year old hacker who created a fancy menu using CSS and JavaScript based on [...]
March 24th, 2007 at 10:05 am
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/
March 24th, 2007 at 12:24 pm
[...] CSS+Javascript power. Fancy menu - looks like flash, but it’s not… Book it: del.icio.us, digg, Reddit, YahooMyWeb Subscribe to this feed! [...]
March 24th, 2007 at 2:22 pm
[...] CSS+Javascript power. Fancy menu - looks like flash, but it’s not… [...]
March 25th, 2007 at 6:17 am
Interesting. May be easier with a bit Flash?
March 25th, 2007 at 3:31 pm
[...] 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 [...]
March 25th, 2007 at 5:27 pm
[...] Continue to read full article…. [...]
March 25th, 2007 at 8:01 pm
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
March 26th, 2007 at 12:07 am
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.
March 26th, 2007 at 7:48 am
@Roi Perez
Your menu attempt crashes my IE 7 the same way as the one on this page.
March 26th, 2007 at 8:49 am
[...] 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 [...]
March 26th, 2007 at 9:27 am
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.
March 26th, 2007 at 10:19 am
Nice work. Thanks for sharing.
March 26th, 2007 at 11:16 am
‘cute’ effects…
CSS Javascript power. Fancy menu[davidbisset.com]…
March 26th, 2007 at 3:35 pm
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
March 26th, 2007 at 4:08 pm
[...] Fancy Menu [CSS Beauty] Enlace [...]
March 26th, 2007 at 7:50 pm
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!
March 26th, 2007 at 9:34 pm
woaw! this is awesome, i really like this!
March 27th, 2007 at 1:55 am
[...] CSS+Javascript power. Fancy menu (tags: javascript css navigation menu) [...]
March 28th, 2007 at 3:02 am
where img download?
March 28th, 2007 at 7:46 am
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.
March 28th, 2007 at 9:55 am
very nice menu.Applause!!!!!!!!!
March 28th, 2007 at 10:03 am
Freakishly beautiful.
March 28th, 2007 at 2:52 pm
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….
March 29th, 2007 at 5:32 am
[...] 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. [...]
March 31st, 2007 at 3:27 am
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Un menu divertido con javascript y css (tags: css javascript navigation) [...]
March 31st, 2007 at 10:05 am
[...] Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu Menu con CSS + Javascript novedosisimo. Creo que lo usaré (tags: css javascript ajax) [...]
March 31st, 2007 at 3:36 pm
[...] by the image, but the image under that travel menu; it moves with the mouse hover. Check it out: Facny Menu. Bookmark [...]
March 31st, 2007 at 5:45 pm
hay its too good!, really i Appreciate that