jquery黑色響應式導航欄代碼

基于jQuery制作黑色的響應式網(wǎng)站導航欄布局，通過調(diào)整瀏覽器大小，自適應不同寬度的導航欄代碼。這是一款簡單實用的響應式導航頁面。ps：改變?yōu)g覽器大小查看演示。

使用方法：

1、head引入css文件

<link rel="stylesheet" href="css/style.css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代碼

<div class="c-nav">
	<div class="container navFlex">
		<div class="flexItem">
			<img  class="logo" src="img/wunsun-logo.png" />
		</div>
		
		<div class="flexItem hiden">
			<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="#">產(chǎn)品中心</a></li>
				<li><a href="#">網(wǎng)上商城</a></li>
				<li><a href="#">招商加盟</a></li>
				<li><a href="#">行業(yè)新聞</a></li>
				<li><a href="#">練習我們</a></li>
			</ul>
		</div>
	</div>
</div>


<script type="text/javascript">
//用于判斷導航欄的狀態(tài)
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);
})

//窗口大小發(fā)生改變
$(window).resize(function() {
	//獲取窗口寬度
	var windSize = $(window).width();

	if (windSize > 576) {
		$(".show").slideDown(0);
	} else {
		$(".show").slideUp(0);
	}
});
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權(quán)。

查看演示下載資源

607 14950 41