本文实例讲述了射流研究…基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：

这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools.1.11.js一并下载到本地。注意，如果看不到效果请刷新网页。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mootools-style-menu-codes/

具体代码如下：

！DOCTYPE html public '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。' DTD ' html Head id=' Head ' title mootools做的有意思菜单/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /stylehtml，body，div，ul，ol，li，a { margin 3360 0；padd : 0；font-size :12 pxcolor : # fff } # navigator { height : 50px；背景： URL(图片/o _ topnav。png)重复-x 0 0；相对位置：宽度width :450 pxmargin : auto margin-top : 80px } # NavList { margin : 0；height: 30px }#navList li {左侧浮动：高度： 50px线高： 30px列表样式类型：无；背景： URL(图片/o _ topnav。png)重复-x 0 0；}#navList阿利{ display:块高度： 50px线高： 30pxpadd : 0 15 ext XT-align : center }/style script src=' http : ootools。1 .11 .js ' type=' text/JavaScript '/script/head body bgcolor=' # 000000 ' div id=' navigator ' ul id=' nav list ' lia id=' my link S1 _ HomeLink ' class=' menu ' href=' # '我的首页/a/Li lia id='我的链接S1 _空间链接' class=' menu ' href=' # '工作日志/a/Li lia id='我的链接S1 _我的主页链接' class=' menu ' href=' # '情感博客/a/Li lia id='我的链接S1 _ NewPostLink ' class=' menu ' href=' # '与我联系/a/Li Li id=' my link S1 _ contact link '访问键=' 9 ' class=' menu ' href=' # '关于我/a/Li lia id='我的链接_ Admin ' class=' menu ' href=' # '管理/a/Li lia id=' my link _ Syndication ' class=' menu ' href=' # ' RSS/a/Li/ul/div脚本类型=' text/JavaScript ' var FX=[]； $$('#navList li ').每个（函数(el，i){ fx.push(新fx .样式(埃尔，”页边距-顶部“，{ duration :500 })；埃尔。addevents({鼠标输入：函数(){ FX[I]).停止()。start(-20)；}.bind(i)，mouseleave:函数(){ fx[i].停止()。开始(0);}.bind(I)})；});/scriptbr如果看不到效果，请刷新网页/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。