码迷,mamicode.com
首页 > 移动开发 > 详细

js手机相应式多级导航分享

时间:2014-07-14 18:27:02      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:js   javascript   响应式   手机   

    js手机相应导航,可以在自适应屏幕的时候运用,当网站屏幕小到一定程度是,让该导航出现,该导航效果如下图:多级导航!

   bubuko.com,布布扣


   主要的设计思路是:在菜单中往往会有很多内容或者有多个层次的子菜单,为了更加简洁和节省空间,在这个下拉菜单中将每个子菜单都隐藏在一个主导航按钮下方,当点击的时候通过细微的动画显示出来;当再次点击层级菜单时,可以再次以不同形式的动画展示下一级菜单。因为此菜单是流体布局的,所以可以很容易的适应于响应式布局当中。

   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

js手机相应式多级导航分享,布布扣,bubuko.com

js手机相应式多级导航分享

标签:js   javascript   响应式   手机   

原文地址:http://blog.csdn.net/confidence68/article/details/37763533

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!