jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下：

这是一款最简单的jQuery下拉滑出菜单，jQuery代码实现，这里没有过多的去修饰菜单，仅是一些基本的实现，特别是对学习jQuery是个不错的参考实例，这里使用了一个jquery封装库文件jquery.tools.min.js，从外部引入，测试时候可能会因载入不成功而看不到效果，刷新一下网页即可解决此问题。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-simple-nav-cha-menu-style-codes/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=gb2312'title下拉滑出的菜单/title脚本src=' http : jquery。工具。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # list Li ')).悬停(function() { $(this)).儿童(' ul ').向下滑动()；}，function() { $(this).儿童(' ul ').向上滑动()；});});/script style type=' text/CSS ' * { margin :0；划水：0;}ul{list-style:none外无} # list { font-size :14 px宽度width :500 pxmargin :55 px auto } # list ul { font-size :12 px；display:none } #列表li { float:left宽度宽度：100像素右边距：1 px背景：橙色}/style/head dyul id=' list ' Li class=' Li ' a href=' # '游戏/a ul lia href='# '单机游戏/a/li lia href='# '网络游戏/a/Li/ul/Li Li class=' Li ' a href=' # '音乐/a ul lia href='# '流行歌曲/a/li lia href='# '摇滚/a/Li/ul/Li Li class=' Li ' a href=' # '编程语言/a ul lia href=' # ' JavaScript/a/Li lia href=' # ' PHP/a/Li/ul/Li/ul/body/html希望本文所述对大家的jQuery程序设计有所帮助。