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 for some time by now but this is my first article on it. For those of you that don’t know what is, I’ll tell you only this: It’s my life saver when it comes to . 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 core build and the Fx.Slide component found in the More Builder.

The HTML looks like this:

View Code HTML
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:

View Code JAVASCRIPT
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:

View Code CSS
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.

digg JavaScript drop down menu using Mootools 1.2

69 comments

prev( )
  1. 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
prev( )

Leave a comment