基于jQuery垂直多级导航菜单代码

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

在线预览   源码下载

实现的代码。

html代码:

<ul class="ce">
          <li> <a class="xz"  href="#">目录A</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="#">目录C</a> </li>
          <li> <a href="#">目录D</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>

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

时间: 2024-10-17 04:06:14

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

基于jQuery自适应窗口大小导航菜单

基于jQuery自适应窗口大小导航菜单.这是一款响应式导航菜单特效,支持手机导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwM

16款实用的jQuery商城分类导航菜单代码

jquery导航菜单制作红色商城导航下拉菜单样式代码 jquery红色的美容医院网站下拉分类导航菜单代码 jquery css3仿欧飞数卡商城左侧分类导航菜单样式代码 jquery仿淘宝电器城左侧自适应屏幕高度下拉导航菜单代码 jquery.SuperSlide.js仿2014年新版天猫商城首页服务分类导航菜单代码 jquery.SuperSlide仿易迅网商城左侧导航菜单分类代码 jquery hover鼠标滑过事件仿新版京东商城左侧商品分类导航菜单样式 jquery团购网站鼠标点击红色分类导

基于jQuery倾斜打开侧边栏菜单代码

基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">Ab

基于jquery的延时导航菜单,可做延时触发器!

html如下: <div class="box"> <ul class="clear-fix"> <li class="outer"> <a href="#" class="nav">index</a> <ul class="inter-box clear-fix"> <li><a href=&qu

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

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q

一款基于jquery的侧边栏导航

之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览   源码下载 实现的代码. html代码: <div style="position: relative; overflow: hidden;"> <div class="top"> <img src="menu.png" height="35&qu

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

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

基于jQuery多层次的手风琴代码

基于jQuery多层次的手风琴代码是一款经过美化的多级多层次手风琴特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <aside class="accordion"> <h1>News</h1> <div class="opened-for-codepen"> <h2>News Item #1</h2> <div class="opened-for-c