zoukankan      html  css  js  c++  java
  • 分享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 

  • 相关阅读:
    hdu 4747 Mex( 线段树? 不,区间处理就行(dp?))
    hdu 5692 Snacks(dfs时间戳+线段树)
    hdu 1864 最大报销额(背包)
    hdu 2955 Robberies(概率背包)
    hdu 4055 Number String (基础dp)
    4516: [Sdoi2016]生成魔咒
    2555: SubString
    后缀自动机·小记
    CF 1114 E. Arithmetic Progression
    CF 1114 D. Flood Fill
  • 原文地址:https://www.cnblogs.com/heyoung/p/3073697.html
Copyright © 2011-2022 走看看