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.48833.cc-竞彩足球158网| www.053189.com-500彩票资讯网| www.09362.com-好彩1规律-| www.92388.com-世界杯竞彩比分直播| www.s89.com-微信合买彩票| www.968909.com-香港的彩金是真的吗| www.lt38.com-好彩5分快3-| www.1oz.cc-体彩湖北兑奖地址| www.82sj.com-足彩返奖率-| www.91997.com-金彩网天空彩喜中彩| www.158294.com-足彩推荐杨震任九| www.040365.com-368彩票自动投注| www.95id.com-多彩投的失败案例| www.003587.com-为啥有钱人不买彩票| www.366363.com-清乾隆古铜彩牺耳尊| www.456077.com-蚂蚁彩票输死多少人| www.560293.com-登陆全民彩票可靠吗| www.623816.com-14场胜负彩app| www.687700.com-139彩票客户端| www.760493.com-安徽快三加奖方法| www.837959.com-买彩票要多少钱| www.899518.cc-手机彩票平台大全| www.963067.com-三d彩神通预测| 幸运彩票网www.33598x.com| www.ek63.com-欧阳霄贵州体彩| www.xh37.com-福利彩快三开奖结果| www.34ie.com-彩吧图库蓝精灵| 彩吧www.586198.com| www.i10.org-酷彩吧-| www.42ev.com-彩票平台源码在哪找| www.836.date-重庆五分彩开奖号| www.864323.com-三地字谜总汇新彩网| www.941201.com-阿里淘彩彩票娱乐| www.997363.com-快三怎么算下期和值| www.dg28.com-福彩快三官方直营| www.xn17.com-快易彩票app下载| www.23eh.com-彩票排列五玩法| www.4553.cm-7星彩历史比较器| www.36728.cc-香港有啥彩票| www.403747.com-彩票摇奖球大小| www.888149.com-七星彩梦书查码| PK彩票www.230757.com| www.77rw.com-彩票七天乐靠谱么| www.41227.com-335彩票下载安装| www.088001.com-共赢彩票计划| www.238061.com-发彩网下载到手机| www.368283.com-浙江体彩超级大乐透| www.567142.com-彩虹台直播源地址| www.2564.cc-爱音乐彩铃电信在哪| www.66420.com-京东彩票游戏赚钱吗| www.158118.com-正版新粤彩图今晚| www.032144.com-足彩精算师-| www.198409.com-传统彩票网站| www.330774.com-彩票团队-| www.578935.com-福彩3d杀码图专区| www.712068.com-体育彩票6十1全中| www.31975.com-彩票360彩票| www.62yj.com-彩票代销证一般几年| www.9956.loan-体彩开奖彩票开奖| www.w77.biz-足彩310的意思| www.937812.com-3d彩吧首页-| www.9340.cc-有线电视球彩台| www.177054.com-新快三个位走势图| www.887356.com-体育彩票算赌博吗| www.24537.com-彩票中奖后的人下场| www.20ur.com-体彩排列五太难了| www.55171.com-天天微彩-| www.46377.com-天天中彩票发财| www.pz6.com-彩票走势图3d| www.48gf.com-彩票软件推广哪家好| www.94944.cc-福彩在线怎么玩的| www.538135.com-86552国彩平台| www.12979.cc-2004体彩6十1| www.176252.com-湖北快三单期计划| www.278018.com-最新彩票指南报| www.361295.com-彩蚕图片-| www.472501.com-3d天吉彩票论坛| www.571507.com-哪里有快三直选| www.661462.com-今天三d彩报图| www.791557.com-彩票店招人-| www.886961.com-微信美女买彩票骗局| www.999153.com-京彩app安全吗| www.07hk.com-彩铅小雏菊画方法| www.1315.cm-彩票排列三试机号| www.838382.com-江苏快三人为控制吗| www.cg89.com-江苏快三下载苹果版| www.784103.com-福乐彩网站是骗局| www.804045.com-福建体彩聊天室直播| www.857672.com-彩之源彩票合法吗| www.mz52.com-彩票开奖源软件| www.6064.cn-奇门预测彩票技巧| www.638153.com-宜州足彩店电话| www.280144.com-重庆福彩官网首页| www.447277.com-迷彩短裤配什么鞋| www.833937.com-赔率最高彩票平台| www.1367.cm-海南举报私彩| www.832752.com-七彩图片高清| www.951999.cc-彩神计划破解充钱| www.cr9.com-快三能玩吗-| www.2do.cc-竞彩老是输怎么办| www.657739.com-江苏快三手机客户端| www.863.site-时时彩买法稳| www.355863.com-足球竞彩交税规则| www.yn41.com-快三提前开奖漏洞| www.157536.cc-足球彩票十四场| www.687992.com-微信推荐福彩号码| www.648.live-今福利彩票开奖号码| www.76228.com-什么彩五分一期| www.902797.com-手机体彩客户端下载| www.2145.cn-双福网福彩3d| www.953521.com-港版红好彩-| www.101161.com-彩票趋势软件| www.016330.com-国家足彩认证培训师| www.326855.com-江西快三年爱彩乐| www.954512.com-安微快三形态走势| www.16795.cc-瑞彩祥云幸运快3群| www.1798.tv-高频彩正规平台| www.50389.com-彩票网站制作源代码| www.951138.com-最有信誉的彩票网站| www.905462.com-中国彩app下载| www.854414.com-金冠彩票软件下载| www.081045.com-大乐透彩研师| www.509378.com-利彩机械-| www.712714.com-cp彩票官网下载| www.856111.cc-福少时时彩计划软件| www.310856.com-惠明彩票-| www.098865.com-数字型彩票玩法| www.426288.com-中国福彩彩吧图库| www.18ph.com-我所在的福彩店| www.219374.com-福建省体彩-| www.718.tv-宝乐彩票登录| www.258359.com-华厦彩票-| www.25293.cc-初学者画彩铅画什么| www.03226.com-彩票计划在哪看| www.365457.cc-如何控制大发快三| www.906532.com-彩票中奖符头像| www.04rh.com-初学者买几色的彩铅| www.53221.cc-腾讯分分彩帝宏| www.255112.com-十大彩票排名| www.287396.com-彩票软件网上搜不到| www.725763.com-彩色笔-| www.vt15.com-快三选号技巧| www.512271.com-清新彩铅画图片大全| www.686377.com-500博彩下载| www.85533.cc-被爱博彩票套路| www.33kq.com-2元彩3d走势图| www.021064.com-七乐彩走势图代连线| www.813504.com-福彩3d牛材网首页| www.4181.cn-北京七彩集团官网| www.61026.com-非法网络彩票| www.167811.com-彩票快3有规定吗| www.431004.com-彩票行家首页| www.636748.com-彩虹画儿童画用彩笔| www.87470.com-白马彩票-| www.869422.com-海南七星彩稳定赚钱| www.078580.com-盈彩在线下载安装| www.170742.com-吉林省长春快三开奖| www.817276.com-彩七七官网-| www.983803.com-聚财神是正规彩票吗| www.h59.club-博皇走势预测快三| www.50264.com-wcp玩彩票-| www.132406.com-兰考彩礼风俗| www.358968.com-买体彩中大奖| www.702264.com-足彩任九全中多少钱|