分享5款不同的多级导航切换DIV的jQuery特效

　　5款不同的多级导航切换的jQuery特效,非常适用于APP前端特效，点击二级菜单会切换出三级菜单来替换二级菜单。再次点击又会切换回二级菜单，每款都有很炫酷的特效。欢迎大家下载源码研究研究此特效。

　　个人比较喜欢这种切换的效果。过渡效果都还不错。(点击的时候可以注意观察每行的小三角形的变化)

主要的HTML代码：

 1 <li>
 2     <a href="#">Furniture</a>
 3     <ul class="dl-submenu">
 4         <li class="dl-back"><a href="#">back</a></li>
 5         <li>
 6             <a href="#">Living Room</a>
 7             <ul class="dl-submenu">
 8             　　<li class="dl-back"><a href="#">back</a></li>
 9                <li><a href="#">Sofas &amp; Loveseats</a></li>
10              　<li><a href="#">Coffee &amp; Accent Tables</a></li>
11                <li><a href="#">Chairs &amp; Recliners</a></li>
12                <li><a href="#">Bookshelves</a></li>
13             </ul>
14          </li>
15          <li>
16              <a href="#">Bedroom</a>
17              <ul class="dl-submenu">
18           　　<li class="dl-back"><a href="#">back</a></li>
19              <li>
20                  <a href="#">Beds</a>
21                  <ul class="dl-submenu">
22                       <li class="dl-back"><a href="#">back</a></li>
23                       <li><a href="#">Upholstered Beds</a></li>
24                       <li><a href="#">Divans</a></li>
25                       <li><a href="#">Metal Beds</a></li>
26                       <li><a href="#">Storage Beds</a></li>
27                       <li><a href="#">Wooden Beds</a></li>
28                       <li><a href="#">Children's Beds</a></li>
29                   </ul>
30               </li>
31               <li><a href="#">Bedroom Sets</a></li>
32               <li><a href="#">Chests &amp; Dressers</a></li>
33          </ul>
34       </li>
35       <li><a href="#">Home Office</a></li>
36       <li><a href="#">Dining &amp; Bar</a></li>
37       <li><a href="#">Patio</a></li>
38    </ul>
39 </li>

效果演示图如下:

来源地址:http://www.jqshare.com/Jq/fondone/id/100.html 

转载于:https://www.cnblogs.com/heyoung/archive/2013/05/12/3073697.html