基于MooTools 的下拉菜单(drop down menu)

基于MooTools 的 下拉菜单(drop down menu)

在以前的jQuery分类中我介绍过一个题目为《Sexy Drop Down Menu with CSS & jQuery》的一个例子。它是一个很酷的下拉菜单,是黑金酷的,非常完美,是基于CSS & jQuery开发的。

今天我给大家介绍的也是关于下拉菜单的实现效果。虽然美工上没有上例子的华丽,但是在用户体验上和代码量上,已经优于上例。还有一个最大的不同点是本效果是基于MooTools开发的。

MooTools-drop-down-menu

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	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();
                   //默认是myFx.slideIn('vertical');		
 
				},
				'mouseleave' : function(){ 
					myFx.cancel();
					myFx.slideOut();	
                   //默认是myFx.slideOut('vertical');				
				}
			});	
		})
	});

演示:http://blog.moocss.com/Mootools/demo6/index.html

下载::http://blog.moocss.com/Mootools/demo6/

站点统计