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 01 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
webpack打包多页面的方法
Nov 30 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
vue动态禁用控件绑定disable的例子
Oct 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
php error_log 函数的使用
2009/04/13 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue+element tabs选项卡分页效果
2020/06/29 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python网络编程实例简析
2014/09/26 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python实现读取json文件到excel表
2017/11/18 Python
python购物车程序简单代码
2018/04/18 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python async with和async for的使用
2019/06/20 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
幼儿园园长岗位职责
2013/11/26 职场文书
电大本科自我鉴定
2014/02/05 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
感恩教育主题班会
2015/08/12 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
MSSQL基本语法操作
2022/04/11 SQL Server