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

最新推荐文章于 2023-12-18 23:41:14 发布

雾里看人

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量834

点赞数 2

分类专栏：仿网页练习技术文章

本文链接：https://blog.csdn.net/qq675496255/article/details/100767542

版权

技术文章同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

仿网页练习

1 篇文章 0 订阅

订阅专栏

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

媒体查询
css3动画
javascript

效果截图:
在这里插入图片描述
下面是代码:

<header id="header">
			<div class="container">
				<div class="left">
					<img class="left-image" width="120" height="40" src="http://www.cambricon.com/dayrui/statics/default/images/logo.png" />
				</div>
				<div class="center">
					<div class="hide-button" id="hideButton">
						<img src="img/Buttonicon.png" width="30p" height="30" />
					</div>
					<ul class="nav-list" id="navlist">
					 	<li class="nav-item">首页</li>
					 	<li class="nav-item">产品中心</li>
					 	<li class="nav-item">新闻中心</li>
					 	<li class="nav-item">开发者</li>
					 	<li class="nav-item">关于我们</li>
					 	<li class="nav-item">加入我们</li>
					 	<li class="nav-item">联系我们</li>
					</ul>
				</div>
				<div class="right">				
					<a class="right-item"><img src="http://www.cambricon.com/dayrui/statics/default/images/nav_right_ino1.png"/></a>
					<a class="right-item"><img src="http://www.cambricon.com/dayrui/statics/default/images/nav_right_ino2.png"/></a>
					<a class="right-item"><img src="http://www.cambricon.com/dayrui/statics/default/images/nav_right_ino3.png"/></a>
				</div>
			</div>
		</header>

			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;
			}						
}