带你手写一个响应式导航栏

响应式导航涉及到的知识:

1. 媒体查询
2. css3动画
3. javascript

效果截图:

下面是代码:

			

				

					
				
				

					

						
					
					

					 	
首页
					 	
产品中心
					 	
新闻中心
					 	
开发者
					 	
关于我们
					 	
加入我们
					 	
联系我们
					
				
				
				
					
					
					
				
			
		

			body{	margin: 0;	}
			#header{width: 100%;height: 60px;background: #BCE8F1;	}
			.container{max-width: 1300px;height: 60px;margin: 0 auto;			}
			.left{	float: left;width: 20%;margin-top:10px ;}
			.left-image{padding: 0 15px;display: block;margin: auto;}
			.center{float: left;width: 60%;height: 60px;}
			.right{float: right;width: 20%;height: 60px;}
			.right-item{margin-top: 10px;display: block;padding: 5px 10px;float: left;}
			.nav-list{width: 80%;margin: 0 auto;padding: 0;overflow: hidden;}
			.nav-item{color: #0179D2;font-size: 13px;font-weight: 500;list-style: none;float: left;	padding: 20px;}
			.hide-button{width: 30px;margin-top: 15px;margin-left:100%;display: none;}
			@media screen and (max-width: 1300px) {	
				.nav-list{width: 100%;}
			@media screen and (max-width: 1050px) {							 
			   .right{display: none;  }
			   .nav-list{position: fixed;top: 60px;	right: -200px;max-width: 200px;background-color: indigo; }	   			
			   .nav-item{float: none;color: #fff; }
			   .hide-button{ display: block; }			   			 
			}	 			 		
			   @keyframes mymove
				{
					from {right:-200px;opacity: 0;height: 0;}
					to {right:0;opacity: 1;height: 400px;}
				}
				 @keyframes youmove
				{
					from {right:0;opacity: 1;height: 400px;}
					to {right:-200;opacity: 0;height: 0;}
				}
				

window.onload=function(){
			var hideButton =document.getElementById("hideButton");	
			var navlist =document.getElementById("navlist");
			var ishide = true;		
			hideButton.onclick=function(){			
					ishide?taggle("mymove","0px"):taggle("youmove","-200px");
					ishide=!ishide;
			}
			function taggle(animation,right){
				navlist.style.animation=animation+" .5s 1";
				navlist.style.right=right;
			}						
}