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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
详解vuex状态管理模式
Nov 01 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python实现GIF图倒放
2020/07/16 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
领导证婚人证婚词
2014/01/13 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
投标服务承诺书
2014/05/28 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
个人汇报材料范文
2014/12/30 职场文书
2016年春节慰问信息
2015/03/25 职场文书