jQuery实现的网页竖向菜单效果代码

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}







   Weblog工具
   

    
PivotX
    
WordPress
   
  
  

   程序语言
   

    
PHP
    
Ruby
    
Python
    
PERL
    
Java
    
C#
   
  
  

   Cool Stuff
   

    
Apple
    
Maitianquan
    
XBOX360
    
Nifengla
    
Nintendo
   
  
 

希望本文所述对大家的jquery程序设计有所帮助。