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 there, great stuff!
Is there a way to control the speed of the slide? I.e. to make it slide in/out slower or quicker.
Thanks!
Yes, there is a way. Change this line
var myFx = new Fx.Slide(list).hide();
with this one
var myFx = new Fx.Slide(list, {duration:2000}).hide();
You can change duration to whatever value you need. Duration is in milliseconds.
Thanks a lot for your support, Constantin, it works just like that.
Hi Constantin,
a great peace of work!
I got it running, but I don’t have so much space in my layout, that I can make every entry 150px width. I have got some long and short words, so I can not adjust it to let’s say 100px.
I tried deleting the “width: 150px” in “#drop_down_menu li”, but this didn’t work in IE6 (he arranges all menues vertical in the full width of the whole menu).
Does anyone know a solution for this?
Hi Constantin,
just another question:
What features do I exactly have to download from mootools core and more, in the newest version (your complete download is an old version of mootools).
Greets from Germany,
Lars
@lars
You’ll need from Moo Core:
Core: all
Native: all
Element: Element, Element.Event
Utilities: Selectors, DomReady
and from Moo More:
Core: More
Fx: Fx.Slide
Unfortunately, for the width problem I don’t have a solution. What I could suggest, if you’re not having a dynamically generated menu, is to set classes for each li and set the width for each one accordingly. It’s not an awesome solution though, sorry.
Thanks for you answers.
Concerning the width-problem: for IE I set the width to a small value, e.g. 50 px, and but for the blanks of menutexts, so that IE does not break the lines. In Firefox it works find, just without any width value (= width: auto).
[...] JavaScript Dropdown Menu Using MooTools 1.2 [...]
Hi, awesome script, is there a way to use an image rollover with the menu sliding out from there? I’m currently using a css rollover. Here’s my example: http://andytran.googlepages.com/navtest.htm
Thanks
The only thing to do is mix the two. It’s quite easy, have you gave it a try? Usually, you try and if you have problems you ask.
Anyway, here’s a demo regarding your request: download files. I used your two button instances. Have fun.
Amazing. I lost the link to this page for the past few days so I was trying to work it out myself. It eventually worked to some extent in IE8 but my css positioning wasn’t right and the dropdown didn’t work in firefox at all for me. Believe it or not, I spent nearly two weeks on this menu! I think my problem was using different scripts for the rollover effect and the dropdown menu and they weren’t integrated properly. Many thanks!
I have changed the submenus to be configured horizontal. How do I make the the submenu of say menu 3 line up under the text of menu 1 when you roll over Menu 3.
I was able to figure out how to do it using Dreamweaver 4 spry in the css. See http://www.laartshow.com/dropdown3/dropdown3.html for example.
With you script as far as i can get is http://laartshow.com/mootools_drop_down_menu/.
Thanks for you help,
Jhon
You can set the width of #drop_down_menu to the width of your links and have a nice accordeon! :)
Great script, however in IE6, its doesnt stop form select elements from showing throught the Menu …
got a fix?
thanks
Try this solution. I hope it helps.
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
I’m new to building websites using css, not in frames. Although my initial layout and functionality is good, I’m trying to implement the drop down menu (mootools) to my navigation bar. My problem is that I have my bar set up as graphics as I like the font. Currently set up as rollovers with link to new page in Dreamweaver CS3 using javascript. But want to set up the my rollover graphic navigation bar to have the mootools drop down menu applied to it if possible. Can this be done (can mootools be applied to a graphic element that has a rollover graphic or is css text and css colors – with no graphic rollovers – the only way)?
I can’t quite understand your problem. Please provide an example page.
Appreciate your time…I haven’t uploaded my site yet as it’s for advertising (so don’t want to advertise issues with website until resolved adequately). I decided to use css and javascript for a simple drop-down navigation bar menu, however, I’d really like to use the moo-tools for a rollover button drop-down menu (single column, vertical drop-down). The problem I’m having is the rollover graphic element won’t show the effect, but the Mootools 1.2 drop-down menu works fine. I deleted the text at the top-level menu item and inserted a rollover element in its place, but the rollover doesn’t work. Can a rollover be used with this MooTools effect? Thanks in advance. Please see code:
Page a
Page b
Page c
Page d
Page e
Page f
If I understood correctly what you’re asking, you might find this useful: MooHover
Can the “JavaScript drop down menu using Mootools 1.2″ use alternating widths easily? Menu’s might say: ‘Home’ ‘Contact’ ‘For Your Safety’ ‘Request a Demo’ etc
With the menu titles being 4-16 characters wide I don’t want the 4 character ‘Home’ menu to be wider than necessary.
I hope that makes sense, please tell me if alternating widths can be accomplished and menu items equidistant from one another. Also if doing so is trivial or a big undertaking!
Sorry Constantin,
I neglected to read the comments and see others have posted regarding menu widths. I do have dynamically generated menus. Would I be unable to set classes for each li and set the width for each one accordingly? If so, what would this look like exactly? For example:
Currently I have: #drop_down_menu li ul li a:HOVER { text-decoration:underline; color:#007cd6; }
REQUEST A DEMO
{demolinks}
{demolinks_names}
{/demolinks}
Are you suggesting: #drop_down_menu2 li ul li a:HOVER { text-decoration:underline; color:#007cd6; }
REQUEST A DEMO
{demolinks}
{demolinks_names}
{/demolinks}
Sorry, kind new to this :)
Hi Lawrence,
Yes, you could set classes for menus you want to have a different width. To do that, define a new CSS class for #drop_down_menu li ( for example, a wide one called wide: #drop_down_menu li.wide{ width:500px;} ) and just add it to the menu you want to change: li class=”menu wide”
I hope this answers your question, if not, try to provide a demo page. No explanation can match an example.
[...] JavaScript drop down menu using MootoolsEasy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo|Download] [...]
I want to use your sliding thumbnail viewer and the drop down menu. viewer seems to work fine until i add the inline script for the drop down menu then nothing works, why is this? thanks.
[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]
Hi there and thank you for this useful piece of code. I’m trying to create a menu in my page using this code but I can’t find out how to fix the list items width problem.
The list items of the parent list have the same width with the sublist items.
I’d like to have equal space between the parent list items (and not to set the same width for all) and I can’t find the way to do it.
Any suggestion would be helpful. Thanks again
Hello,
Thanks so much for this tutorial. I just started messing with JS, CSS, and HTML. This was helpful.
My question though is it possible to have the background of each menu (menu 1, menu 2 etc) to each be a different color.
Thanks again,
Melody
Yes, this is possible by setting a css class for each menu and styling it accordingly.
[...] JavaScript drop down menu using Mootools [...]
First of all thanks Constantin !
Hey im new in all of this, could sombody help me make a vertical menu out of this ?
i tried to mess with the code but all i could do was change the direction that the ‘Link’s come from (instead of coming from above, they come from de left to the right..just like i want it). But i still get the ‘drop down’ effect … when i just want the menu to slide to the right…
help plz
thx
Victor
Hey Constantin,
I like your script very much, but is it normal that when the page is loading, the menu is open you can see all the the links of the menu? You can see it open just for a second until the page is completely loaded. It also happens in your demo example.
Is this normal?
(Sorry I’m no programmer)
Thank you,
Anton S.
Yes, it’s normal. To make it not behave like that, you’ll have to CSS it that that way.
Hi,
Is there a way to make links invisible during page loading. They start with drop down position and later after page loaded they’re disappear.
Thank You,
Mike R.
Hi Mike,
Please see older comments. This problem has been talked about. Thanks.
Hi, thank you for posting this script. I made it work but I have one problem. I only want a dropdown in one of the buttons, but when I erase submenus from other buttons the script stops working and everything appears expanded on screen. Is there anyway I can only make one button to drop down?
Thanks!
Haven’t tested this but it should work. Try this:
Menu drop down selector is li.menu ( line 2 in my code above – $(‘drop_down_menu’).getElements(‘li.menu’)… ). So, for the elements you want the drop down on, set class menu ( <li class=”menu”> ). For the ones you don’t want the drop down on, set a different class and they will be skipped. Let me know if it works.
Leave a comment