jQuery垂直多级导航菜单代码分享


Posted in Javascript onAugust 18, 2015

这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码。

效果演示 源码下载

为大家分享的jQuery垂直多级导航菜单代码如下

<head>
<title>jQuery垂直多级导航菜单代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<ul class="ce">
 <li> <a class="xz" href="#">三水点靠木</a> </li>
 <li> 
  <a href="#">目录B<img class="more" src="images/more.png"/></a>
  <ul class="er">
  <li>  <a href="##">二级目录A</a> </li>
  <li class="e_li"> 
   <a href="##">二级目录B</a> 
   <ul class="thr">
   <li> <a href="##">三级目录A</a> </li>
   <li> 
    <a href="##">三级目录B <img class="more1" src="images/more1.png"/></a> 
    <div class="thr_nr">
    <h3> 三级目录B主要内容 </h3>
    <img src="images/aa.png"/>
    </div>
   </li>
   <li> <a href="##">三级目录C</a> </li>
   <li> 
    <a href="##">三级目录D <img class="more1" src="images/more1.png"/></a> 
    <div class="thr_nr">
    <h3> 三级目录D主要内容 </h3>
    <img src="images/bb.png"/>
    </div>
   </li>
   <div class="clear"></div>
   </ul>
  </li>
  <li>  <a href="##">二级目录C</a> </li>
  <li class="e_li"> 
   <a href="##">二级目录D</a> 
   <ul class="thr">
   <li> <a href="##">三级目录A</a> </li>
   <li> <a href="##">三级目录B</a> </li>
   <li> <a href="##">三级目录C</a> </li>
   <li> <a href="##">三级目录D</a> </li>
   <div class="clear"></div>
   </ul>
  </li>
  </ul>
 </li>
 <li> <a href="https://3water.com/jiaoben/369410.html">源码下载</a> </li>
 <li> <a href="http://demo.3water.com/js/2015/jQuery-czdj-dhcd/">演示地址</a> </li>
 <li> <a href="#">目录E</a> </li>
 <li> 
  <a href="#">目录F <img class="more" src="images/more.png"/></a>
  <ul class="er">
  <li> <a href="##">二级目录A</a> </li>
  <li> <a href="##">二级目录B</a> </li>
  <li> <a href="##">二级目录C</a> </li>
  <li> <a href="##">二级目录D</a> </li>
  </ul>
 </li>
 <div class="clear"></div>
</ul>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<
</body>
</html>

运行效果图:

jQuery垂直多级导航菜单代码分享

以上就是为大家分享的jQuery垂直多级导航菜单代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript二维数组转置实例
Jan 22 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 #Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 #Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 #Javascript
js+css实现上下翻页相册代码分享
Aug 18 #Javascript
javascript实现图片上传前台页面
Aug 18 #Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 #Javascript
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
You might like
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
php 修改密码实现代码
2017/05/24 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python之array赋值技巧分享
2019/11/28 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python用Jira库来操作Jira
2020/12/28 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
早读迟到检讨书
2014/01/24 职场文书
卫生安全检查制度
2014/02/04 职场文书
工会主席岗位责任制
2014/02/11 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
检讨书范文2000字
2015/01/28 职场文书
论文评审意见
2015/06/05 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书