QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 導航菜單 > jquery黑色響應式導航欄代碼

福彩组选分布图: jquery黑色響應式導航欄代碼

基于jQuery制作黑色的響應式網站導航欄布局,通過調整瀏覽器大小,自適應不同寬度的導航欄代碼。這是一款簡單實用的響應式導航頁面。ps:改變瀏覽器大小查看演示。
分享到微信朋友圈
X

使用方法:

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="#">產品中心</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">
//用于判斷導航欄的狀態
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>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了