js手機相應式多級導航分享

標籤：js   javascript   響應式   手機   

    js手機相應導航，可以在自適應螢幕的時候運用，當網站螢幕小到一定程度是，讓該導航出現，該導航效果如：多級導航！

   

   主要的設計思路是：在菜單中往往會有很多內容或者有多個層次的子功能表，為了更加簡潔和節省空間的，在這個下拉式功能表中將每個子功能表都隱藏在一個主導覽按鈕下方，當點擊的時候通過細微的動畫顯示出來；當再次點擊層級菜單時，可以再次以不同形式的動畫展示下一級菜單。因為此菜單是流體布局的，所以可以很容易的適應於響應式布局當中。

   html代碼：

   

<div id="dl-menu" class="dl-menuwrapper"><button>Open Menu</button><ul class="dl-menu"><li><a href="#">Fashion</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Men</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Shirts</a></li><li><a href="#">Jackets</a></li><li><a href="#">Chinos & Trousers</a></li><li><a href="#">Jeans</a></li><li><a href="#">T-Shirts</a></li><li><a href="#">Underwear</a></li></ul></li><li><a href="#">Women</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Jackets</a></li><li><a href="#">Knits</a></li><li><a href="#">Jeans</a></li><li><a href="#">Dresses</a></li><li><a href="#">Blouses</a></li><li><a href="#">T-Shirts</a></li><li><a href="#">Underwear</a></li></ul></li><li><a href="#">Children</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Boys</a></li><li><a href="#">Girls</a></li></ul></li></ul></li><li><a href="#">Electronics</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Camera & Photo</a></li><li><a href="#">TV & Home Cinema</a></li><li><a href="#">Phones</a></li><li><a href="#">PC & Video Games</a></li></ul></li><li><a href="#">Furniture</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Living Room</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Sofas & Loveseats</a></li><li><a href="#">Coffee & Accent Tables</a></li><li><a href="#">Chairs & Recliners</a></li><li><a href="#">Bookshelves</a></li></ul></li><li><a href="#">Bedroom</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Beds</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Upholstered Beds</a></li><li><a href="#">Divans</a></li><li><a href="#">Metal Beds</a></li><li><a href="#">Storage Beds</a></li><li><a href="#">Wooden Beds</a></li><li><a href="#">Children's Beds</a></li></ul></li><li><a href="#">Bedroom Sets</a></li><li><a href="#">Chests & Dressers</a></li></ul></li><li><a href="#">Home Office</a></li><li><a href="#">Dining & Bar</a></li><li><a href="#">Patio</a></li></ul></li><li><a href="#">Jewelry & Watches</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Fine Jewelry</a></li><li><a href="#">Fashion Jewelry</a></li><li><a href="#">Watches</a></li><li><a href="#">Wedding Jewelry</a><ul class="dl-submenu"><li class="dl-back"><a href="#">back</a></li><li><a href="#">Engagement Rings</a></li><li><a href="#">Bridal Sets</a></li><li><a href="#">Women's Wedding Bands</a></li><li><a href="#">Men's Wedding Bands</a></li></ul></li></ul></li></ul></div><!-- /dl-menuwrapper -->

動畫樣式

.dl-menu.dl-animate-out-1 {    animation: MenuAnimOut1 0.4s linear forwards;}@keyframes MenuAnimOut1 {    50% {        transform: translateZ(-250px) rotateY(30deg);    }    75% {        transform: translateZ(-372.5px) rotateY(15deg);        opacity: .5;    }    100% {        transform: translateZ(-500px) rotateY(0deg);        opacity: 0;    }}.dl-menu.dl-animate-in-1 {    animation: MenuAnimIn1 0.3s linear forwards;}@keyframes MenuAnimIn1 {    0% {        transform: translateZ(-500px) rotateY(0deg);        opacity: 0;    }    20% {        transform: translateZ(-250px) rotateY(30deg);        opacity: 0.5;    }    100% {        transform: translateZ(0px) rotateY(0deg);        opacity: 1;    }}

javascript代碼：

$( '#dl-menu' ).dlmenu({    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }});

demo下載：http://download.csdn.net/detail/confidence68/7633057