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.8910.site-浙江体育彩票网官网| www.356073.com-彩票算法软件| www.522105.com-彩票贩卖机代理| www.94696.com-足彩一球盘解析| www.334754.com-江苏快三走势定牛| www.41800.com-中彩吧平台安全吗| www.599250.com-悠悠彩票官方下载| www.986088.com-老牛足彩推荐| www.he08.com-快三湖北-| www.34fu.com-廉江哪里有七星彩打| www.0363.xyz-三毛彩吧平台app| www.109681.com-福彩三地分析预测| www.892277.com-福彩三d过滤软件| www.994838.com-买彩票兼职是真的吗| www.bw66.cc-爱彩乐网站-| www.55318.cc-体育彩排列五| www.092391.com-福建体彩论坛擂台赛| www.183193.com-快三有人带是真的吗| www.263778.com-网购彩票app| www.537172.com-哪种彩票天天开奖| www.80bn.com-万金集团彩票合法吗| www.5566.date-d8彩票-| www.87549.com-98彩票靠谱-| www.yu01.com-网易彩票真假问题| www.4409.vip-福彩3d是多倍数| www.567005.com-彩票k8网-| www.656797.com-江苏快三玩法教程| www.730423.com-老梁揭秘彩票那点事| www.801505.com-能猫彩票-| www.873664.com-三的彩票还有试机号| www.940445.com-快三平台真假| www.988846.com-pk10彩票网-| www.lp2.cc-内蒙快三新规则| www.001530.com-快三中123多少钱| www.241833.com-七乐彩玩法中奖规则| www.787444.com-竞彩赛程表-| www.883788.com-彩界九歌独胆| www.984734.com-福利彩8在哪发计划| www.pf2.cc-哪个彩票软件最好| www.tr62.com-台北快三走势图| www.848540.com-老时时彩宝典下载| 68彩票www.68682c.com| www.4532.cm-19036体彩-| www.50001.com-5oo万彩票网首页| www.670009.com-天涯社区海南彩票| www.978961.com-体彩大乐透网上投注| www.fo31.com-一分快三技巧规律| www.984386.com-亚博彩票app下载| www.0330.cn-时时彩真有人能改单| www.16vt.com-双彩论坛字谜总汇| www.771994.com-东方彩票注册送47| www.352313.com-一出好戏里的彩票号| www.077925.com-玩彩网官方网站| www.6688.cm-彩神网邀请码是什么| www.012109.com-昨天晚上彩票中奖号| www.701779.com-中国彩下载| www.552952.com-福利彩票一般买几注| www.749865.com-今晚彩票开奖查询| www.0214.in-时时彩杂六半顺玩法| 500彩票www.52072h.com| www.070321.com-彩神争8靠谱吗| www.4398.in-有什么彩票计划软件| www.236203.com-杭州体育彩票六加一| www.86yh.com-深圳体彩11选五| www.5052.cc-彩界老翁独胆| www.508002.com-大乐透购彩计算器| www.733807.com-彩票改规则2月11| www.860828.com-高频彩app下载| www.cp3122.com-快三游戏单机版下载| www.w36.club-吉林快三群主跑路| www.024033.com-福利彩票中三个号码| www.b37.org-福彩3地全图总汇八| www.oa79.com-彩99旧版本-| www.123587.com-3d牛彩今日杀码图| www.942097.com-170彩票最新| www.dx45.com-吉林快三网盘| www.9qh.com-微博彩票合法吗| www.283272.com-七星彩奖表图最新| www.lj16.com-彩票app加奖| www.66zj.cc-腾讯分分彩游规则| www.416882.com-彩图诗句解特网址| www.466871.com-七乐彩是个好多少钱| www.407980.com-安装够力七星彩| www.266551.com-江苏快三算不算赌博| www.969446.com-彩票计划员违法吗| www.cp3900.com-湖北福彩快三预测| www.887390.com-下彩彩票客户端下载| www.375028.com-五分⑥和彩方法| www.3277.win-四场进球彩开奖结果| www.8147.vip-港彩正版彩图挂牌| www.070044.com-体育彩票中奖图片| www.305170.com-体彩秘籍-| www.28278.cc-正版彩票指南彩报纸| www.038958.com-i8彩票台子怎么样| www.378948.com-足彩竞彩赛果开奖| www.379577.com-彩票啥时候开奖| www.553739.com-搜索山东福利彩票| www.813810.com-腾讯彩票游戏在哪玩| www.972641.com-春天美景彩铅画| www.9qe.com-今晚开七星彩规律图| www.925058.com-爱福彩彩票开奖| www.135426.com-彩票站可以赊账吗| www.502306.com-星际彩票平台多久了| www.322832.com-河北福彩快3开奖| www.536121.com-金冠彩票骗局| www.658501.com-大发快三优信| www.136253.com-苏州福利彩票加盟| www.2151.xyz-中国有多少种彩票| www.009514.com-123福彩票开奖| www.us56.com-时时彩单双技巧规律| www.26296.com-吉林时时彩走势图| www.088179.com-澳客彩票安卓| www.244211.com-体彩网大乐透预测| www.946607.com-河南周口的彩礼| www.894897.com-皇家科技时时彩宝典| www.968372.com-福建快三和值表| www.7207.loan-福利彩票黑彩| www.33871.com-彩吧试机号查询| www.618548.com-乐彩走势图app| www.365812.cc-什么彩铅涂得逼真| www.795295.com-11选5时时彩上海| www.400771.com-排五新浪爱彩走势图| www.273117.com-什么叫福彩-| www.484062.com-好彩客app最新版| www.855846.com-海南七星彩打什么码| www.973374.com-羽泉彩虹原版| www.ny84.com-尊彩网app-| www.55zv.com-安庆体育彩票店在哪| www.220261.com-炫乐彩票官方网站| www.351996.com-竞彩代理返点| www.22088.com-彩票诈骗破案案例| www.82163.com-诚信彩票cx88| www.49er.cc-摘彩虹冰淇淋| www.541163.com-高频彩稳定盈利模式| www.024130.com-福彩前面中3个| www.054138.cc-彩神霸百姓彩票| www.113907.com-五分快三计划群骗局| www.104084.com-哪个彩票网正规| www.104928.com-雷霆彩票-| www.48vv.com-三国梦想星彩惨无| www.598413.com-体彩第19027期| www.ph48.com-传统彩骗局-| www.45905.com-幸运赛车彩票| www.002828.cc-广西十分彩开奖漏开| www.072551.com-六亿彩票网址| www.809195.com-英慱彩票-| www.992653.com-七乐彩开奖玩法说明| www.ge08.com-福彩七乐彩没人买| www.3rt.cc-爱乐透彩票门户网站| www.810218.com-足球竞彩腰折怎么算| www.910528.com-彩93彩票app| www.985804.com-自贡市福利彩票点| www.mf2.com-上海快三兑奖地址| www.vf59.com-体彩十一选五江苏| www.lu20.com-搜神传的好彩妹| www.23jk.com-韩国彩票犯法| www.653119.com-七乐彩中奖奖金多少| www.739389.com-体彩编号-| www.820844.com-凉山拆彩钢瓦| www.890283.com-花生彩票平台| www.951706.com-必赢彩票是真的吗| www.co46.com-吉林快三全天计划| www.081660.com-彩票几个数字| www.76mm.com-足彩开奖公告竞彩|