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.su81.com-时时彩诈骗最新案例| www.67pz.com-足彩销售额-| www.1946.mobi-讯彩是黑平台吗| www.8221.loan-今天澳门彩票| www.35386.com-彩神通破解| www.86698.com-上彩传媒-| www.054255.com-9780彩票-| www.231906.com-彩票121走势网| www.313017.com-华夏彩票手机版| www.391835.com-3d零一彩网-| www.543077.com-今天福彩排三开奖号| www.636790.com-重庆时时彩选号工具| www.732019.com-胜负彩模拟投注| www.814285.com-福利彩票双色球讲解| www.895132.com-南京华彩赢家合法吗| www.961429.com-福彩3d牛彩图谜| 梦想彩票站www.43131f.com| www.gs00.com-大发快三彩票合法吗| www.a11.club-新浪爱彩手机版| www.41cw.com-体育彩票休假时间| www.650.live-福彩一定牛彩票网| www.5038.live-3d彩乐园-| www.10408.com-进球网竞彩推荐| www.59200.com-600万彩票网| www.084199.com-玩极速快三输了2万| www.158178.com-北京pk彩票-| www.261955.com-彩票查询排列五| www.356112.com-公益体彩宣传语图片| www.450394.com-大富翁彩票网址| www.550799.com-福彩网址导航| www.657655.com-女子彩票中51亿| www.737017.com-可以买彩票的公众号| www.803553.com-年后七星彩何时开奖| www.881590.com-19017期体彩| www.995387.com-北京彩民中奖| www.to0.com-江苏快三奖金对照表| www.rt29.com-有没有中发彩票被骗| www.11mw.com-577彩票apk-| www.84hl.com-天天彩票的网站大全| www.2379.wang-七彩山鸡多少钱一只| www.8255.in-江西快三走势2元网| www.31969.cc-易彩堂彩票靠谱吗| www.77115.cc-天玺彩票注册| www.028765.cc-吉林快三推荐号和值| www.107208.com-即开快彩-| www.178512.com-五分彩在线计划| www.260680.com-福彩3d彩神反面| www.337745.com-西宁福利彩票中奖| www.420208.com-彩票投资指南报| www.531977.com-彩票33官网下载| www.776752.com-彩宝宝安全吗| www.868871.com-七星彩规律图今天的| www.940235.com-吉林快三公司地址| www.997211.com-88爱彩正规吗| www.st0.com-爱彩乐彩票广东快乐| www.qn26.com-pc彩票是什么意思| www.5kj.com-福彩主任冯亚平籍贯| www.57gx.com-福彩36o全国开奖| www.0377.cc-休闲快三表演| www.8818.vip-所有彩票开奖软件| www.42211.cc-彩12彩票坑人| www.91677.cc-好彩香烟哪种好抽| www.054886.com-黑彩平台如何拉人| www.161386.com-广州体彩投注站| www.250666.com-彩票306官网| www.321736.com-海南七星彩梦册查询| www.391230.com-七星彩打击海南私彩| www.537811.com-彩色宝石名称| www.625015.com-福彩过年-| www.693521.com-中国福彩超级大乐透| www.774899.cc-中500万彩票的码| www.879313.com-刮刮彩中奖图片| www.950129.com-一定牛彩票是假的吗| www.992840.com-彩票团队微信兼职群| www.ci3.com-吉林福彩快三开奖号| www.ny49.com-安徽省福彩快3| www.17.tv-各彩票平台漏洞| www.66th.com-因彩票打官司的案例| www.0755.gg-三三娱乐彩票平台| www.8640.vip-中乐彩平台靠谱吗| www.39892.cc-彩票巴士推广号| www.85813.com-99彩票软件-| www.036132.com-免费彩计划-| www.136655.com-海南福彩app| www.209646.com-福彩快开彩开奖结果| www.280531.com-乐乐彩票和法吗| www.380852.com-福彩天天-| www.499979.com-彩票计划师靠谱吗| www.565808.com-足彩滚球技巧| www.633028.com-成都七彩田野好玩吗| www.701551.com-五亿彩票网是哪里的| www.776677.com-东方彩票是骗局吗| www.893634.com-中大奖彩票软件| www.951341.com-哪个彩票网站最好| www.26792.com-彩票开奖几点不买了| www.70606.com-内蒙福彩快三玩法| www.029137.com-有玩同乐彩票的吗| www.102019.com-福彩和值振幅走势图| www.169962.com-苏州快三开奖结果| www.272985.com-福彩天地报纸答案| www.356847.com-福利彩票开奖分析| www.439998.com-渭南彩票站转让| www.532108.com-彩票中奖金符咒法| www.895350.com-爱彩票快三软件下载| www.947769.com-四川彩票-| www.985857.com-福彩3d狐不归预测| www.cai223.com-快三彩票在线投注| www.jg93.com-趣客站网彩是什么| www.zu61.com-汇彩国际平台| www.22sx.com-今天让去买彩票吗| www.763.mobi-时时彩有漏洞嘛| www.4131.org-彩虹的重力苏东霖| www.9002.org-大众彩票网登录| www.85255.com-奖聊出品彩票走势图| www.033683.com-时时彩五星定胆公式| www.125412.com-体彩开奖查-| www.190836.com-河北福彩3d试机号| www.258197.com-快三官网下载安装| www.360653.com-高平彩-| www.442987.com-足彩计划单坑人| www.528717.com-复式彩票概率| www.641668.com-彩票最上面的序列号| www.725976.com-爱普生彩色打印机| www.791480.com-微信扫码玩彩票| www.861138.com-合肥市体彩中心电话| www.919111.cc-买外围网站彩票| www.968105.com-中港彩票网-| www.pj57.cc-彩票计划手-| www.r21.shop-私彩快三漏洞| www.39xl.com-巨丰彩票网址| www.962.tv-体彩七星彩投注| www.5588.website正规的彩票分析团队| www.01857.com-彩票101-| www.55315.com-香港博彩堂-| www.96181.com-中国彩票最大弃奖| www.051929.com-贵州快三游戏规则| www.146283.com-七乐彩专家预测汇总| www.224510.com-发彩网买彩票可靠吗| www.288120.com-cc优彩社区-| www.369446.com-611彩票-| www.449455.com-腾讯分分彩输了3万| www.529719.com-大金鸡七星彩下载| www.620259.com-快三豹子之后出什么| www.679404.com-痴迷彩票家破人亡| www.747767.com-大富豪彩票游戏| www.803957.com-湖北快三十大技巧| www.870256.com-吉林市黑彩-| www.968812.com-下载乐彩vip官网| 大赢家彩票平台www.117015.com| www.ea45.com-葡京快三彩票| www.su37.com-彩票双色球规则玩法| www.10uw.com-四季彩代理最高返点| www.70gv.com-深圳彩易达招聘| www.0287.net-丢硬币玩彩票| www.7130.com-七彩音符快乐颂下载| www.15638.cc-水溶彩铅风景画| www.52699.cc-好彩店比分-| www.88687.cc-河北快三是什么彩票| www.030980.com-九龙彩票是不是骗局| www.097185.cc-体彩公益金分成比例| www.150897.com-湖北快三直播画面| www.336300.cc-彩票网提现不了| www.395496.com-今天福利彩-| www.512879.com-玩彩网安卓-|