JavaScript drop down menu using Mootools 1.2

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:

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.

Was this useful? Show your support.

digg JavaScript drop down menu using Mootools 1.2

110 comments

  1. Sergey says:

    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!

  2. Rosie says:

    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!

  3. Rosie says:

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

  4. Bryce says:

    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')...

  5. Stephen says:

    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.

  6. Danijel says:

    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.

  7. K says:

    how to make it work with submenu?

  8. Annette says:

    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!

  9. Adeel says:

    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);
      }

  10. Adeel says:

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

    regards

    Adeel.

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

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

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

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

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

  16. [...] vom 26.11.2010: Endlich! So etwas wollte ich haben, schön! (Klick) Also doch mootools, statt jquery … Kein [...]

  17. Barry says:

    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!

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

  19. Phil Gregory says:

    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

  20. Markus Miederer says:

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

  21. Yaniv Ran says:

    Just tested the menu on IE9 and it doesn’t seem to work (all menus seem open from the beginning).

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

  23. Rich K says:

    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

Leave a comment