jQuery实现html网页顶部自适应导航栏（media）------Sestid

迷南。 2024-04-18 12:07 86阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>jQuery自适应网页顶部导航菜单</title>
     
    <style>
    	*{margin:0;padding:0;list-style-type:none;}
     
    .container{max-width:1140px;margin:0 auto;}
     
    .c-nav .show{
    	display: inline-block;
    }
    .c-nav .hiden{
    	display: none;
    }
    /* 导航栏 */
    .c-nav{
    	width: 100%;
    	background-color: black;
    	
    }
    .c-nav .navFlex{
    	display: flex;
    	display: -webkit-flex;
    	justify-content:space-between;
    	-webkit-justify-content: space-between;
    	align-items: center;
    	-webkit-align-content: center;
    	color: white;
    }
    .c-nav ul{
    	list-style: none;
    	margin-bottom: 0px;
    	padding-left: 0px;
    }
    .c-nav ul li{
    	padding: 15px 0px 15px 0px;
    	margin-left: 30px;
    	display: inline-block;
    }
    .c-nav ul li a{
    	color: white;
    	padding-bottom: 2px;
    	text-decoration: none;
    	border-bottom: 3px solid transparent;
    }
    .c-nav ul li a:hover{
    	border-bottom: 3px solid #e4c17e;
    }
    .c-nav .logo{
    	height:40px;
    }
    .c-nav .btnImg{
    	height: 20px;
    	width: 25px;
    	padding: 3px 8px 3px 8px;
    	box-sizing: content-box;
    	border: 1px solid transparent;
    }
    @media screen and (max-width:1200px){
    	.c-nav ul li{
    		margin-left: 20px;
    	}
    }
    @media screen and (max-width:992px){
    	.c-nav ul li{
    		margin-left: 10px;
    	}
    }
    @media screen and (max-width:768px){
    	.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
    		display: none;
    	}
    }
    @media screen and (max-width:576px){
    	.c-nav{
    		background-color:rgba(176,204,243,0.8);
    		padding: 10px 0px 10px 0px;
    		opacity: 0.9;
    	}
    	.c-nav .navFlex{
    		flex-wrap:wrap;
    		font-size: 20px;
    		justify-content: space-between;
    	}
    	.c-nav .logo{
    		height: 30px;
    	}
    	.c-nav ul li{
    		padding-top: 10px;
    		margin-left: 0px;
    		display: block;
    	}
    	.c-nav ul li a{
    		border-bottom: 3px solid transparent;
    	}
    	.c-nav ul a:hover{
    		border-bottom: 3px solid #e4c17e;
    	}
    	.c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){
    		display: block;
    	}
    	.c-nav .hiden{
    		display: block;
    	}
    	.c-nav .show{
    		width: 100%;
    		font-size: 14px;
    		text-align: center;
    		display: none;
    	}
    }
    </style>
     
    </head>
    <body>
     
    <div class="c-nav">
    	<div class="container navFlex">
    		<div class="flexItem">
    			<img  class="logo" src="img/wunsun-logo.png" />
    		</div>
    		
    		<div class="flexItem">
    			<img class="btnImg" src="img/navBtn.png" />
    		</div>
    		<div class="flexItem show">
    			<ul>
    				<li><a href="#">首页</a></li>
    				<li><a href="#">品牌故事</a></li>
    				<li><a href="#">产品中心</a></li>
    				<li><a href="#">网上商城</a></li>
    				<li><a href="#">招商加盟</a></li>
    				<li><a href="#">行业新闻</a></li>
    				<li><a href="#">联系我们</a></li>
    			</ul>
    		</div>
    	</div>
    </div>
     
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
    //用于判断导航栏的状态
    var toggle = true;
     
    //导航栏按钮
    $('.btnImg').click(function() {
    	if (toggle) {
    		$('.btnImg').css("border", "1px solid #b0ccf3");
    		toggle = false
    	} else {
    		$('.btnImg').css("border", "1px solid transparent");
    		toggle = true;
    	}
    	$(".show").slideToggle(300);
    })
     
    //窗口大小发生改变
    $(window).resize(function() {
    	//获取窗口宽度
    	var windSize = $(window).width();
     
    	if (windSize > 576) {
    		$(".show").slideDown(0);
    	} else {
    		$(".show").slideUp(0);
    	}
    });
    </script>
    </body>
    </html>