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
This is very helpful! I am still a novice with javascript/mootools, and this was exactly what I was looking for. However, some changes I made to make this work a bit better (although I don’t know that this would be true for all people, or if they are done correctly):
My drop down lists were being put behind my dynamically replaced text image headers, so I changed my css:
#menu-container {
display:block;
position:absolute;
z-index: 20;
width:700px;
margin:0px auto 0px;
font-size:11px;
}
This kept it from getting obscured. I also found that the lists often still showed on the page load, so I added this to the css:
.links {
display: none;
}
and this to the js
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
$(list).setStyle('display','block');
elem.addEvents({
This makes it display:none when loaded, and then sets to block on each element after hiding them. Haven’t seen anything go wrong so far. Hope this helps as you’ve helped me. Thanks!
Huh, I went back and removed the display things and it is hiding it just fine. Don’t know what the problem was before, but I guess it’s fine as is…
Glad to be of help! Please remember that when you make a container slide (be it div, li or whatever) it’s better to leave it’s display property not specified in order to get the expected behavior. In our case, the sliding container is ul.links and its CSS declaration is:
#drop_down_menu li ul {
margin:0px;
padding:0px;
list-style-type:none;
padding-top:10px;
}
Man I don’t even know how I had that code working previously, it doesn’t. Oh well, basically the drop-downs only show up when my internet is reallly laggy and the dom doesn’t load for a while (yes, that laggy).
So, sorry to make lame comments on a perfectly fine, working script :P
No harm done, relax. If I can help you with anything regarding this script, just let me know. Have you tried uploading on your host the files from the example I provide? Maybe make a little testing on that. I also recommend that you use Firefox and Firebug to debug it.
Hi, how can you add submenus with this? Thanks for the article by the way, really easy to understand :)
If you need to add one more menu, you simply add:
<li class="menu">Menu n
<ul class="links">
<li><a href="#">Link n</a></li>
<li><a href="#">Link n+1</a></li>
<li><a href="#">Link n+2</a></li>
</ul>
</li>
If you need to add a 3′rd level of links, for the moment it’s not possible using the code above but it can be done.
hello. first off, thanks much for this script, it’s very straight forward, although I’m getting an error in FF console saying that Fx.Slide is not a constructor…
Am I missing something here?
I’m not getting any errors. Check if you have in your header both JavaScript files (mootools core and mootools more). This is the piece of code:
<script language="javascript" type="text/javascript" src="mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="mootools-1.2-more.js"></script>
Since the 1.2 version of mootools you need to compile two different files on their website.
I’m having some trouble with this script in IE 6, specifically when the menu is placed over a Flash file. Works great in all other browsers, but IE wants to pull the menu back up when navigating to the next link in the drop down. It would be easier to just take a look at it here:
http://keystone-resources.net/claremont/main/index.php
Any ideas?
Hi Jonathan,
Try settinh a width on #drop_down_menu li. I think that is your problem. One other thing, since you are using MooTools on your website, don’t use AC_RunActiveContent.js to load your JavaScript. Instead, you can use the Swiff class implemented in MooTools 1.2 (see here for more details).
Let me know if you need more help on your problem.
Thank you for the quick response. I’ll try setting a width on that. I wasn’t aware of mootools swiff class
Hi. I’m using your code which is great but I’m having trouble getting it to work properly. I have a div wrapped wrapped it. How can i get it to overlay on top of the other div’s. The drop downs causes the whole div to expand and scroll down. Do you know of a way to fix that. My website only works in IE right now.
Well, the way I figure it out is this: the ul is inside an absolute positioned div which is inside a relative positioned div. This way, the absolute positioned div will expand over the content below it and not push it down. To make it overlay over other div’s simply use the z-index property. I repeat, this is the solution I found, if anyone knows a better way to deal with this problem, please share with us.
That did the trick…Thank you
[...] 8- Drop down menu using Mootools 1.2 [...]
Simple straightforward article, clean code and a great example. Exactly what I was looking for.
Thanks for sharing, and great job!
[...] Демо Страница [...]
[...] Drop down menu using Mootools 1.2 [...]
Great small but powerfull code-example for mootools!
Is there a way, that the menues drop UP instead of dropping down?
@Lars
Not under the current form. The menus slide using the Fx.Slide class available in MooTools and for the mode parameter you have only vertical or horizontal and vertical slides only down.
thanks, it’s a great script!
but what i have to do to get a 3rd level?
thanks
Well, you will have to write the script. Didn’t had the time to think on how to develop the script but I’ll try to write a multilevel class for it in the following weeks. No promise though. I hope you can understand, I also work for the clients that I have and time is a scarce resource.
Have a mootlools busy with your menu – looks great – but is there anyway to hide the submenus until it has loaded? – take a look at what I mean here – http://www.typicallyspanish.com/demozoom.shtml
@howard
You could achieve this by setting on ul.links display:none from your CSS and add list.setStyle(‘display’,'block’); after this line: var list = elem.getElement(‘ul.links’);
Hi! Great code…It’s just what I needed! I had a query. If I remove the background color of the menu, the menu is a little bit jumpy on IE. As in when the mouse hovers over link3 and link4 in the submenu its jumps like its sliding back inside and then decides to stay so slides down back again. I wanted to know why it acts that way. My client does not want any background color on the menus. So, I’m kinda stuck with it. So if you could help it would be great.
Thanks!
p.s. this jumping around happens in your code itself. I haven’t incorporated anything in the code, except removed the background color from the menu.
p.p.s it jumps around in IE 7 (not sure about any other IE)
The mouseenter / mouseleave events are set up on the li.menu. It looks like on IE7, if you hover over a zone that has no content in it, the browser takes it as a mouseleave event. The solution in your case would be to remove any margins or padding from the li.menu and all its children.
thanks for the help..and the awesome code! :)
hey, i got another question. after my menu-container i got another div with these specs:
#image_holder {
background-color: #FFFFFF;
height: 15em;
width: 57em;
clear: both;
}
I put an image into the div…and what happened was that the image went behind the menu. I want it to appear below the menu. I actually eventually want to place a flash file in there.
I thought that the clear:both; would have taken care of it, but not so. Any ideas?
thanks a bunch!
[...] http://css-tricks.com/simple-jquery-dropdowns/ MooTools http://www.php-help.ro/mootools-12-j…g-mootools-12/ And if nothing work out for you just google "suckerfish dropdowns". [...]
Leave a comment