JavaScript drop down menu using Mootools 1.2
Thursday, July 31st, 2008 in MootoolsI’ve been using Mootools for some time by now but this is my first article on it. For those of you that don’t know what Mootools is, I’ll tell you only this: It’s my life saver when it comes to JavaScript. The moment I found out it exists, I started using it and enjoyed every moment. Go check the official page for more details.
In this example I will present you a very easy, unobtrusive way to create a drop down menu. We will need the Mootools core build and the Fx.Slide component found in the More Builder.
The HTML looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="menu-container"> <ul id="drop_down_menu"> <li class="menu">Menu 1 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> <li class="menu">Menu 2 <ul class="links"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> </ul> </div> |
You can add as many nodes as you need into the #drop_down_menu list and as many links as you want in each .links list. The script will take every node from the #drop_down_menu and generate the drop down as shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.addEvent('domready', function(){ $('drop_down_menu').getElements('li.menu').each( function( elem ){ var list = elem.getElement('ul.links'); var myFx = new Fx.Slide(list).hide(); elem.addEvents({ 'mouseenter' : function(){ myFx.cancel(); myFx.slideIn(); }, 'mouseleave' : function(){ myFx.cancel(); myFx.slideOut(); } }); }) }); |
And the CSS for all this is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | #menu-container { display:block; position:relative; width:700px; margin:0px auto 0px; font-size:11px; } #drop_down_menu { display:block; position:absolute; clear:both; margin:0px; padding:0px; text-align:left; list-style-type:none; text-align:center; width:700px; float:none; left:0px; top:0px; } #drop_down_menu li { font-size:12px; font-weight:bold; float:left; color:#11a2db; padding:5px; cursor:pointer; background:#333333; width:150px; } #drop_down_menu li ul { margin:0px; padding:0px; list-style-type:none; padding-top:10px; } #drop_down_menu li ul li { display:block; float:none; clear:both; } #drop_down_menu li ul li a { color:#FFFFFF; font-weight:normal; text-decoration:none; display:block; } |
And that’s it. You got yourself a cool drop down menu. This was tested on Firefox 2 and IE6. If you find errors in other browsers, please let me know about them.
Related posts
Was this useful? Show your support.
110 comments
Hi Constantin!
Thank you for this menu.
So my question.
Is it possible to create condition?
elem.addEvents({
‘click’ : function(){
myFx.cancel();
myFx.slideIn();
this.addClass(“hover”);
if (!!! click!!! – is ok, not needed click again – need start this function
‘mouseenter’ : function(){
myFx.cancel();
myFx.slideIn();
},
},
‘mouseleave’ : function(){
myFx.cancel();
myFx.slideOut();
}
How to add this function? Do you have any solution?
Thanks!
Hi Sergey,
Sure it’s possible. See MooTools docs for Element:addEvents to learn how to add multiple events to an element.
Hey
This is great and just what I was looking for as jquery dropdowns I have tried seem to conflict with the cms I use. One thing though, bearing in mind I’m complete newbie to mootools / jquery etc. When I have loaded your demo in Chrome, Safari and FF, it all works but initially as the page loads, all of the submenus show up.
Any idea why this might be?
Cheers again!
Sorry just looked at older comments – just ignore me! *SLAPS FOREHEAD*
:) don’t worry about it. Let me know if I can help with something else or if there’s a specific script you might wanna see here.
Hi,
Thank you very much for that script, it work well.
But i want to generate by ajax other drop down menu like that, for that i must change #drop_down_menu to CLASS as .drop_down_menu, but it doesnt work when i use a CLASS and not a ID in my CSS. please help me =)
It’s actually quite easy. In HTML and CSS, set ids menu-container and drop_down_menu to CSS classes and change the script from:
$('drop_down_menu').getElements('li.menu') ...to
$$('.drop_down_menu').each( function(list, i){list.getElements('li.menu')...
Hi and thank you for a great menu solution.
I was interested in what Rosie asked above
- on page load all the sub menus are visible. Is it possible for the sub menus to load somehow in the background and not be seen at all until mouse-over?
Thank would really add-to a nice piece of work.
You could do this by CSS and some scripting. Basically, the idea is to make the lists not visible (display:none) and after page load, from javascript, set it as display:block or whatever. This should do the trick.
Can you pls give us more info about how to do this, or example. Thanks
sry from me too, found solution in older comments, but this “prev( )” button is invisible :D, you should change this somehow.
You’re probably right, sorry for this. I’ll have to rethink the whole thing, there are many things at the moment that need improvement. Anyway, if you ever need info about something, let me know, maybe I can help.
how to make it work with submenu?
Well, haven’t thought of that, sorry. This is just a very simple, very basic example of what you can achieve with few lines of code.
I’m having trouble in Safari on a Mac. I have a nav bar with 4 links, only one has dropdowns. When I click on the other three navigation links, the dropdown menu briefly flashes on. Any idea of how to solve this bug? On all other browsers, it works fine.
Thanks so much!
Hi! awesome menu script. Can you tell me how to set a duration for the menu to stay visible rather than just dissapearing as soon as you mouse out? Ive been reading the mootools transitions docs and I cant seem to get it to work :(
help appreciated!
Thanks!
Hi Adeel,
This is not related to transitions. What you need to do is delay the function on mouse out. For example, on mouseleave event, you could do this:
…
'mouseleave' : function(){
var t = function(){
myFx.slideOut();
};
t.delay(1000);
}
…
Thankyou! that worked a treat! :D the menu is running smoothly now in all browsers.
regards
Adeel.
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
[...] 18. JavaScript drop down menu using Mootools [...]
[...] 18. JavaScript drop down menu using Mootools [...]
[...] Ανάγνωση του Tutorial Δείγμα [...]
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
[...] vom 26.11.2010: Endlich! So etwas wollte ich haben, schön! (Klick) Also doch mootools, statt jquery … Kein [...]
Hello,
Thank you for this nav, very nice. I am trying to get this to work on a site w/5 nav options, 2 that have drop-down. I am also trying to use a Lightbox/Milkbox script for some images on the page. The scripts seem to work fine on there own, but when I put them all on one page, either one will work (nav) and Lightbox won’t, or Lightbox will and nav won’t (just stays down/static)
Example:
….
@import url(styles.css);
@import url(css/milkbox/milkbox.css);/* Milkbox css */
window.addEvent(‘domready’, function(){
$(‘drop_down_menu’).getElements(‘li.menu’).each( function( elem ){
var list = elem.getElement(‘ul.links’);
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
‘mouseenter’ : function(){
myFx.cancel();
myFx.slideIn();
},
‘mouseleave’ : function(){
myFx.cancel();
myFx.slideOut();
}
});
})
});
This is probably some oversight on my part, but I would greatly appreciate your help. Thank you!
A demo page would have been more helpful but here are some ideas. If you use a lightbox script developed with anything else than MooTools, you probably have a framework conflict. If you do use mootools for both, make sure you don’t include mootools twice. Put your page somewhere online and I’ll be able to give an exact answer.
Thank you for your reply. The page is currently living here: http://kosherpixel.com/clients/coloradomarble/kitchen.html
Please let me know what you think the problem is.. I’m sure it’s something stupid that I’m overlooking. Thank you!
I think I figured out my problem. Thank you, again.
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] MooTools [...]
With your drop-down menu example using MooTools, is it possible for the menu to both open by sliding down and across ( from left to right ) at the same time ?
Many Thanks
Phil Gregory
Haven’t tested that but should work. To do that you should first get the size of the menu and Tween the width.
Hello,
i try to include your menu tutorial in my joomla project.
but it doesnt work right, in firebug i see by mouseover the style value is changing but no menu is showing.
For testing, i remove the overflow value in the mootools-1.2-more js and now i can see the menu ;)
Have you any idea how i can fix the problem….
It’s kinda difficult to give an idea without seeing what you are trying to do. Can you give a link to your implementation?
Just tested the menu on IE9 and it doesn’t seem to work (all menus seem open from the beginning).
Well, it’s not a ready-made solution, it’s a simple idea on how to get with very few lines of code a drop down menu. You probably need to do some CSS tricks in there too like hiding submenus on page load and display them when user clicks or mouse-over the menu items.
Yaniv is right. It works with all other browsers but not with IE9. It even works with IE8. Can you please provide some solution.
This is merely a demonstration of how easy is to create a very simple drop-down menu. It’s not a plugin so inconsistencies between browsers might appear. I don’t have a solution for it as it is just a demo, sorry about this.
Hi Vishal, did you find a way of getting it to work in ie9?
Hi Yaniv, did you find a way of getting it to work in ie9?
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
hi, is there a way to get it to work in Ie8 and 9?
It works in firefox and chrome fine but would like to get it to work in Internet Explorer 7,8 and 9.
thanks for any advice
Tested IE8 and it works. Can you post the error IE outputs?
Leave a comment