jQuery实现简单的列表式导航菜单效果代码

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下：

这里使用jQuery实现简单的列表式导航菜单，是根据网上的一个教程，边看边写的，经过了修正，拷贝代码即可使用。主要实现包括三个部分，一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/

具体代码如下：

body{font-size:13px}
ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
 .content{padding-top:10px;clear:left}
 a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{line-height:23px;}
#sort{position:absolute;display:none}

 
 


 

  
   
   精品源码下载社区
  
  

  
Visual C#
  

   
数据库
   
系统控制
   
多媒体
   
字符处理
   
打印输出
  
  
Delphi
  

   
图像处理
   
窗体设计
   
数据库应用
   
初学实例
  
  
VC++
  

   
系统控制
   
数据库应用
   
电脑软件3
   
字符处理
   
电脑软件5
  
  
VisualBasic
  

   
系统控制
   
网络编程
   
窗口界面
   
控件组件
   
图像编程
  
  
  
  
 

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