jQuery企業(yè)網(wǎng)站響應(yīng)式導(dǎo)航菜單代碼

使用方法：

1、head引入css文件

<!--默認(rèn)樣式-->
<link rel="stylesheet" href="css/reset.css" />

<!--響應(yīng)式框架-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<!--主要樣式-->
<link rel="stylesheet" href="css/head.css" />

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入HTML代碼

<!-- 導(dǎo)航 -->
<header class="header"> 
	<div class="container clearfix"> 
		<div class="fl left">
			<a href="javascript:void(0)" ><img src="image/logo.png" alt="" class="img1" /></a>
			<a href="javascript:void(0)" ><img src="image/logo2.jpg" alt="" class="img2" /></a>
		</div>
		<div class="fr nav"> 
			<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
				<li class="active">
					<a href="javascript:void(0)">首頁</a>
				</li>
				<li class="dropdown">
					<a href="javascript:void(0)">
						業(yè)務(wù)體系
					</a>
					<div class="dropdown_menu">
						<a href="#">二級菜單</a>
						<a href="#">二級菜單</a>
						<a href="#">二級菜單</a>
					</div>
				</li>
				<li class="dropdown">
					<a href="javascript:void(0)">直營園</a>
					<div class="dropdown_menu">
						<a href="#">二級菜單</a>
						<a href="#">二級菜單</a>
						<a href="#">二級菜單</a>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)">行知資訊</a>
				</li>
				<li>
					<a href="javascript:void(0)">關(guān)于我們</a>
				</li>
				<li>
					<a href="javascript:void(0)">聯(lián)系合作</a>
				</li>
			</ul>
		</div>
		<a href="javascript:void(0)" id="navToggle">
			<span></span>
		</a>
	</div>
</header>
<!--移動端的導(dǎo)航-->
<div class="m_nav">
	<div class="top clearfix">
		<img src="image/closed.png" alt="" class="closed" />
	</div>
	<div class="logo">
		<img src="image/logo2.jpg" alt="" />
	</div>
	<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
		<li class="active">
			<a href="javascript:void(0)">首頁</a>
		</li>
		<li class="dropdown">
			<a href="javascript:void(0)">
				業(yè)務(wù)體系
			</a>
			<div class="dropdown_menu">
				<a href="#">二級菜單</a>
				<a href="#">二級菜單</a>
				<a href="#">二級菜單</a>
			</div>
		</li>
		<li class="dropdown">
			<a href="javascript:void(0)">直營園</a>
			<div class="dropdown_menu">
				<a href="#">二級菜單</a>
				<a href="#">二級菜單</a>
				<a href="#">二級菜單</a>
			</div>
		</li>
		<li>
			<a href="javascript:void(0)">行知資訊</a>
		</li>
		<li>
			<a href="javascript:void(0)">關(guān)于我們</a>
		</li>
		<li>
			<a href="javascript:void(0)">聯(lián)系合作</a>
		</li>
	</ul>
</div>
<div class="banner">
	<img src="image/aa.jpg">
</div>
<div class="box" style="height: 1000px;">
	<h3 style="text-align: center; color: aliceblue">調(diào)整瀏覽器寬度大小查看效果</h3>
</div>

<script>
	$(function(){
		//超過一定高度導(dǎo)航添加類名
		var nav=$("header"); //得到導(dǎo)航對象  
		var win=$(window); //得到窗口對象  
		var sc=$(document);//得到document文檔對象。  
		win.scroll(function(){  
		  if(sc.scrollTop()>=100){  
			nav.addClass("on");   
		  }else{  
		   nav.removeClass("on");  
		  }  
		})   

		//移動端展開nav
		$('#navToggle').on('click',function(){
			$('.m_nav').addClass('open');
		})
		//關(guān)閉nav
		$('.m_nav .top .closed').on('click',function(){
			$('.m_nav').removeClass('open');
		})
		
		//二級導(dǎo)航  移動端
		$(".m_nav .ul li").click(function() {
			$(this).children("div.dropdown_menu").slideToggle('slow')
			$(this).siblings('li').children('.dropdown_menu').slideUp('slow');				
		});

	})
</script>