本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果。分享给大家供大家参考。具体如下：

这是一款由jQuery配合Java脚本语言来共同实现的网页上的下滑菜单特效，带颜色的是一级主菜单，点击后会展开向上滑出二级的子菜单，再次点击主菜单，会合拢子菜单，就菜单所能展现的功能来说，适用于企业网站产品分类、新闻类文章栏目导航等，目前本款菜单支持两级，有兴趣的可自己扩展更多级的菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

具体代码如下：

！DOCTYPE htmlhtmlheadtitle向下滑动展开的射流研究…下滑菜单/title style type=' text/CSS ' ul #边菜单，ul #边菜单ul { list-style-type : none；保证金： 0；padd : 0；宽度： 185像素；} ul #侧菜单a {显示：块；文本装饰：无；} ul #侧面菜单Li { margin 3360 5px auto} ul #侧菜单阿利{ background : # 333 font-size : 12px；color: # fff高度： 28px线高： 28px左衬垫左侧菜单li a:悬停{ background: # 000 } ul #侧菜单li ul阿利{ background : # cccccolor : # 000左填充左侧菜单li ul li a:悬停{ background: # aaa边框-左侧： 5px #000实心；左衬垫left : 15px }/style/head dydiv class=' left bar ' ul id=' side menu ' lia href=' # '网页菜单类素材一/a ul lia href='# '下滑菜单/a/li lia href='# '折叠菜单/a/li lia href='# '垂直菜单/a/li /ul /li lia href='# '编程源码类资源/a ul lia href='#'ASP源码/a/li lia源码/a/li lia href='#'vc源码/a/li lia href='#'VB源码/a/Li/ul/Li/ul/div脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script script type=' text/JavaScript ' function init menu(){ $(' # side menu ul ').hide()；$('#sidemenu ul:first ').hide()；$(' #侧菜单阿利')。单击(function(){ var CheckElement=$(this)).next()；if((CheckElement。is(' ul ')(CheckElement)。是(' :可见'){ return false} if(((CheckElement。是(' ul ')(！检查ElEMENT。是(' :可见'){ $(' #侧菜单ul :可见').向上滑动("正常");检查元素。向下滑动(“正常”)；返回false } })；}$(文档)。ready(function(){ init menu()；});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。