QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery企业网站响应式导航菜单代码

jQuery企业网站响应式导航菜单代码

jQuery基于bootstrap样式库制作响应式的企业网站顶部导航下拉菜单效果,支持收缩展开,下拉显示代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--默认样式-->
<link rel="stylesheet" href="css/reset.css" />

<!--响应式框架-->
<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代码

<!-- 导航 -->
<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)">
						业务体系
					</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)">关于我们</a>
				</li>
				<li>
					<a href="javascript:void(0)">联系合作</a>
				</li>
			</ul>
		</div>
		<a href="javascript:void(0)" id="navToggle">
			<span></span>
		</a>
	</div>
</header>
<!--移动端的导航-->
<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)">
				业务体系
			</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)">关于我们</a>
		</li>
		<li>
			<a href="javascript:void(0)">联系合作</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">调整浏览器宽度大小查看效果</h3>
</div>

<script>
	$(function(){
		//超过一定高度导航添加类名
		var nav=$("header"); //得到导航对象  
		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');
		})
		//关闭nav
		$('.m_nav .top .closed').on('click',function(){
			$('.m_nav').removeClass('open');
		})
		
		//二级导航  移动端
		$(".m_nav .ul li").click(function() {
			$(this).children("div.dropdown_menu").slideToggle('slow')
			$(this).siblings('li').children('.dropdown_menu').slideUp('slow');				
		});

	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
澳门足彩 www.544644.com-网友教我做彩票| www.cai1800.com宁夏快三今日走势图| www.653696.com-cc彩票计划网| www.83901.com-福彩31期结果查询| www.581777.com-什么彩票每天签到| www.680969.com-买彩票一定会亏吗| www.456749.com-彩票提示标语| 九五彩票www.95666w.com| www.387502.com-软件彩天下-| www.qo8.cc-快频彩票官网| www.111655.com-淘彩app是干啥的| www.397170.com-福利彩票夺宝| www.555789.cc-五分彩个位计划规律| www.664290.com-中国福利七彩乐开奖| www.799806.com-体育彩票开奖7星彩| 大玩家彩票www.9478r.com| www.8322.org-东方彩票安全吗| www.ee44.com-赚佣金彩票代打| www.873.mobi-时时彩投注止损方法| www.888268.com-福利彩票如何分真假| 福彩www.15355m.com| www.917342.com-彩票黑平台怎么赚钱| www.997871.com-乐彩网排列5走势图| www.dd34.com-41亿彩票-| www.918747.com-博友彩app苹果| www.987297.com-709彩票官方网站| www.ax72.com-江西快三一定牛预测| www.45524.com-腾讯微彩-| www.73812.com-网上购福利彩票| www.285851.com-159竞彩足球| www.69593.com-99购十分彩-| www.183870.com-快三复式中奖规则| www.892509.com-3d试机号中彩网| www.985362.com-彩票平台代理大全| www.ap23.com-贵阳体彩-| www.43mn.com-彩票店员工管理| www.0064.loan-美国彩票开奖规则| www.dm78.com-澳门六星彩开奖| www.88795.com-玩彩的聊天工具| www.304623.com-体彩十一选五下载| www.389921.com-彩票核心秘密书籍| www.314996.com-七星彩加倍中奖规则| www.368131.com-①13彩-| www.739432.com-九九集团彩票| www.835765.com-好彩一八是什么意思| www.927866.com-新彩网字谜-| 亚投彩票www.ya066.com| www.a18.pw-快三最大的漏洞广西| www.89768.cc-福彩3地今天预测号| www.8919.biz-彩票刷单是什么| www.69718.com-彩票源码免费下载网| www.090738.com-广西体育彩票中心| www.187688.com-时时彩九码稳赚| www.286127.com-河南快三网络购买| www.22952.cc-中彩那天教案设计| www.81393.com-怎么玩快三能赢钱吗| www.215171.com-瑞彩祥云网址| www.238681.com-福利彩票选号| www.53296.cc-分分彩智能计划软件| www.197531.com-今晚七星彩开奖预测| www.319596.com-星彩无惨-| www.oo6.com-江苏省快三走势图| www.64of.com-体彩购彩客户端下载| www.304336.com-玩快三输了稳赢技巧| www.386293.com-南充市福彩中心站| www.292333.com-内蒙古快三预测视频| www.765407.com-足彩500万电脑版| www.874744.com-华彩快三网赚平台| www.958271.com-新乐彩是黑平台吗| www.kd6.com-江苏乐彩快三| www.tn07.com-在线时时彩算号器| www.09in.com-彩名堂广西快三| www.523523.com-幸运5分彩开奖| www.556000.com-七乐彩现奖池| www.dt23.com-街机快三游戏下载| www.3ck.cc-谁能出彩票被黑的钱| www.04876.cc-彩票3d彩吧助手| www.62173.com-体彩排三字谜汇总| www.4057.com-七星彩质合走势图l| www.64553.com-福彩快乐十分山西| www.060035.com-福彩3d如何玩| www.132672.com-世界杯竞彩网| www.949704.com-苏快三走势图| 易彩网www.99638g.com| www.2973.wang-360福彩3d杀号| www.9811.online七星彩巨奖排名| www.549715.com-网上怎么购买足彩| www.511734.com-好用的足彩外围| www.2698.wang-v8彩票靠谱么| www.37859.com-星光彩票怎么样| www.591071.com-沙巴博彩公司官网| www.596880.com-金彩网免费资料| www.47rl.com-博众彩票是黑彩吗| www.gl02.com-众彩app下载| www.409961.com-鸿发彩票帮投| www.990879.com-彩吧网站-| www.2176.in-福彩3的今天彩涂| www.3164.biz-手机版彩票开奖| www.84rw.com-乐赢彩票网址登录网| www.811485.com-成都享鸿彩-| www.80pn.com-福星彩票合法吗| www.w11.site-qq赌快三的群| www.76wj.com-福彩式机号-| www.sh63.cc-五分时时彩开奖记录| www.23wl.com-福彩50倍-| www.197229.com-乐彩赢靠谱不| www.312733.com-双彩论坛官网手机版| www.399777.com-南国七星彩论坛群| www.507523.com-955娱乐彩票网| www.51186.com-一彩票下载-| www.495559.com-博彩怎么推广有效| www.401855.com-7月30七星彩| www.605511.com-有什么好的彩票平台| www.218311.com-福彩快三官网合法吗| www.sz70.com-国彩是啥-| www.8265.top-百赢快三彩票app| www.90805.com-80彩票软件下载| www.595586.com-鑫彩网快三是真的吗| www.647656.com-吉林快三庄家输钱| www.629285.com-搜狗福彩-| www.760278.com-时时彩开奖时间更改| www.8259.top-聚彩jc-| www.691669.com-新浪胜负彩必发指数| www.860392.com-鼎盛彩票平台网址| www.971904.com-九万彩票的网址| www.cp2805.com-快三街机-| www.361666.cc-九亿彩票怎么提现| www.194674.com-快三胆码公式| www.62fk.com-福彩3d高手杀两码| www.0136.cc-有彩色系包括| www.613691.com-福彩欢乐声肖| www.70fk.com-福利彩票管理办法| www.321081.com-南国彩票论坛坛特区| www.4924.pw-足彩胜负彩开奖时间| www.128417.com-模拟彩票投注技巧| www.8262.vip-福彩助手怎么用不了| www.708238.com-彩票被骗有追回的吗| www.848126.com-彩票818cp-| www.c38.cc-二元彩票-| www.09792.com-中国山东彩友沙龙| www.426772.com-重庆时时采彩龙虎群| www.128217.com-浪琴一天快三秒| www.233523.com-精彩时分走势图| www.4fo.com-16年彩票大奖| www.140019.com-ee彩骗局-| www.099122.com-快三图号码表| www.38362.cc-体彩排五的走势图| www.220013.com-481网上购彩平台| www.509258.com-福彩七乐彩单式| www.722923.com-xy1688彩票-| www.871419.com-彩富网最快报码室| www.gc41.com-新快三手机版| www.2839.cm-彩票今日开奖查| www.41370.com-国家高频彩时间调整| www.311856.com-网络彩票推广话术| www.65dz.com-老杨说彩字谜汇总| 福彩www.15355a.com| www.vk20.com-易彩国际时时彩骗局| www.34431.com-诚信快捷彩票app| www.yz55.com-宁夏11选彩控| www.38bb.com-网上教买彩票赚钱的| www.5515.shop-彩票销售点加盟| www.9748.vip-大乐透在线彩宝网| www.68560.com-福彩三毛图库总汇|