JavaScript drop down menu using Mootools 1.2

Thursday, July 31st, 2008 in Mootools

I’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:

View Code HTML

<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:

View Code JAVASCRIPT

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:

View Code CSS

#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.

view demo download script

Was this useful? Show your support.

90 comments

Sergey says:

March 14, 2010 at 1:23 PM

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!

Reply
- Constantin Boiangiu says:
  
  March 15, 2010 at 1:15 PM
  
  Hi Sergey,
  
  Sure it’s possible. See MooTools docs for Element:addEvents to learn how to add multiple events to an element.
  
  Reply
Rosie says:

March 17, 2010 at 10:03 AM

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!

Reply
Rosie says:

March 17, 2010 at 10:10 AM

Sorry just looked at older comments – just ignore me! *SLAPS FOREHEAD*

Reply
- Constantin Boiangiu says:
  
  March 17, 2010 at 10:14 AM
  
  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.
  
  Reply
Bryce says:

March 23, 2010 at 2:59 PM

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 =)

Reply
- Constantin Boiangiu says:
  
  March 25, 2010 at 3:05 PM
  
  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')...
  
  Reply
Stephen says:

April 11, 2010 at 5:11 AM

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.

Reply
- Constantin Boiangiu says:
  
  April 12, 2010 at 10:23 AM
  
  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.
  
  Reply
  - Danijel says:
    
    April 19, 2010 at 6:38 PM
    
    Can you pls give us more info about how to do this, or example. Thanks
    
    Reply
Danijel says:

April 19, 2010 at 7:43 PM

sry from me too, found solution in older comments, but this “prev( )” button is invisible , you should change this somehow.

Reply
- Constantin Boiangiu says:
  
  April 19, 2010 at 9:10 PM
  
  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.
  
  Reply
K says:

April 28, 2010 at 1:34 AM

how to make it work with submenu?

Reply
- Constantin Boiangiu says:
  
  May 2, 2010 at 6:56 PM
  
  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.
  
  Reply
Annette says:

May 7, 2010 at 2:10 AM

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!

Reply
Adeel says:

May 7, 2010 at 7:54 PM

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!

Reply
- Constantin Boiangiu says:
  
  May 10, 2010 at 7:56 PM
  
  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); }
  …
  
  Reply
Adeel says:

May 20, 2010 at 12:45 PM

Thankyou! that worked a treat! the menu is running smoothly now in all browsers.

regards

Adeel.

Reply
Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Online Tutorials For Designer's says:

June 8, 2010 at 5:56 AM

[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]

Reply
Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - www.huedesigner.com says:

June 17, 2010 at 12:48 PM

[...] JavaScript drop down menu using Mootools Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [Demo | Download] [...]

Reply
40 Seriously Awesome MooTools Tutorials and Plugins says:

July 10, 2010 at 1:04 PM

[...] 18. JavaScript drop down menu using Mootools [...]

Reply
40 Seriously Awesome MooTools Tutorials and Plugins | Afif Fattouh - Web Specialist says:

July 14, 2010 at 2:06 PM

[...] 18. JavaScript drop down menu using Mootools [...]

Reply
40 MooTools Tutorials και Plugins « Web Resources says:

August 2, 2010 at 2:04 PM

[...] Ανάγνωση του Tutorial Δείγμα [...]

Reply

JavaScript drop down menu using Mootools 1.2

Examples on PHP, MySQL, JavaScript, MooTools and CSS