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:
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.
var SlideList = new Class({
initialize: function(menu, options) {
this.setOptions(this.getOptions(), options);
this.menu = $(menu), this.current = this.menu.getElement('li.current');
this.menu.getElements('li').each(function(item){
item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
}.bind(this));
this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
this.back.fx = this.back.effects(this.options);
if(this.current) this.setCurrent(this.current);
},
setCurrent: function(el, effect){
this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
this.current = el;
},
getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},
clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},
moveBg: function(to) {
if(!this.current) return;
this.back.fx.custom({
left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]
});
}
});
SlideList.implement(new Options);
Finally, it’s time to start it. Just create the object, by passing the id and desired options. The following example shows how to do it when the page DOM tree is loaded.
window.addEvent('domready', function() {
new SlideList($E('ul', 'fancymenu'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
});
The script first looks for the element that has the current class. If it finds it, it positions the background behind it. If it doesn’t, it waits till the user first click on some item to set the ‘current’ class. This comes in very handy for menus meant for user selection, like the example below, instead of menus with links to actual URLs.
There’s an onClick option, which calls a function with an Event object, and the clicked element object reference as parameters. You can also change the effect duration, transition, etc.
Extend it
If you’ve made it this far, you must’ve noticed that it hasn’t been dead easy. In fact, the tutorial is not aimed solely to teach you how to create a menu, but for you to understand the possibilities you have using CSS and Javascript to make something stand out, and at the same time provide some tips to get you started if you want to create your own.
Here’s another example, using the very same Javascript class!
691 Comments
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!!
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!
cool!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Pingback: aNieto2K | Fancy Menu con MooTools
@Haitham
Sure. I’ll make a zip with the library and many examples soon.
@simonjs, @eeels
Glad you like it
On dial-up, for about 45 seconds after the menu images (Home, Plant A Tree, etc) have loaded, it doesn’t do anything. The moving background seems to take ages to load
Hi! I´m sure that you can speak in spanish since you are from Argentina, but is not important the language in this comment. Your solution is very nice! I don´t have experience in programming (only design and coding) but i need for sure learn some of javascript, i´ll look more into your code and i´ll do some sample, when i get this done, i´ll contact you for share my work.
By the way, i think that we all are waiting for more posts here! lol!
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.
Pingback: xocea » This Week In: IT & Design
What about a vertical menu???
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
Any way to incorporate a drop down with this?
Pingback: The Web Design Blog
I like the menu…a zip will be nice.
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.
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.
Doesn’t look very good in IE7. The “moving background” is black instead of a dark orange. :(
Thanks, very interesting….
I love this site
Pingback: CSS+Javascript power. Fancy menu « News Coctail
WOW!
Pingback: CSS+Javascript power. Fancy menu. « //burnz.blog
Pingback: » Savaitgalio skaitiniai #18 Archyvas » Pixel.lt
Pingback: Faire un menu en CSS avec du javacript qui a de la gueule
Pingback: pligg.com
Here is another nav menu with the same type of thing but the code is *very* messy.
http://pupius.co.uk/
Pingback: CSS+Javascript power. Fancy menu » Prateek
Pingback: Linky na vÃkend 52 na depi.sk - IT & Life Weblog
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.
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!!!!!
Pingback: Fatih HayrioÄŸlu’nun not defteri » 18 Mart 2007 Web’den seçme haberler
that is nice,
fantastic.
what do you that?
iyimiÅŸ tebrikler
Pingback: links for 2007-03-17 « toonz
Pingback: its about time» Blog Archive » links for 2007-03-17
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?
@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.
Coming soon, by the way:
– Text based example
– Another menu example
– Vertical menu
I am looking forward to the text based example!
Pingback: Candes Blog - Creative Specialist & Web Consultant » CSS+Javascript power. Fancy menu
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?
Just the href attributes. You can use the onClick property of the options parameter if you want custom JS code when some item is clicked.
For text you’ll need the height too, otherwise the moving shadow/background will not cover the entire text when the font is enlarged. I’m looking forward to the text example as well as to the vertical menu! Thanks!
Naturally. But if I don’t figure out how to calculate ems, and you increase the font size, the box size will remain unupdated until you pass your mouse over it again.
I guess I’d be ok with that, as long as the height is properly re-calculated on the next mouseover (right now it is not). Also, for text you’d probably want to make the shadow a bit larger than the width x height, to make sure there is some empty space around the text and whoever sets the text doesn’t have to artificially add spaces around it. Probably something like 1.2em or so, but I guess you thought of that already.
Grande guille. Donde aprendiste?
This is very cute! Since my site’s already using mootools for effects, I’m playing with a modified version of this on my site now, with { brackets } instead of a bg color. The front page has a very different menu structure, but this fits very nicely into the horizontal menu across the top of the main body of the site!
@John: try adding
top: [this.back.offsetTop, to.offsetTop],
to the fx.custom call in moveBg.
Pingback: GochaBookMarkClips
perfect, man!!!
You. Are. A. Genius.
Thanks for this man… I can see myself using this technique in the future :)
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?
This should be in Mootools Gallery…TAGGED!!
Pingback: CSS + Javascript, Fancy menu | Pandibia
This is really cool, how well does this work in older browsers? say back to IE5, or FireFox1? NS? I love that it is cross browser but will it still look “decent” in older browsers?
very fancy menu…
thanks!!
Pingback: Coole Navigation mit CSS und JS
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.
Cute menu.
Pingback: Switch-Case / Blog Archive / Links for 3/19/07 [my NetNewsWire tabs]
Pingback: Un bel menu e qualche trucco css + jscipr correlati - Tutti Per Uno - Forum
And I do not get tired myself of speaking that I love mootools \o/
@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.
Does the menu work on safari or mac ie?
@omar
Safari is my main browser. I guarantee it works. I don’t use mac ie, so I don’t know about that.
Pingback: davidbisset.com » CSS+Javascript “Bubble” Menu
Pingback: Fancy Menu: CSS and JS fun « outaTiME
Pingback: Top 16 Programming Diggs for Previous 30 Days - Intelligentedu.com Free Computer Training Blogs
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… :)
@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.
nicely done!
Pingback: AjaxNedir » Blog Archive » CSS+Javascript’in gücü. Fancy menu
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).
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 ;)
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.. :)
Whoops that link didn’t show:
http://www.everydayprophets.com/theroadtrip/index.html
Check that this exists and can be accessed:
http://www.everydayprophets.com/theroadtrip/mootools.js
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…
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” ;).
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 ;)
@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
Whoa, very nice piece of code.
Anyway, works strange in Opera 8.54/Win.
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.
Pingback: All in a days work…
Pingback: adkdev’s blog » Blog Archive » Fancy Menu: CSS and JS fun
Pingback: Filter for 20/3 2007 - Felt
Pingback: Webdigity webmaster forum
Pingback: Päivän linkit 20.03.2007 | Satunnainen Björklund
Pingback: links for 2007-03-20 | Bill2me dot Com
Pingback: michi-r.ch // weblog ohne ziel und zweck » Wozu eigentlich noch Flash?
Pingback: CSS+Javascript power. Fancy menu » Webdesign Archive
Pingback: links for 2007-03-20 » mhinze.com
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!
Pingback: imagesafari blog » Blog Archive » CSS+Javascript power. Fancy menu
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
Pingback: Fancy Menu: CSS and JS fun at 3motions.net
Pingback: Easy Webbers | Webmasters Blog » Blog Archive » Speedlinking Week 12 (2007)
Nice, but it makes my firefox really slow…
Pingback: house-of-wonder.com » Blog Archive » Javascript menu
Pingback: Bitperbit » Lo mejor de CSS
Pingback: 煎蛋 » 本月 CSS å°ç”œç‚¹
Beautiful!
Pingback: my so-called blog » links for 2007-03-21
that’s amazing!!
Wow! Very cool indeed.
好东西,真是ä¸ç®€å•å•Š.
Pingback: CSS+Javascript power. Fancy menu « Know things
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
Pingback: CONNECTDEALS » CSS+Javascript = Fancy menu
Pingback: David Bloomfield’s Blog » Blog Archive » CSS creme of the month
Pingback: Blog do Isra » O que anda rolando no mundo do CSS
awesome!!!
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
Pingback: RUDEWORKS » Archivo » Alimenta tu mootools
Pingback: heath’s Daemon Castle » Blog Archive » links for 2007-03-21
Pingback: links for 2007-03-21 « åšè¶³å£¹ä½°
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!
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…
Pingback: Cool JS Slider Menu at noisylime
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!
@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.
@Kim Schultz
I really like the changes you’ve made, especially without the images. Do you mind sharing your source?
Thanks,
Casey
@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
Pingback: links for 2007-03-21 « toonz
Pingback: mynicki.net » Fancy Menü
Pingback: Fancy menu: CSS + Javascript - felixker.com - blog
Pingback: D.C Life » links for 2007-03-21
[…]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 …[…]
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!
Pingback: » Under the hood and up to much good » Christian Graphic Design, Art and Community - Niphal.com
Pingback: MAXALEM » 416 Mp Kamera
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
好东西 期待,å¦ä¹
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.
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.
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.
Pingback: Fancy Menu: CSS and JS fun
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/
Pingback: Links for the Weekend, 3-24-2007
Pingback: " » Links for the Weekend, 3-24-2007" by Web Site Marketing Information
Interesting. May be easier with a bit Flash?
Pingback: SO-DEVE » Adding an expandable snippet box to your Wordpress blog
Pingback: Create A Sliding Fancy menu » D’ Technology Weblog — Technology, Blogging, Gadgets, Fashion, Life Style.
Hi, I wanted to signal to you that I have published on my situated one version translate in Italian of your beautifulst article “Fancy Menuâ€. I make you compliments.
http://www.sickbrain.org/?document_id=115&topic_id=8&page=0
Regarding browser issues, use http://www.browsercam.com to view screenshots of all possible browsers on all platforms, with the ability to vnc into multiple different machines with all necessary browser editions and versions (Windows, Mac, Linux).
For independent developers that cringe at the cost, just go to fundable.org and keep an eye out for the group plan that usually comes up every month or two so that it’s only $25/year. Steal.
@Roi Perez
Your menu attempt crashes my IE 7 the same way as the one on this page.
Pingback: HorizontBlog » DanaÅ¡nji linkovi
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.
Nice work. Thanks for sharing.
Pingback: dailywebthing linkport
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
Pingback: Blog Image & Web Solution » Menú elástico utilizando JavaScript y CSS
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!
woaw! this is awesome, i really like this!
Pingback: links for 2007-03-27 « The Exile
where img download?
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.
very nice menu.Applause!!!!!!!!!
Freakishly beautiful.
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….
Pingback: Atelred. Atrapadoenlared. Reflexiones Blog Noticias Actualidad Verdad
Pingback: mcdave.net » links for 2007-03-31
Pingback: links for 2007-03-18 en newdisco
Pingback: Baz Web Development: AJAX, Joomla, CSS » Blog Archive » Very Fancy Menus - CSS And JavaScript
hay its too good!, really i Appreciate that
very good menu !!!! but Please can somebody help me making the same menu but horizental ?? please very urgent
verical please :s not horizental
Impressive!
Have you made the Download file yet? I would like to make a menu using your menu system. I will also like a photoshop file of the words for the menu items.
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
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?
Pingback: TechMount » Archive » Daily Friction #230
The reason it is Buggy in IE is because of the transparent PNG’s
When te menu is sliding the mouse over cursor flickers like crazy in ie6.
Is there a fix for this?
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!
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?
not bad.
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
*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
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.
that font is vag rounded, i think its an adobe font, but can be found here: http://www.webpagepublicity.com/free-fonts-v.html
@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.
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
Pingback: Best of March 2007 | Smashing Magazine
Pingback: CSS+JS=Nice menu at Ciorici Pavel
Very cool!
Thanks for sharing!
Pingback: Fancy Menu « creativity
Pingback: » 25 Code Snippets for Web Designers (Part3)
I got this far: http://www.keepingthelight.com/menutest/
Why does it not snap back like yours does?
Pingback: More cool css, javascript stuff | Useful Web Stuff
Pingback: Web Development Resources - denniland.com
really good, thanks for sharing.
Pingback: Sandor Korozsi’s weblog :: Fancy menu :: April :: 2007
Pingback: Web design Snippets I can’t Live without | Flawless Mind
Pingback: Jaapjaap/ Blog Archief » Fancy Menu
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.
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
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
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 =)
Pingback: SOMUCHI // CSS+Javascript power. Fancy menu
Hi, I love this and have implimented it onto my site: http://www.alexhays.com
The thing is, in Safari the background sits slightly to far to the right. It looks fine in Firefox, but Safari has issues. Im not sure if its some obvious problem but I can’t seem to figure it out. It also doesnt work whatsoever in IE, haha.
Thanks – you’re awesome
Pingback: Menu animado com Javascript « Geekdoagrest
I am eager to use this, but I can’t. Either I need to find a way make new menu choice images (instead of “riding an elephant”) without photoshop or fireworks, or I need to find a way to make the text version work. Can someone just sort of end me a working model?
This is freaking awesome man! Thanks :)
It is tools like this that help us web designers build great sites.
“You are a gentleman and a scholar. Go into my stable and take my finest steed. His name is Windjammer :)” Tedd – How I Met Your Mother (TV Show)
Pingback: SachinKRaj - get something useful from web CSS+JavaScript Navigation Menu «
Pingback: Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007
Thabks for great menu!
I have question: when I open page in IE6 on clients PC, I saw top bar with security notice like “page have active content and must be blocked” And fancy menu don’t work. Yeas, I can navigate, but “shadow” not drawn :(
In Firefox work’s fine. How to check this ? I can’t tell any person to enable java and other stuff. Bu I love fancy menu!
Pingback: MS css » Horizontal
GREAT Menu. I use it for my Fanpage. And it looks just cool.
Thanks.
Pingback: Ajax ile hazırlanmış Fancy menu « Ali Babanın ÇiftliÄŸi
@quard
See if your files work on a host. The active content blocked usually only happens locally. I had a similar problem when implementing iepngfix and someone clued me in that it only happens locally.
Pingback: 好åƒä¸å¦‚é¥ºå » : » 饺å文摘：2007-04-25
dsfsdafasdf asdf f
sgdfgfsdgsdf
Hi, I really like your fancy menu. Where can I download all the project code including images and such? Thanks again and you’ve done a great job with the menu.
Thanks,
Mario
cool script, thanks.
Hey, I have problem with IE6 png. I’ve tried everything (including behavior: url(iepngfix.htc); ) and I don’t know what should I do right now.Did anybody have such a problem? I will be thankful for solution .
Pingback: CSS+Javascript power. Fancy menu | ui kitchen
I love this, and the text-based solutions look promising. Guillermo, or some other savvy soul, would you be able to fine-tune the text version?
I’m also interested if this could be created as a Joomla! menu module. That would be powerful.
and the same with scriptaculous exists ?
Hi there,
Really sweet menu! I’m trying to port it to jQuery to use on my project and seem to have done pretty well but have a couple of problems I wondered if you could help me with:
– The CSS sets the background ‘visibility:hidden’ which somehow gets switched to ‘visible’ but I can’t see where this happens. I’m guessing its probably an ‘automagic’ thing in mootools but the only way I can see to do it is to add visiblity to the properties being set at the beggining of the setCurrent function.
– Whenever I move the mouse from one link to the other, the background transitions back to the current element before moving to the new element. Basically the moveBg function is being called twice. How are you stopping this happening in your version?
– What does the bind() call at the end of each addEvent do?
– What is the effect variable in setCurrent for?
Thanks for your help and creating an awesome menu. I’ll let you know once I’m finished, I’m sure plenty of others will want this!
Cheers,
Rory
nice
It seems in IE that the sliding background is black !! i cant seem to change it to the transparent gray…
Any thoughts ?
Pingback: Comunicação para Web » arquivo do blog » Menu que parece Flash mas não é
This is amazing! But how can I make the second example picture selector clickable as a link like the first example? If I change the
if($(‘pictureselect’)) PictureSelect = new SlideList(‘pictureselect’, { onClick: function(ev, item) { ev.stop(); } });
to
if($(‘pictureselect’)) PictureSelect = new SlideList(‘ul’,’pictureselect’, { onClick: function(ev, item) { ev.stop(); } });
The a href link works, but the effects stop. How is this done? Thank you! Any help is greatly appreciated.
I’ll try a bit to get a textbased-variante… but for the images: the effect only starts after I clicked on a picture. Is it possible to make it start when the cursor get in the aria. Perhaps via mouseover the div or so?
Is it possible to make this for a vertically oriented menu?
Too bad it’s slow as F*&*K
okay, I got it! [http://qooby.qo.funpic.de/]
next problem is a submenu. it should have the same effect, but with a new moving backgroud-so the one of teh mainnav keeps in place….
any advise?
I guess mootools can do some pretty amazing things huh ?
I got the menu to work, but the links do not work, any ideas help anyone!!!
http://www.jonbrown.org/slidelist/
As you can see from the above post if you view source you can see the links have content in them but they do not work, please help!!!
Found the solution, thx.
And What’s the solution, please? I have the same problem. The menu is working but not the links.
Thanks you.
thank youu coool : s — : )
nice menu….
Pingback: Redwall_hp » 29 CSS and AJAX Resources
it’s really to creative, i like moo tools and css technique.
Awesome work! You should get some some of award for this!
For the N00bs like me, remember you have to change the Main.js file for the links to work.
from:
FancyExample = new SlideList($E(‘ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
to:
FancyExample = new SlideList($E(’ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700});
Is there a way to create a drop down for this?
Thanks
Pingback: Infected-FX » Estrenamos diseño
Links don’t work, i don’t know why.
Look: http://www.grafa3d.republika.pl/POD
Pingback: Estrenamos diseño | Infected-FX| tutoriales, photoshop brushes y recursos para diseñadores web
First thanx to share this great menu with us!
I’m a beginner in web language, i tried to customize my menu.
Everything is ok except one thing : how could we modify the color of the li?
I’m sorry if that’s a dumb question but i really don’t understand how.
Thanx a lot.
Pingback: Hafizović Creations » Blog Archive » CSS+Javascript power. Fancy menu
i must be stupid, cos i cannot get it to work at all….
this is what im getting:
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}} {\*\generator Msftedit 5.41.21.2506;}\viewkind4\uc1\pard\f0\fs20 \par \par \par \par \tab \par \par \tab \tab\par \tab\par \tab \par \tab\par \tab \par \par \par \par \par \tab
\par \tab\tab
* \par \tab\tab\tab Home
* \par \tab\tab\tab Plant a tree
* \par \tab\tab\tab Travel
* \par \tab\tab\tab Ride an elephant
\par \tab\tab
# \par \tab
\par \tab
\par \par \par } �
Love it! I’m really impressed. Awesome man.
my god that great menu!!! lookslike flash menu…great work!
I’m trying to make this work in flash as well, anyone know how you’ld get the same effect in flash??
Hi,
I am having issues getting this script to work. Any time I try to implement the script i get an “$E is not defined” error in Firefox’s error console.
I have even tried putting it together outside of my application copying and pasting the code from the site.
Thanks in advance for all your help.
Mark Romero
really!!! great menu… look like a flash….. I like it.
Pingback: Efeito de menu que parece flash, mas não é : blog do benetti
Almost all of my development is in ASP.net c# (chastise me later) and I noticed that when using master pages, whenever I click on a link, the menu resets to the Home position. I’m assuming this is due to the master page behavior, where it is actually reloading the entire page…I really don’t want to use an iframe to fix that (mostly cause i hate the iFrame) and am thinking about just plugging in some custom AJAX for it, however, AJAX won’t actually run any code or scripts on the requested page…I’m sure I can figure something out, unless someone has a cookieless way (maybe using sessions or cookies that expire at the end of the session, to have the current class get set based on click and have that follow throughout all subpages…) I was wondering how you got your menu to maintain the links click after a full page refresh.
Thanks!
fyi…page devel in progress at http://www.gmtaz.com
Pingback: XSiR.NET» Blog Arsiv » Css ve javascript menu
Hi,
cool menu for our webdesign, and even SEO friendly!
THUMBS UP!
Looks great and I’ve got it working but not without the mootools.js which is 24Kb and not the 1.5Kb you mentioned in the article?
What am I doing wrong here? I need to cut down the JS to as small as possible.
PLEASE MAKE A TEXT BASED EXAMPLE FOR EASY EDITING!! Thanks :)
Really hoping you can put up an easy to use zip file that has everything we need (just needs to be edited to fit out needs) soon…
Is there any workaround to get this sweety work with IE Quirksmode? Everything is messed as soon as you go into quirks (needed to remove unneeded scrollbars in MSIE)
In desperate hope of some solution …
Pingback: EDENAHP.NET - Juanjo Vargas 's Blog
This is a great article! Keep up the good work!
Una pregunta. Cuál es la fuente tipográfica que utilizaste para los botones?
Great functionality and good tutorial.
thkkx
真的éžå¸¸æ£’ï¼è°¢è°¢ï¼
So Cool!!!!!!
Thanks.
Pingback: Solo Tutoriales » mooTools para novatos
people who doesn’t work links must be correct the string
FancyExample = new SlideList($E(‘ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
to
FancyExample = new SlideList($E(‘ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.play(); }});
Amazing. May i use this Javascript code for my blog? Thank you.
thats pretty cool, good work, but this is just like vista, do you love microsoft?
Has anyone come up with a way to add a drop down nav?
Very nice. Soon, Flash’s domination on the effects field will no longer be so stable. Great job!
Pingback: CSS+Javascript power. Fancy menu
Pingback: Gonzalo Solaz > Blog » Blog Archive » Anotaciones
Download it
This is like Flash animation. WOW, really nice! :)
Nice effect. thanks
The menu effect is good, but what really makes this good is the excellent tutorial you put together. Thanks.
very sexy!!!!!!
A very nice and useful menu, I really like it. Thanks for sharing
thank you.
A very nice and useful menu, I really like it. Thanks for sharing
Thanks for sharing
Here is jQuery port/enhancement. Its easier to use and supports vertical lists too:
http://meta20.net/Smooth_Menu_widget_for_jQuery
Pingback: Mimetic » Storelicious » Premium Themes para WordPress, phpBB y otros
how put my link en this menu?
nice nice nice, thanks for sharing!
exelente menu, pero como le pongo los link? cambio el # por una direccion y no lo abre……….gracias y saludos
Awesome script – thank you for sharing it with us!
I do have one question. I incorporated your script (and it worked perfectly with links too)… but then I added a script called “glider.js” (which also required an “effects.js” and “protoype.js” scripts) and since incorporating them – the fancy menu doesn’t work… I have looked all over to try and find a fix but to no avail…. would you know what could be causing the conflict? Any help is greatly appreciated!
Pingback: ldopa.net » archive » fancy menu
Great job. What do I need to change to keep the menu bar centered in the windows (as browser window is resized/maximized)? thanx
Answered my own question…
margin-left: auto;
margin-right: auto;
Pingback: 18a productions » Blog Archive » An Explanation…
Pingback: Ganesh » Blog Archive » LavaLamp for jQuery lovers!
For the benefit of jQuery lovers, i have ported this excellent effect as a jQuery plugin. Feel free to take a look at it http://gmarwaha.com/blog/?p=7.
Thanks Guillermo Rauch for this amazing widget.
Nice tutorial!
Pingback: CSS+Javascript power | Green
Pingback: Web Design Resource List v3.0 |
Hi,
Your fancy menu is great. I am having a problem with it though if I will have “lightbox image viewer” run together with the fancy menu. Each of them works perfectly if I will remove either of the two from my index page. I think there must be some conflicting variables or ID names. Have you or the other users of your fancy menu experienced the same problem? Help will be much appreciated. Thanks and more power to you.
-Victor
Pingback: » 20 horinzontal css menus
Pingback: Ary’s Baby Blog » Blog Archive » CSS+Javascript power. Fancy menu
Comment #300
Great menu, however I’m confused about the step with the png/gif image. The example you give is not very clear and I’m not exactly sure how to go about doing it.
Please Guillermo…
I’m looking forward the vertical oriented menu… will you present us soon?
Great job!!
@Julio
Yes, extremely soon
@John
The edges of good-looking fonts are ‘antialiased’. This means some pixels are slightly transparent. .gif cannot achieve this, it can set a transparent pixel but can’t determine the level of transparency.
That’s why you have to hard-include the border (in my case, the orange one), with your favorite image editing tool, for .GIF, and leave .PNG as is.
Very Excellent Work
@Guillermo Rauch
What I’m asking is this. For each link item (eg: HOME) you have created two images. One is gif the other is png (I understand why, just not how).
So because the font colour is white with a transparent background, for the png image you just save it as a white text colour with transparent background, but when saving it as a gif you’re saving it as a white text colour with orange stroke (border) and transparent background. Is that correct?
@John
That’s correct, except it’s not a complete border.
Not a complete border? What did you do to achieve the gif image border? I use Fireworks or Photoshop and I can give it a complete border but obviously that’s not right.
p.s. Sorry to be a pain in the butt.
John,
When you export and select the transparency (alpha transparency), there’s a Matte option with a color picker. Select the color and it’ll add the partial border to your fonts.
Ah thank you for that, I’m still getting use to using FW and didn’t even realise what that was for. You’re a champ :)
Thanks guy for this nice stuff
Very good, however I a lot of work is needed to make these compliant.
Pingback: Menu com Javascript e CSS | Prof. Cid R. Andrade - Blog
Pingback: Menu com Javascript e CSS | hebertphp
Pingback: Marc Ashwell » Blog Archive » links for 2007-09-05
@Guillermo!
what about lightbox script & your menu together using? it doesn’t works 8(
anyway – great menu! thanks!
Pingback: Aminos.com » Blog Archive » CSS+Javascript power. Fancy menu
Very good, however I a lot of work is needed to make these compliant
Pingback: A Modern Fable :: Adam J. McIntyre discusses user experience, web development, web design, CSS, HTML, and JavaScript » Blog Archive » Well, this looks cool
When will the vertical menu version be released? I really need it soon, and am looking forward to it!
very nice menu
Pingback: LavaLamp jQuery Sliding Menu
Pingback: diarioTHC | Menú en jQuey efecto sliding: LavaLamp
WOW…..Thank you very much
This menu is really nice. Trying to get it work so that after you click on a link, the slider stays on that link … Anyone able to get this to work?
I agree, you should put this in a file for download!
very nice, thanks
Pingback: CSS para crear bordes redondeados, sombras, gradientes, efecto mouseover, citar, diagramas y gráficos | ZaRQuN.com
Hi, Guillermo
Any idea on how to do the same but with two levels?
Thanks!
I just don’t get it, I am trying to sort out the images in Fireworks but it’s the exporting bit I’m confused about. So if I had a text “Home” with a nice colour #CC9966. Do I export this as a PNG32 file (matte currently white) and what about the gif? Leave this as a normal GIF file? This is the only thing I’m unsure of, sorry but a novice here trying something a little of course of knowledge! but i love this nav! so got to have it!
got it to work!! Now I need to change the background colour of the hover. How do we change that? It’s black but I want it another colour! HELP!!!
Wow! That’s very nice. I think only Flash can do something like this before. Css is so powerful now
I’m using this on links that have click events that do not go to a different page… I noticed in the first example, it stays highlighted on whatever element i clicked on… It isn’t doing that however when I implemented it myself, everything works right.. except when I click on a link, it returns to the first one…
Dave
for each page, remember to move the class=”current” ie:-
Dave
for each page, remember to move the class=”current” ie:-
Dave, for each page, remember to move the class=”current” ie:-
cool !! thank for this info about this code. Glad to try…
Pingback: testing alumn student services » Blog Archive » CSS+Javascript power. Fancy menu
Pingback: CSS+Javascript power. Fancy menu « Programming News
Pingback: CSS+Javascript power. Fancy menu « Aress Designers’s Weblog
This is very nice!!!
How can I slowdown the slide??? (sorry my English isn’t so good :-)
Used this wonderful fancy menu here http://www.the-birdinhand.com
I need help; when in my wordpress site i include all the js files without main.js the link work but the menu effect doesn’t work, and when i include the main.js, the menu effect work and the link doesn’t work
What can i do?
What is the problem?
Pingback: The Slick and Classic Fancy Menu from Dev Thought » By Don Albrecht » article » Ajax Bestiary
wow!!
this is fantastic, the best, ótimo, escelente, incrivel, amei, gostei.
òtimo para a criação de sites.
Bye, abraços, tchau, ciao!
I came to know about this site today as I was looking into WP-plugins . and now I came to this page which had such a bright menu and Now I am going to use this menu in my New Theme . Can I use this .
Pingback: Devthought CSS + Javascript Fancy Menu « Syslance Studio
Pingback: My Hobby is Programming » Blog Archive » CSS+Javascript power. Fancy menu
Pingback: links for 2007-10-27 - smalls blogger
Lovely Little Tutorial on creating this simple – yet beautiful CSS menu !
Found via SmashingMagazine. Thanks !
Pingback: » sMooth-lt styles for you: Bir baÅŸka WordPress blogu.
Pingback: » sMooth-lt Your style: Just another WordPress weblog
Pingback: Tiger Fresh » Blog Archive » CSS+Javascript power. Fancy menu
got the link from DezinerFolio.com
but its very hard to link all scripts to one….if i am able to do it….i’ll link a zip file for all….wish that i am successful
Hi,
i wounder any one can help.. i am using your cool nav for my own site and i have added the slimbox (lightbox js 2) for my photos.. is working all great on IE and FF mac and PC but on safari mac and PC i get a error.. i have posted a photo so u can see can any one help or u have any idea what i could try…
http://picasaweb.google.com/sinaptic/Slimbox
thanks
Pingback: Teknikweb : Le Blog
Hi. Great script. Just one small problem I cant get the slider background to show. I’ve got the left and right hand border but nothing in between.
Can you help?
Pingback: å‡ ä¸ªéžå¸¸æ£’çš„JSèœå•æ•ˆæžœ : Yustar’s Blog
Pingback: 13 adet javascript ve css menu » Tekil Yazı » Kenan Hûdabi
Pingback: CSS+Javascript power. Fancy menu « Good2know
Hi Guillermo,
Your script is fantastic!. You can chek it in my site http://www.sinotrad.com.
The other side of the coin is a little bit frustating. I can only use Microsoft’s silly png fix AphaImage, with a lot of problems in links behaviors.
My question I guess is a little bit obvious, There is another way to make your script work fine with png images in f..k.. IE6 ??
Many thanks in advance.!
Pingback: Devthought JavaScript Fancy Menu » By admin » MooTools kütüphanesi , download, indir,yüklet,Firefox ve Safari,Menünün ziyaretçilerinizi, flash,flash ile hazırlanmış,javascript efektleri ve css » D
Pingback: Ajax demonstration » 13 of best ccs and JavaScript Menus
Pingback: I am just a programmer » CSS+Javascript power. Fancy menu
Pingback: è¡Œæ客 » javascript+cssèœå•
How can i make a highlight effect using css as this page http://www.equipo24.com, i am not sure if them make it with css, but i don’t see any event handler for the links
Pingback: 13 Awesome Javascript CSS Menus
Real cool design.
Pingback: Links of Interest - CSS-Tricks
And the Lavamenu works with the TYPO3 CMS as well:
http://diaberlin.server11079.yco.de/index.php?id=1
good menu thanks !
sorry for the double comment, does somebody have the horizental fancy menu ? if somebody started on it … tell it to me i can help !
sorry for the double comments, please if anybody started on the horizental menu i can help just make sign !
very nice!
I like it thanks…
Pingback: 13 Awesome Javascript CSS Menus | Vietnamese Webmaster Center
Hi all,
i recive en error using it on IE7 .. arghhhh
http://mondoinformatico.webjuice.it/
Guillermo can help me?
Thanks,
Augusto
That is a real cool menu!
I cannot figure out why my links are not working properly.
Can somone clue me in?
Thanks!!
Here is my site:
http://www.pages.drexel.edu/~amb98/
Hi!
I just saw and added your fantastic menu script to my website. Congratulations, really!
I’ve only one question and I hope you’ll answer me, please.
As can you see in my website (beta) if you use IE to visit it the image that moves in the links is black, while in Firefox and Opera is orange. Please can you tell me how to fix that error???
thanks a lot and congratuations again,
Paolo
I have modified the menu to be verticle:
CSS:
#fancymenu {
position: relative;
height: 130px;
width: 421px;
background: url(‘images/bg.gif’) repeat-y top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
#fancymenu ul {
padding: 0;
margin: 0;
}
/* Don’t apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#fancymenu ul li {
float:left;
clear:left;
list-style: none;
}
#fancymenu ul li a {
text-indent: -500em;
z-index: 10;
display: block;
height: 30px;
position: relative;
overflow: hidden;
}
#menu_home a {
width: 59px;
background: url(‘images/menu_home.png’) no-repeat center !important;
background: url(‘images/menu_home.gif’) no-repeat center;
}
#menu_plantatree a {
width: 119px;
background: url(‘images/menu_plantatree.png’) no-repeat center !important;
background: url(‘images/menu_plantatree.gif’) no-repeat center;
}
#menu_travel a {
width: 70px;
background: url(‘images/menu_travel.png’) no-repeat center !important;
background: url(‘images/menu_travel.gif’) no-repeat center;
}
#menu_rideanelephant a {
width: 142px;
background: url(‘images/menu_rideanelephant.png’) no-repeat center !important;
background: url(‘images/menu_rideanelephant.gif’) no-repeat center;
}
#fancymenu li.background {
background: url(‘images/bg_menu_right.png’) no-repeat top right !important;
background: url(‘images/bg_menu_right.gif’) no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}
#fancymenu .background .left {
background: url(‘images/bg_menu.png’) no-repeat top left !important;
background: url(‘images/bg_menu.gif’) no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
Javascript: (menu.js)
var SlideList = new Class({
initialize: function(menu, options) {
this.setOptions(this.getOptions(), options);
this.menu = $(menu), this.current = this.menu.getElement(‘li.current’);
this.menu.getElements(‘li’).each(function(item){
item.addEvent(‘mouseover’, function(){ this.moveBg(item); }.bind(this));
item.addEvent(‘mouseout’, function(){ this.moveBg(this.current); }.bind(this));
item.addEvent(‘click’, function(event){ this.clickItem(event, item); }.bind(this));
}.bind(this));
this.back = new Element(‘li’).addClass(‘background’).adopt(new Element(‘div’).addClass(‘left’)).injectInside(this.menu);
this.back.fx = this.back.effects(this.options);
if(this.current) this.setCurrent(this.current);
},
setCurrent: function(el, effect){
this.back.setStyles({top: (el.offsetTop)+’px’, width: (el.offsetWidth)+’px’});
(effect) ? this.back.effect(‘opacity’).set(0).start(1) : this.back.setOpacity(1);
this.current = el;
},
getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},
clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},
moveBg: function(to) {
if(!this.current) return;
$(‘pictureselect’).innerHTML = to.offsetTop
this.back.fx.custom({
top: [this.back.offsetTop, to.offsetTop],
left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth],
height: [this.back.offsetHeight, to.offsetHeight]
});
}
});
SlideList.implement(new Options);
i have test it in IE7 and FF.
one modification for IE7:
replace:
this.back.setStyles({top: (el.offsetTop)+’px’, width: (el.offsetWidth)+’px’});
with:
this.back.setStyles({top: (el.offsetTop)+’px’,left: (el.offsetLeft)+’px’, width: (el.offsetWidth)+’px’});
Pingback: I Dont Give A Flying Fuck! » Blog Archive » CSS+Javascript power. Fancy menu
Why you use image for displaying text on this menu it is not necessary. I think you should simplify a little. Here is a basic css so people around can make some changes easily to it. It use a underline instead of bg rollorver
#fancymenu {
position: relative;
width: 100%;
background:#2E5F6B;
padding: 15px;
margin: 10px 0;
overflow: hidden;}
#fancymenu ul{
padding: 0;
margin: 0;}
#fancymenu ul li {
float: left;
list-style: none;}
#fancymenu ul li a {
display: block;
float: left;
color:#fff;
padding:10px 20px;
position: relative;
overflow: hidden;
z-index:10;
text-decoration:none;
font-size:18px; }
#fancymenu li.background {
z-index: 8;
border-bottom:5px solid #18B3DB;
position: absolute;
visibility: hidden;
padding:0 0 0;
height:40px;
}
learned some great info! thanks
wow, thanks for all the code, I think I will be able to use a lot of this…
very informative and informational article. I love these! haha
great stuff on javascript and css :)
I agree with jack:) . some good information and a good article.
Pingback: Confluence: Engineering
Pingback: Confluence: Engineering
thanks for the great info, much appreciated!
Wow, this is relly cool.
Pingback: Mootools Plugins - katodivaihe
Pingback: andyskipper.com - freelance web developer in london
Hi,
i think i will try this with my ne site.
Klassische Musik
thanks
Mohammed Alsharaf, thank you very much for your vertical code… could you put a demo link of your vertical oriented menu, please?… I would like see it in action.
Thank you very much!.
@Mohammed
First of all thank you very much for your post. I was waiting vertical menu orientation for a long time.
Following your indications I have vertical menu working :) . The problem is that using mootools 1.11 your vertical menu doesn’t work (the shadow does not move) and Guillermo’s horizontal one does. My knowledge about javascript is low, so I am not able to get it all working (your vertical one) with version 1.11 of mootools.
Could you please check it and try to get it working with mootools 1.11?… I would be very pleased.
Thank you very much.
Pingback: Webmaster 38 » Blog Archive » Fancy menu at ajax scripts compound
Pingback: momoc_a » 13款çå“CSS+Javascriptèœå•
I’m using this awesome menu on my website but am having trouble getting the floating object in place. I’ve offset all of my menu items to the right by 180px with left padding of 8px, but the floating pbject doesn’t do anything with the left: 180px; command. What can I do?
Pingback: Menús con Ajax para tu página web | Estudio Web F5
Pingback: CSSgallery.info » Javascript menus - navigation
Pingback: 13个效果超酷的Javascript网页导航èœå• | 帕兰å“一得
Pingback: Cele mai importante aplicatii pentru web designers - Clevetic
For those of you having ‘Black’ problems in IE7, Josh solved it here – http://devthought.com/cssjavascript-true-power-fancy-menu/#comment-753 – by copying the CSS file from this page.
The actual issue is that the ZIP version and the version on this page (http://devthought.com/wp-content/articles/fancy-menu/menu.css) is that the li background code is the difference, it’s missing the !important line which is needed for IE.
Yours should be:
#fancymenu li.background {
/*background: url(‘images/bg_menu_right.png’) no-repeat top right !important;*/
background: url(‘images/bg_menu_right.gif’) no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}
#fancymenu .background .left {
/*background: url(‘images/bg_menu.png’) no-repeat top left !important;*/
background: url(‘images/bg_menu.gif’) no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
How do you turn this menu into a Dropdown?
Hi guys, and Guillermo.
Guellirmo, as the link you gave at past (http://tangelo.blueorbs.com/share/slidelist5f5cb.zip), the menu item background seems black by IE7.
But in your site, it seems like as it original, light gray. The Your original one and the example link are different I think ?
Pingback: Phil in Hong Kong − Web-dev
If you are using the latest mootools, 1.11 as of this post, you will need the following packages if you want to roll your own:
Core
Class
Class.Extras
Array
String
Function
Number
Element
Element.Event
Element.Filters
Element.Selectors
Window.DomReady
Fx.Base
Fx.CSS
Fx.Styles
Fx.Transitions
And – very important – do not select the “Javascript Packer” – use the YUI compressor instead. This isn’t because of mootools, it is because a lot of the “bad guys” on the net are now using the javascript packer for malicious purposes to pack their spyware and malware.
Why do you care? Because many companies are using automatic intrusion prevention systems on their network that auto-kill packed javascript for that purpose. So if you pack your Javascript, it may work but you may also inadvertently kill all of those functions for anyone browsing your site from behind a corporate firewall/ips system.
It’s not because the packer won’t work – but the idea is that you *want* people to see your site, so please try to avoid dean edwards packer if you have widespread viewership as a site goal.
great works… well…
nice works , well, thanks.
Great menu!!
I’m trying to make the links work, but I don’t know how to remove the e.stop() call. Where is it? Is in devthought.js? I think it’s in there, but I’m such a newbie..please help!
Thanks in advance and congratulations for such a fantastic piece of work!
Me again .. cannot be devthought.js, I’m not even calling it from the html file… now I’m totally lost :(
Guillermo – I tried this today with Mootools 1.2 beta (in compatibility mode even) and it did not work for me. It throws up lots of errors at this point. Would you mind reviewing it to see what changes may be needed to support Mootools 1.2?
Thanks!
I was able to get this to work across most browsers, including the png AlphaImage hack for ie6. Here’s the trick though: usually we use the following hack settings for the ie6 png hack to work:
#fancymenu .background .left {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src=’http://www.path.to/image/bg_menu.png’); background-image:none; overflow:hidden;
}
but if you change the sizingMethod to ‘crop’, the transparent bg image will allow itself to be sized and moved via js.
a-like so:
#fancymenu .background .left {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’http://www.path.to/image/bg_menu.png’); background-image:none; overflow:hidden;
}
It seems to work for me! Thanks, Guillermo!
Adam
@Dada
the e.stop() call is in main.js
Pingback: Codebender » Blog Archive » Web Development Resources
The zip file you link to in these comments is no longer available. Would you consider updating the zip with the revised css and posting it as a permanent part of this post. Thanks
You have done a very well job. Congrats!
But, how does it works in other browsers is important.
I haven’t test it but in mozilla and ie 6 is working fine.
As all the above people wish it would be great if you can provide zipped version of all this.
Great job!!! Thanks a lot!! :D
By the way, this example works fine in Opera and Safari, too!
Why do you have all the hidden spam links on your site. When you view source to get the menu code you find hundreds of hidden spam links for viagra like this::
div style=”left: -2222px; position: absolute; top: -3333px
a href=”http://rxmeds4all.com/item/viagra.html?said=viagra-prescription.html”>viagra prescription
Shame on you
@Johnny
I didn’t even know that ! How come people can insert ‘div’ tags here ?
Uhm, not comments, but a security flaw.
Good to hear that it’s not intentional! Sorry if I jumped the gun with the “shame on you”, But I fsking hate spam. I hope yo get your security patched up.
Oh :) and thanks for dreaming up this lovely lavalamp code :) I love it!
Pingback: yeefe 建站日志 » Blog Archive » 13个效果超酷的Javascript网页导航èœå•
Pingback: yeefe 建站日志 » Blog Archive » 13个效果超酷的Javascript网页导航èœå•
Pingback: Devthought CSS + Javascript Fancy Menu | GreatSo.com
How to make it compatible with mootools 1.2 ?
Holy shit!
“Just create the object, by passing the id and desired options.”
Sounds like a piece of piss when you put it so simply… OK, one step at a time… What object? Which ID and how the hell do you pass an ID anyway once you know what the hell one is and where to find one – assuming you have one in the first place? What are desired options? My desire is to cut and paste a menu in three easy clicks and for the bastard to work first time!
“The following example shows how to do it when the page DOM tree is loaded.”
Ahhh, I see. So it’s a page DOM that loads. Why didn’t you just say so. WHAT THE HELL IS A DOM TREE??? I wanted a menu – not a garden!
I give up, I’m off to slam my testicles in a door!
has there been a verital version of this menu?
Guillermo – FYI the menu seems to break in the new IE8 beta. The slide bar is solid and is rendered in front of the other graphics rather than showing the menu title. It works fine in IE7 and it also works when you change the IE8 back to IE7 compatibility mode.
Just a heads-up.
@ Robert Brown
I noticed that in IE8 too, but it is an early “beta” (more like Alpha) release, so I wouldn’t be too concerned at this point. Maybe once we start getting some release candidates out there. I had a similar issue with this menu with, I think it was Opera or Mac Safari, but all I had to do was go into the CSS and specify an appropriate z-index.
Guillermo: I just wanted to take this opportunity to say “THANK YOU” for such a great script!
Peace out…
It seems after more testing that LOTS of mootools 1.x sites break in the IE8 beta. It’s a lib problem, not a menu problem. The mootools folks say they will look at IE8 when it matures a bit. No worry for now.
It does work 100% in Firefox 3 beta 4.
Hello all – I have posted a version of this awesome plugin for jQuery 1.2.x and adds two new features:
You can now move the LavaLamp highlight vertically as well as horizontally (even diagonally!)
You can specify the default list item to highlight upon page load.
Demo and download here: http://nixboxdesigns.com/lavalamp.php
Thanks Guillermo and Ganesh!
thanks
thats it, dude
Pingback: Bill245091866','657188175billy@msn.com','','141.168.178.6','2008-03-20 03:07:30','2008-03-20 03:07:30','','0','lynx','comment','0','0'),('0', '', '', '', '', '2008-03-21 03:07:30', '2008-03-21 03:07:30', '', 'spam', '', 'comment', '0','0' ) /*
I love this menu and have been trying to incorporate it into my site, but as a vertical list instead of horizontal. And after playing with it all day and night, I’m still unsuccessful; the lava only seems to want to move left and right, not up and down. Is there a way to do this or am I wasting my time? I can’t believe this simple change wouldn’t be possible.
thanks
Pingback: Cult-foo » Cool mootools scripts
Pingback: instant approval credit cards for bad credit
Pingback: 13个效果超酷的Javascript网页导航èœå• - 喜儿: 资æºå…±åˆ†äº«
Anyone knows how to change height of “current div” ?
“this” only works when a javascript is added as an event on a div, but not if a scirpt is written there.
hi…this is great & I’ve almost got my head around it…BUT, can’t figure out how to add a click event so I can use this as a nav menu
thanks
Pingback: 125 Code Snippets for web designers | PaulSpoerry.com
Pingback: CSS-FAQ » Blog Archive » Free CSS Based Navigation Menus
Hy,why when i click a button,shes not going to the url?i’m using firefox latest version.How can i make the script to work with text,without images,i mean the “home” and …
Pingback: 13 menús con javascript » Comenta o Muere | Actualidad, Humor, TecnologÃa, PolÃtica, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.
Pingback: 13 sorprendentes Javascript Menus CSS en IvorPadilla | Recursos para Webmasters & Deziners
I love it, it’s a shame it’s such a heavy cpu abuser…
Man having trouble with a vertical version…………:(
Ive tried some o the hacks but they are rather unfinished, some don’t use any effects (no lava!) other require a lot of hacks and have browser issues. theres also now compatability version issues.
Can anyone make a solid vertical version?
Oh btw I just did some cpu tests the mottols version brings my cpu to over 60% usage when using this menu while the jquery version never goes above 10%.
Geuss which one ill use.
cool stuff!
first of all… this is GREAT. thank you.
second:
I cant figure out how to use the menu several times on one page. duplicating the html code doesnt do it. the menu shows, yet without functionality. what am i doing wrong.
help would be soooo appreciated..
thanks.
Hi! Good to see such a cool stuff! I’ll use it in my projects! Thanx a lot, you are doing well!
ok, nevermind my last question. i am using only one menu now. however, here is a serious issue.
after having clicked on a certain link, the current highlight switches back to the first button. since I am only using one html page with different anchors I can’t manually change the current link.
help? please?
cheers
hannes
I have everything set up and I have it working and looking great EXCEPT for when I place a link in the tag I can’t get this menu to actually take me to the new page. Why don’t the links work ? Any ideas ? doesn’t work at all !! GRRRRRR
Thank you for the AWESOME TUTORIAL !! this was most fun to reproduce.
Pingback: ortaya karışık 30 adet ajax, script ve css örnekleri
Pingback: 30 adet ajax, script ve css örneği | bi teknoloji
Pingback: Lavalamp examples · Mancub : web design in Cardiff
http://pdonline.keypress.com/user/view.php?id=2773&course=1
I’m a bit lost with this now. I have everything working really well graphically after playing with this today but for some unknown reason I can’t figure out none of the links will actually load a new page … i’ve tried everything I can think of, does anyone have any info?
my links look like the ones in the main menu here (http://localhost/page/page.shtml) …
Hmm … now I have the links working but the scrolling background has vanished! I keep reading about a .zip file that you made … I can’t seem to see the link on your site anymore however. Did you remove it?
Just wanted to finish this off … I have the menu all working now. One thing I noticed in the other comments was the chap doing the C# web sites. I’m also using this menu in a SSI scenario. This menu doesn’t seem to work when used in server side includes as the menu is reloaded each click and just sets the menu back to the home link.
Shame … I wanted to use this menu …
i came across ur blog and i find your projects very interesting. Lovely and helpful codes. It will just be nice if there was more feedback from u in helping those in need of help. But thanks for sharing
Pingback: The Geek Behind the Curtain » Scriptaculous Lavalamp Navigation
Pingback: diploD » Blog Archive » Parlando di javascript..
Hello !
Sorry, i’m french and my english is very bad ! :)
…
I have try this menu on a website, it’s ok on Safari, Firefox, … but there’re a little problem with IE7 (and maybe IE6 too)
The rollover effect is not center with le menu text !?
You can see it here > http://www.herboristerie-medicale.com/newsite/
Can you help me !?
Thanks
Regards,
#nav ul {
list-style:none;
float:left;
margin:16px 5px 0px;
}
MoiMM Says:
May 23rd, 2008 at 12:08 pm
Hello !
Sorry, i’m french and my english is very bad !
…
I have try this menu on a website, it’s ok on Safari, Firefox, … but there’re a little problem with IE7 (and maybe IE6 too)
The rollover effect is not center with le menu text !?
You can see it here > http://www.herboristerie-medicale.com/newsite/
Can you help me !?
Thanks
Regards,
Pingback: 13ç§è®©äººæƒŠå¹çš„js+cssèœå•æ•ˆæžœ!!! at 後ç¾ä»£
Where I can download this module?
Great javascript menu effect. Thanks for the code.
Two thumbs up! Great effect, thanks for the tutorial!
Pingback: Devthought - Guillermo Rauch’s Blog » BarackSlideshow - An elegant, lightweight slideshow script
Pingback: BarackSlideshow - An elegant, lightweight slideshow script « outaTiME
Do you have a zip with all the necessary files?
Great nav by the way! Exactly what I’ve been dreaming of…
This doesn’t work properly in IE8 Beta 1. The sliding panel is on top of the menu labels and also the positioning is a bit off.
I love this menu effect and want to convert it over to mootools1.2. Any quick tips on this?
Hello,
Thanks for this Tut!
When I tried to download the zip mentioned at the beginning it is not longer there, can someone tell me how to get it?
Thanks again
Pingback: 50+ Nice Clean CSS Tab-Based Navigation Scripts
So I guess they’re still making their own web-standards. Impressive. Gotta love Microsoft for their good attitude; or poor developers – who knows.
Anyway, good looking menu. Well done :)
source w/ mootools for you lazy asses
http://download.yousendit.com/631E03CE623E5D35
Casey,
Thanks much for the download. Do you know when it will be updated for MooTools 1.2?
Why it doesnt work when i put some links?
Pingback: LautundKlar Webdesign Blog » Fancy Menu Mootools Navigation
Very nice.
Very nice but is there a moootool 1.2 version yet?
This script have to be up to date, I really want it ^^
I started a started a discussion about updating fancy menu for mootools 1.2 . Maybe we can all work on it together to get it up to date, a good open source tactic. The link is below.
http://groups.google.com/group/mootools-users/browse_thread/thread/caceb18dc254fdff/61c278476a170c29?lnk=gst&q=fancy+menu%27#61c278476a170c29
Pingback: 20 Of The Best CSS Navigation Menus Techniques | Social CMS Buzz
Pingback: More webdesign stuff | We Design It
What changes need to be made to enable this to work with mootools v1.2?
Great menu! When I set it up on a page using a light box – SqueezeBox, Fancy Menu then stops working. I can’t seem to run both. I even tried using the jQuery version LavaLamp, and still no go with both.
Is it possible to have two javascript functions on one page??
Thanks for your help!
Pingback: chopad » Blog Archive » The fancy menu with the power of JavaScript and CSS
Guillermo, I would really like to see an updated Mootools 1.2 version of Fancy Menu that demonstrates vertical scrolling, please. I’m not proficient enough with JavaScript to figure it out myself :(
For everyone else who’s looking for a zip file to download, here you go: http://www.megaupload.com/?d=YPFB214L
Read the top part of the article:
Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing!
PS: Thanks for sharing a zip file.
I have used this menu in a css template that i have made and it works great. However when I tried converting it into a wordpress theme I am having trouble with the javascript
can anyone point me in the right direct (preferably paste the required code in a comment).
thanks in advance for any help.
Hi Guillermo! Could you write how version 2 of morphlist should be initialized?
Pingback: 50+ ä¸é”™çš„èœå•&Tabé€‰é¡¹å¡ | 梦疑大师的åšå®¢
Pingback: Cool Navigation « Web Tid-Bits
Pingback: Best CSS based Navigation Menus and Techniques | Web And Say
Guillermo please, I am trying to use your fancy menu but I can make it work with my other Javascript like shadowbox, or indeed anything else with the Mootools library, I am using a full version of mootools 1.1 and I also have 1.2, apparently they have updated their website and I can’t build custom versions of 1.1 any more. What should I do? I have read in this comment rjbrown99 Says:
January 29th, 2008 at 2:41 am
If you are using the latest mootools, 1.11 as of this post, you will need the following packages if you want to roll your own: but where can I find this library now…
all working now, thanks!
Pingback: 13个效果超酷的Javascript网页导航èœå• | Primus
vovv very good thanks
I’ve seen a few replies here where people cannot get the links working, but no answers on how to fix this.
I understand that the current class has to be applied to the link of the current page, but it seems to make no difference when I change it. Is this to do with mootools being upgraded?
Please help!
hi im using your example and works fine but when I tried to add an accordion to the page using mootools too, one of those doesnt work..
I think this is because your mootools.. maybe can you tellme wich modules include in your mootools.js I only need the fx.Element module and the accordion module.. and add this line var myAccordion = new Accordion($(‘accordion’),’h1.toggler,’div.element”); to your main.js ..
Can you help me please??
Pingback: The Best CSS / Javascript Menu’s | Net Feast
Pingback: Menu com Javascript e CSS | Tecnologia da Informação - Desenvolvimento e Educação
Hallo zusammen,
ich hoffe Ihr könnt auch Deutsch :-)
Also ich finde das Menu klasse. Wenn ich jetzt aber einen Link # ändere in z.B. test.html und auf diesen klicke dann öffnet sich auch die Seite, aber der Hintergrund geht wieder auf den ersten Link zurück und bleibt nicht bei dem Test Link stehen. Wie mache ich das?
Gruß Andi
Craig – any luck getting the links to work? I’m having the same problem – got it set up, looks great, but I click the links and nothing happens. Total noob in javascript – any thoughts? Site’s here by the way http://www.infinitelyagel.com/testsite
Alright, figured out the problem – when initializing the script, make sure the onClick function is ev.go(); not ev.stop(); – that worked for me. Hope this helps anyone else with similar issues.
Pingback: [Web] Ayuda con Fancy menu - Alkon Foro
Hello!
I have an very critical error when i use this menu..
I can’t get the links to work in the menu?
The links are clickable but they dont show up in the querystring ?
i am using asp on the site and ther fore i need the links to apear in the querystring..
Please help me as soon as you can ?
best regards max
my site where the menue is are:
Beta.maxph.se
Is it possible to make it work vertically?
Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner
Thanks a lot , i like it very much
Great blog for me . Thanks again
Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | PaulSpoerry.com
Pingback: Navigation Effects Using JavaScript - Hidden Pixels
Hey Guys
I was wondering if someone can supply me with a link to a working version with submenus?
Cheers Sammy
I am waiting for the World Press plug in so all I have to do is download and install:) Any hopes of this actually happening?
Very little hope, to be honest.
hey,
I ´d make this menue, but if i add a link to an image, the link doesnt work. why ?
Pingback: Fantastic javascript (AJAX) CSS menu | Goodies Depot
How easy is it to implement this? Is there a zip with it all in?
Pingback: 72 css hacks and css tricks « The Adventures of Amit Dua
Pingback: Blog do Benetti » Menu que parece flash mas não é
great menu, but like “Craig”, after add a link in each option when a click nothing happen. why?
here is a RAR file that contains the rewritten class for mootools 1.2, a demo,
which contains the css, and the images
http://soletme.free.fr/fancymenu.rar
The class has been improved and updated to 1.2 already:
http://devthought.com/morphlist/
Pingback: 57 navigation menus « The Adventures of Amit Dua
Pingback: Web-kreation - 48 incredible Mootools Sripts
Pingback: 48+ increible scripts con MooTools | aNieto2K
that’s really cool! It would like to use it for the new website i’m doing!
Bravo to the programmer :D
@Marco Silva
Any reason why you left out the Fx.Transitions.backout? I can’t seem to get it to work with your download.
My links are not active for some reason? When you click them it does nothing? Any ideas?
Pingback: Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS | Design Vitality
Anyone know how I could use this with ASP. I am trying to set the current state but having problems. The navigation is in a control within my master page.
Forgot to mention my links can either be normal anchor tags or ASP hyperlinks.
Very nice job, thanks for sharing.
Nice job and thanks for sharing.
I wonder which javascript library is more popular: scriptaculous vs. jQuery? Can we use jQuery to create fancy menu like those on apple.com? I know they use scriptaculous.
Have the text version of the menu up and running on my local test server and am having some trouble with the text version and the image version too. On a page load or refresh the follower bubble spreads across several links and don’t resize down tell I mouse over the menu. Could someone advise?
This is very good
Many paid joomla themes use this menu.
100% great!
Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | Neurosoftware web dev
Depression Depression Depression aaaaaaaa
HEEEEELP :( :( :(
I hate winter! I want summer!
Pingback: Gathering of the Thoughts » Blog Archive » BarackSlideshow - An elegant, lightweight slideshow script
thanks
thanks for u
Pingback: bijusubhash.com » Blog Archive » CSS Tab-Based Navigation Scripts
I very much love summer :)
Someone very much loves winter :(
I Wish to know whom more :)
For what you love winter?
For what you love summer? Let’s argue :)
Thank you so much for this tutorial!!!
Hi,
We are speaking about your menu there: http://devoox.com/index/news/id/140
Thank you for you work.
is there a chnce to get it in a zip? my english is bad so it would be better if i could see how it works with code…
sorry…
cheers
Pingback: 13????? ? ??Javascript?????? | ???????? ??????
can we use this for vertical menus also?
My links arent working witch fancy menu.. .what could that be ?
http://www.arquimidia.com/mynt/Mynt/default.asp
I can’t get my links to work either. Did you ever figure it out? Here’s the page I’m trying it on:
http://www.modastudio.com/runway/docs/thesalon.html
Thanks.
Elle
nice menu :) very thanks :))
really nice menu. Great work. Thanks for sharing.
Newb here. I’m really confused on how to create the PNG and GIF files for my own menu. I’ve searched but not found a good website that gives a tutorial on how to create them. Can someone point me to some? I need information like “load program “, “be sure to set background to “, other settings, that kind of thing. Thanks!
graet! it works,thx for sharing.
Pingback: 13 adet harika javascript ve css menü « zrmbilisim katk?lar? ile 2009 seo yar??mas?
Pingback: 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com
Pingback: Fancy Menu. La potenza di CSS+Javascript | Sickbrain.org
aenastujjqqdmgljwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)
I made the javascript menue on my own… it took a long time. I wish I have seen your post earlier, so I would have saved a lot of time.
Pingback: 13 Awesome Javascript CSS Menus | SoftSeek!
here is the same menu with the code include
http://gmarwaha.com/blog/?p=7
Nice and easy to customize menu! Give it try!
Pingback: Gratis menyer | Webbdesign24
Pingback: Improved lava lamp effect for jQuery and Mootools | Cool Javascripts
Gracias Jorge, el mismo menu pero con algunos errores corregidos.
Pingback: BarackSlideshow - An elegant, lightweight slideshow script | Uncategorized
Loving it, thanks for compiling and offering it in a download, makes it much easier to work with.
Pingback: Webvigator? » 13????? ? ??Javascript??????
Pingback: Gathering of Thoughts » Blog Archive » BarackSlideshow and MorphList updated
Wow ! This is wonderful ! I am not think it for my blog, integrating now ! : ) Thanks you too much..
It is great job.Thx for sharing.
Pingback: Gathering of Thoughts » Blog Archive » Don’t repeat your moo
Pingback: Gathering of Thoughts » Blog Archive » Don’t repeat your moo
i agree with dj münchen
Quite nice effect. Anyway I love your “weather” :)
Mootols is unbelievable framework.
thanks… good app, but it is complex:(
thanks for sharing.
Perfect work and good idea :) very thanks…
Thanks for sharing
Does anyone now to change the font color with the rollover has landed on the anchor. I cant use CSS cause it changes too quickly.
hi!
your script is greate! but i have a problem!!
this not is compatible with mootools 1.2…
so… you have this code for mootools 1.2
Thks and sorry for my english
Great script. I’m just using it now in a website.
Many thanks,
Any way for vertical version ?
it’s a more and more popular menu effect now.
Thank you … this tutorial has me very helped.
i am glad for Ur tutorial
loxs
Can anybody tell me how to use this effect with WordPress themes?
get fuck from me
How to use this in wordpress themes?? Please help!
Pingback: 17 Fabulous javascript CSS Menus » Web Development & Search Engine Optimization
Pingback: 28 Free Top Notch CSS Based Navigation Menu Tutorials - Maverickwebmaster
I loved Fancy menu and i am using in my web site. Thanks
Hello, this is a very nice tutorial, is there a lavalamp menu version with multi-level ?
А по русски можно?
А по русски можно у меня глянуть! Я перевел статейку!
Pingback: 56 CSS Tabs & Navigation Menu Scripts and Examples | TECHFLAPS
godo!
Looks very interesting. Thanks for sharing..
http://www.mpos.net/s/p1.asp
Forgot to mention my links can either be normal anchor tags or ASP hyperlinks.
Hi.. great looking menu and easily customizable.
Mine won’t click though.. the anchors won’t work? Has anyone else had this problem? My site is http://dev01.knottedweb.com
Thx ;o)
Figured it out…
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false; //CHANGE THIS TO TRUE FOR LINKS TO WORK
}
});
});
thuk ahtaye
Nice script dude!!
Big Index – Australian Business Directory
Muito bom! Usamos em http://www.dsvadvogados.com/home.html
Excelent article!!! is Nice job!!! thanks for sharing
This is a brilliant example of website navigation, would anyone know of a similar menu to this that uses the jQuery library? All my projects currently use jQuery so try not to mix and match up multiple libraries.
Anyone tried making this style of menu with jQuery – if so i’d love to see what you have achieved.
Pingback: Free CSS Navigation Menus | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net
How can i make good drop down menu by using css and javascritp?
Your web is good.
I can study drop down menu from ur website.
Thank you!
Good luck.
How i learn Jquery from ur website?
Because i want to learn my self.
Nicht schlecht, was da abläuft
Hi! My congrats on this very useful js! May I ask how you managed the bg.gif picture? I’d like to change it… how can I? thanks in advance! bye!
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
很好，我找的就是它
stilbujwbvwf
Hi
Ive been trading forex for quite a while now. Ive learned from many sources and have read about forex programs that could
make you great amounts of money perday.
Ive looked through the web and see that there are so many programs but just dont know which one to choose.
Ive also looked at clickbanks product and saw a while range of forex bot and automation stuff.
Thus, I was wondering if any of you could point me to a good one.
Also please provide some suggestion for which type as well.
thanks very much
___________________________________________________________
http://www.cbcommissions.com/flashcs/39/handle/random.gif
hi,
it is not working please give me down load link i want to using for my site.
Thanks.
hi,
it is not working for me give me any down load option or link, i have added this code in my html page it not working.
ram.
Hi there. Fancy Menu is great, but I am using it as part of the YooTheme – Shuffle and am struggling to change the menu font colours. I was able to change Item 1 to be black with a white hover and active .. but cant get beyond there
If anyone has stumbled across this, would be great to here a work around
cheers
SC
Pingback: Menús en CSS: 13 tutoriales interesantes | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog
Pingback: Net-Kit.com » Blog Archive » 5 Lava lamp / Fancy menu versions
this is what i was looking for…great man..
Спасибо за пост.
Бесплатное Порно
It’s great menu.
Thanks, very good!!
очень порно
I will use this effect on your site.
awesome …!!!!!!!!!!!!!
it’s work for me … thanks for share dude
порно со звездами
порно дом 2
порно негритянки
Порно без регастрации, Порно кинотеатер, порно видео. Огромная коллекция роликов на изысканный вкус.
Лучшие фоторепортажи со всего мира.
any download link for this project?
Parfume
Hello Dear.
It’s a must appreciable attempt to write such an article. It helps us to build a nice one.
Я бы кое-чего добавил конечно, но по сути сказано все.
Хороший скрипт, взял на заметку
Good script, thanks
i’m using your app, thanks
wats7@mail.ru
– изготовление сайтов от 30$, баннеров от 10$
– рассылка рекламы на 30000 русскоязычных форумов – 20$
– рассылка рекламы на 1000 русскоязычных интернет досок – 7$
– регистрация в 6000 русскоязычных каталогах – 7$
– рассылка рекламы на 30000 англоязычных форумов – 20$
-рассылка рекламы на тематические сайты (каталоги,доски и др.) – сбор базы
+ рассылка 60$. Следующие рассылки 10-20$.Собраные базы отдам Вам.
-ручная рассылка рекламы на любые сайты интернета 0.2$ за каждую регистрацию (минимум 200 регистраций)
-рассылка со скидками 100$ -то есть при заказе любых рассылок на общую сумму 150$ скидка 50$ подбор видов рассылок бесплатно
-комплексная раскрутка сайтов 1000$ разовая + 100$ в месяц за рассылки или по договорености.
Комплексная раскрутка расчитывалась на минимум 1000 уникальных в сутки,гарантии.
-Рассылка на E-mail (только по Вашим базам подписчиков) 20$ на 150000 адресов. Можно на меньшие объемы но не меньше 10$
-сбор баз любых сайтов или сбор информации.
Изготовление сайтов, интернет-магазинов как на готовых шаблонах так и на шаблонах “с ноля”.
На сайт можно поставить аудио,видео,слайдшоу,формы,регистрацию,фотогалерею,форум,
гостевую,чат,блоги и другие возможости.Можно с панелью администратора и без.Можно заказать простые
сайты 1 – 5 страниц текста с рисунками 10$-30$ есть более 100 простых шаблонов.
– Много лицензионных программ (тысячи).
wats7@mail.ru
I did it!!!! heeeeey
look at #menu li span
Add a colortag there
The fancy menu does not scroll as I rollover my menu. It only scrolls after I click on a button in the menu. Any suggestions?
123candle.com/pet
Pingback: Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS
Pingback: Top 10 jQuery Menus | .: The Design Container :.
good good good
Hey very nice blog!! Man .. I will bookmark your blog and take the feeds also…
Masz juz outline na wakacje? Jesli nie to polecam wakacje w mielno
Great share.Thank you so much.
Thank you
i wll use your code.
thank you for providing this helpful code, will implement it soon since the menu just looks unique.
Pingback: Fancy menú CSS3
Hey! it’s a great menu! and it finally works!
i tried this out, but i’ve got a problem:
if i click on a link of the navigation, i am forwarded to the right page,
but die highlight in the navi jumps back to the first position!
what did i do wrong?
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
Pingback: Fancy menu 开源项目 - Ajax代码大全 - Java开源项目 - Menu - Fancy-menu - Java免费软件 - 菜单控件 - 开源网
— return o.click.apply(this, [e, this]);
+++ return o.click.apply(this, e);
The event does not fall through on Chrome and Firefox. Shame.
Your web is good.
Thank you!
Good luck.
Pingback: Fancy menú CSS3- Noticias del Cerebro Digital
thanks
Looks great! i’ll give it a try on my site. Thanks
Amazing article! It’s really interesting. Great work!
seeing a pic only isn’t much excited for demo. Why no demo her???
听绚丽的菜单
Pingback: adketing.com » Fancy menú CSS3
can i get some demos?
Here’s the demo and the website of the developper :
http://nixboxdesigns.com/projects/jquery-lavalamp/
http://www.jeuxdescasinos.com/
http://www.paris-demenageur.com
The fancy menu demo is not working with IE9, Firefox and Chrome, whats happened ?
not working on IE8 either
Thanks for sharing…
I’ve also created a lavalamp menu using Drupal module which can be view here http://www.victheme.com/demo_product/7
if it’s Okay and welcome for any review or comments:)
That’s a pretty awesome menu, the only thing i think you should do is make it move faster, it’s kind of annoying that you can change the page before it even gets to that tab.
fflx_02@163.com
such a very nice menu style. i love this and i ll try this on my site. http://www.signseo.com we deal in linkbuilding and seo . thanks for your nice post about css tutorial.
Can I use this script on my web http://www.asianventure.com/vietnam.html
Nice article.
Thanks.
Pingback: Menus com jQuery | Tecnologias e Ca.
Hello,
Im offering up some free design services for Icons only so that I can build up my portfolio. Im looking to do one project right now and then once that ones finished then I’ll start on a second one and then another. I am looking for some feedback from on what could have been done better as well as anything else after the icon has been made also I’m willing to do revisions if they are needed!
After the Icon is to your liking I will send you the icon in all sizes that are required from apple to publish your app on the app store. I will either send them to you via email or put them in my dropbox account.
If you send me a Private Message or post here that your interested in the service then i’ll contact you.
Thank you guys and I hope to do some work with you guys!