本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现竖向的网页菜单代码，可折叠展开的二级网页菜单，修改一下可用在后台管理中，显示在左侧的那种管理菜单jquery。加入后方便实现了菜单展开和合拢的功能，还加入了少许动画效果，兼容性好。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML L1/DTD/XHTML L1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' dir=' ltr ' lang=' EN-EN ' head script src=' http 3360 jquery-1。6 .2 .量滴js ' type=' text/hide()；$('#menu ul:first ').show()；$(' #菜单阿利')。单击(函数(){ var CheckElement=$(this)).next()；if((CheckElement。is(' ul ')(CheckElement)。is(' :可见'){ return false} if(((CheckElement。是(' ul ')(！检查ElEMENT。是(' :可见'){ $(' # menu ul :可见').向上滑动("正常");检查元素。向下滑动(“正常”)；返回false } })；}$(文档)。ready(function(){ init menu()；});/script style body { font-family : Helvetica，Arial，无衬线；font-size : 0.9 em} p {行高： 1.5 em} ul #菜单，ul #菜单ul { list-style-type :无；保证金： 0；padd : 0；宽度： 15em} ul #菜单{ display:块文本装饰：无；} ul #菜单Li { margin-top : 1px；} ul #菜单阿利{ background : # 333 color : # fffpadding : 0.5 em } ul #菜单阿利：悬停{背景： # 000；} ul #菜单li ul阿利{ background : # cccccolor : # 000左填充left: 20px} ul #菜单李立ul阿利：悬停{背景： # AAA边框-左侧： 5px #000实心；左衬垫left: 15px}。代码{ border: 1px实心# ccclist-style-type:十进制-前导零；padd : 5pxmargin : 0；}.代码代码{显示：块；padding: 3px保证金-底部： 0;}.代码Li { background : # dddborder : 1px固体# cccmargin: 0 0 2px 2.2em }。缩进1 {左填充： 1em} .缩进2 {左填充： 2em}/styletitle网页竖排菜单jQuery版/title！-[如果它是IE 8]样式类型='text/css '阿利{ display : inline-block；}阿利{ display:block} /style！[endif]-/head dyul id=' menu '阿利工具/a ul a href=' # ' PivotX/a/Li Li a href=' # ' WordPress/a/Li/ul/Li阿利href=' # '程序语言/a ul lia href=' # ' PHP/a/Li lia href=' # ' Ruby/a/Li lia href=' # ' Python/a/Li lia href=' # ' PERL/a/Li lia href=' # ' Java/a/Li lia href=' # ' c#/a/Li/ul/Li阿利href=' # 很酷的东西苹果希望本文所述对大家的jquery程序设计有所帮助。