jquery黑色響應(yīng)式導(dǎo)航欄代碼

基于jQuery制作黑色的響應(yīng)式網(wǎng)站導(dǎo)航欄布局，通過調(diào)整瀏覽器大小，自適應(yīng)不同寬度的導(dǎo)航欄代碼。這是一款簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎ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="#">練習(xí)我們</a></li>
			</ul>
		</div>
	</div>
</div>


<script type="text/javascript">
//用于判斷導(dǎo)航欄的狀態(tài)
var toggle = true;

//導(dǎo)航欄按鈕
$('.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. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

606 14884 41