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天

知道了
亚洲28 www.121094.com-qq群老师带玩彩票| www.032007.com-香港419cc彩票| www.171227.com-1分快三彩票走势图| www.95508.com-福利彩票基金用途| www.474834.com-百盛金服彩票| www.370423.com-时时彩冷热号码统计| www.579188.com-鸿运搏彩论坛| www.692313.com-网上赌时时彩害死我| www.818958.com-有没有玩彩票高手| www.952647.com-78彩票app官网| www.ol1.com-河北快三预测一顶牛| www.09646.cc-彩票兑奖处是啥意思| www.wg06.com-福彩3d奖号今天| www.676.in-跟时时彩计划反买| www.623568.com-亿盈彩票登陆| www.788410.com-19042足彩分析| www.660405.com-腾讯ai彩数据| www.022350.com-彩票语录-| www.128035.com-彩虹第一集-| www.913768.com-万彩是如何赚钱的| www.4953.vip-盛源彩票网页手机版| www.529035.com-七乐彩绝杀一码| www.6289.cc-黑苍蝇3d彩报图| www.666251.com-乐彩国际注册| www.0431.space-福利彩票杀码| www.1321.top-500彩票黑平台| www.547701.com-足彩滚球让球| www.109289.com-彩票能破解吗| www.286345.com-炫乐彩票是赌博吗| www.194609.com-e球彩总进球数奖金| www.730264.com-快三比较稳的倍投法| www.867158.com-免费下载一定牛彩票| 500万彩票www.96386g.com| www.89dx.com-彩八官方-| www.901258.com-家彩网排列三开机号| www.og82.com-快三统计-| www.581111.com-天天看彩-| www.717230.com-世界名画彩铅画| www.28qs.com-幸运十分彩开奖官方| www.2781.cc-最大福彩论坛| www.578288.com-体彩背景图-| www.720342.com-怎么选七星彩| www.878771.com-竞彩什么叫双平| www.ab96.com-河北快三开奖时间| www.p60.biz-香港有快三吗| www.365528.cc-桃花枝彩铅画法| www.800025.cc-l彩票开奖结果| www.878456.com-网彩网站哪个好| www.945898.com-周口结婚彩礼多少钱| www.997395.com-福彩乐透-| www.ur3.cc-快三预测软件准吗| www.oy96.com-银川体彩中心在哪里| www.587623.com-香港c8万彩吧| www.97aw.com-易发彩票app下载| www.675580.com-意彩注册账号| www.808267.com-赢彩彩票不能买| www.952986.com-九州彩彩票-| www.cai5811.com吉林快三历史走势图| www.42yk.com-约彩365旧版本| www.ha25.com-幸运时时彩开奖记录| www.629583.com-下载aqq购彩| www.037135.com-彩吧助手彩种全走势| www.885308.com-玖富彩票正规吗| www.951674.com-足彩6串1全包技巧| 汇丰彩票www.hf0666.com| 三星娱乐www.sxyl8.com| www.04hq.com-彩铅桃花林怎么画| www.92wi.com-支付宝购物送彩| www.610094.com-做梦梦到买彩票中奖| www.713069.com-广东福彩微信号| www.801098.com-皇都彩票资料| www.880156.com-福彩专家杀码成绩| www.961026.com-七乐彩查询中奖号码| www.cai4277.com内蒙快三开桨| www.151581.com-搜索彩票88| www.562974.com-三位数体彩中奖| www.0245.cm-众乐彩体现多久到账| www.814872.com-燕赵福彩双色球| www.737665.com-福彩连环夺宝害死人| www.85hz.com-福彩快三出球号顺序| www.5091.cm-657彩票犯不犯法| www.368606.com-728彩票规律| www.093937.com-广州彩票软件开发| www.515599.com-彩票中奖打错了| www.pg54.com-彩票排列五走势图| www.20xc.com-彩票网页制作| www.nf90.com-华夏彩票快三| www.134728.com-福彩票开奖号码查询| www.fp98.com-竞彩足球直播| www.l00.xyz-福建快三实时走势图| www.na10.com-贵州快三多少期| www.46as.com-明木雕彩绘龙女立像| www.586305.com-送彩金导航栏| www.668541.com-复试彩票中奖规则| www.762038.com-施乐彩色复印机| www.918114.com-3d彩票鬼六神算| www.993302.com-足彩竞猜玩法介绍| www.8nt.com-南京福彩中奖| www.84vq.com-体彩店人群-| www.74641.cc-网球彩票怎么买| www.026216.com-黑彩平台代理加盟| www.735632.com-7星彩中奖概率| www.56904.com-腾讯分分彩4星漏洞| www.079085.com-足彩过关方式图表| www.982004.com-中国福利彩票开奖器| www.298798.com-时时彩买组六防组三| www.020441.com-38彩app-| www.313124.com-下载最新版乐米彩票| www.792799.com-绵阳市福彩中心电话| www.655845.com-神彩福牛是什么网络| www.xv08.com-80彩票提现-| www.88yh.com-庆寸时彩人工计划| www.134138.com-快三如何倍投| www.215335.com-快彩3-| www.279901.com-重庆5分时时彩| www.310296.com-甘肃快三推号软件| www.01634.com-彩票小诸葛时时彩| www.55bf.cc-福彩三d鬼六神算| www.8807.vip-七彩直播破解版| www.73984.com-捷豹彩票系统源码| www.087310.com-m5彩票官方网站| www.198298.com-七星彩开奖结果直播| www.013212.com-七星彩早版彩图版| www.953594.com-最贵的好彩香烟图片| 大赢家彩票平台www.703906.com| www.kr82.com-新浪足彩胜负彩分析| www.yn40.com-qq可以买彩票吗| www.5437.org-吉祥8彩票怎么样| www.517687.com-大胜彩票最新消息| www.584633.com-杭州足彩分析师招聘| www.652873.com-三d众彩网专家预测| www.759108.com-彩薇花化妆品怎么样| www.834088.com-74377好彩大全| www.892589.com-大发快三辅助器| www.108783.com-甘肃快三遗漏图| www.080845.com-体彩篮球cba竞猜| www.8398.pw-福彩3d和值形态| www.8104.net-玩高频彩都是输| www.954402.com-76cp彩票com| www.5840.vip-玖壹彩票官方网| www.894825.com-二分快三开奖| www.960943.com-彩票平台哪个返点高| 七彩www.53900b.com| www.6295.xyz-北京市3d彩票库图| www.28067.com-经典梯子彩票| www.65650.cc-彩票随机选号软件| www.7397.pw-色彩构成图片素材| 500彩票www.393477.com| www.g77.site-彩一万-| www.065915.com-彩吧助手55128| www.66031.cc-福彩预测交流讨论区| www.54eh.com-专业玩彩胡先生预测| www.112906.com-老梁观世界彩票| www.857165.com-卡加延博彩-| www.937611.com-7125彩票app| www.833986.com-杏彩官网注册账号| www.578526.com-兰州体彩转让| www.35vp.com-盈彩彩控制器接线图| www.1065.org-金钥匙时时彩计划| www.11652.cc-3d和跨走势彩乐乐| www.63895.cc-胜负彩可以机选吗| www.045155.com-彩票中奖利器| www.1035.com-速彩网app下载| www.597957.com-附近的体彩投注站|