js移动导航对应,您可以使用自适应时屏幕,当小画面在一定程度上的网站。使导航出现,The navigation effects such as the following figures:多级导航!
基本的设计思路是:在菜单中往往会有非常多内容或者有多个层次的子菜单。为了更加简洁和节省空间,在这个下拉菜单中将每一个子菜单都隐藏在一个主导航button下方,当点击的时候通过细微的动画显示出来;当再次点击层级菜单时,能够再次以不同形式的动画展示下一级菜单。由于此菜单是流体布局的。所以能够非常easy的适应于响应式布局其中。
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