基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<ul class="ce">

          <li> <a class="xz"  href="#">目录A</a> </li>

          <li>

               <a href="#">目录B <img class="more" src="data: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="data:images/more1.png"/></a>

                                           <div class="thr_nr">

                                                 <h3> 三级目录B主要内容 </h3>

                                                 <img src="data:images/aa.png"/>

                                           </div>

                                      </li>

                                      <li> <a  href="##">三级目录C</a> </li>

                                      <li>

                                           <a  href="##">三级目录D <img class="more1" src="data:images/more1.png"/></a>

                                           <div class="thr_nr">

                                                 <h3> 三级目录D主要内容 </h3>

                                                 <img src="data: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="#">目录C</a> </li>

          <li> <a href="#">目录D</a> </li>

          <li> <a href="#">目录E</a> </li>

          <li>

               <a href="#">目录F <img class="more" src="data: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>

via：http://www.w2bc.com/Article/45246

基于jQuery垂直多级导航菜单代码的更多相关文章

  1. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  2. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  3. 两种思想实现基于jquery的延时导航菜单，可做延时触发器！

    1. 函数式 html如下: <div class="box"> <ul class="clear-fix"> <li class ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  6. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 基于jquery右侧悬浮加入购物车代码

    分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制 ...

  8. 一款基于jquery的侧边栏导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览   源码下载 实现的代码. html代码 ...

  9. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

随机推荐

  1. Adobe Scout 入门

    http://www.adobe.com/cn/devnet/scout/articles/adobe-scout-getting-started.html Adobe Scout 是新一代 Flas ...

  2. 【bzoj1043】下落的圆盘

    [bzoj1043]下落的圆盘 题意 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红色线条的总长度即为所求. \(1\leq n\leq 1000\ ...

  3. oracle常用SQL总结

    这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快快收 ...

  4. table-cell的手机应用场景

    前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒 ...

  5. Android中SensorManager.getRotationMatrix函数原理解释

    SensorManager是Android中的一个类,其有一个函数getRotationMatrix,可以计算出旋转矩阵,进而通过getOrientation求得设备的方向(航向角.俯仰角.横滚角). ...

  6. java设计模式之-观察者模式（发布-订阅模式）

    1.观察者模式定义  观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态上发生变化时,会通知所有观察者对象,让它们能够自动更新自己. 2.观察者模式结构 ...

  7. ActiveMQ在C#中的应用

    本文是在.NET Framework框架下的应用,截止到目前ActiveMQ还不支持.NET Core,而RabbitMQ已经支持.NET Core,希望ActiveMQ能尽快支持. ActiveMQ ...

  8. 转载：CSS垂直居中总结

    原文地址:http://www.cnblogs.com/dojo-lzz/p/4419596.html 工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1. ...

  9. c简单的单向链表

    ps:list链表  node节点 在链表中节点就是一个个的结构体 堆空间由于在申请内存时,地址是随机的,所以要用链表的方式将其连接起来,但是链表头的地址要知道. 每个节点包含两个部分:数据区和地址区 ...

  10. iOS9中找不到XXX.dylib 与 is unavailable no availabel on ios (app extension) - use view controller 的解决办法

    在 iOS9 中现在找不到 XXX.dylib 了,比如libz.tbd  如果要用到 libz.dylib,可以用下面的办法,来自 Stack Overflow. Go to Build Phase ...