Code du menu de navigation vertical à plusieurs niveaux jQuery Sharing

Code du menu de navigation vertical à plusieurs niveaux jQuery Sharing_jquery

WBOY

Libérer： 2016-05-16 15:44:28

original

1216 Les gens l'ont consulté

Il s'agit d'un code d'effets spéciaux de menu de navigation vertical basé sur jquery. Il y a trois niveaux au total. L'effet est simple et généreux. Le dernier niveau peut également être utilisé pour l'affichage et l'explication d'images. code source des effets spéciaux.

Démonstration d'effet Téléchargement du code source

Le code du menu de navigation vertical à plusieurs niveaux jQuery partagé avec vous est le suivant

<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="http://www.jb51.net/jiaoben/369410.html">源码下载</a> </li>
 <li> <a href="http://demo.jb51.net/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>

Copier après la connexion

Opération de rendu :

Ce qui précède est le code du menu de navigation vertical à plusieurs niveaux jQuery partagé avec vous. J'espère qu'il vous plaira.