基于MooTools 的下拉菜单(drop down menu)
基于MooTools 的 下拉菜单(drop down menu)
在以前的jQuery分类中我介绍过一个题目为《Sexy Drop Down Menu with CSS & jQuery》的一个例子。它是一个很酷的下拉菜单,是黑金酷的,非常完美,是基于CSS & jQuery开发的。
今天我给大家介绍的也是关于下拉菜单的实现效果。虽然美工上没有上例子的华丽,但是在用户体验上和代码量上,已经优于上例。还有一个最大的不同点是本效果是基于MooTools开发的。
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'); } }); }) }); |
小白求教,如果再增加一级菜单并水平滑出该怎么做呢?