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.808111.com-优彩彩-| www.527092.com-彩神x娱乐-| www.277444.com-七星彩三字现| www.436459.com-纽约彩票大奖| www.277086.com-现在彩种是十分钟| www.817891.com-足彩第19025期| www.938721.com-上海福利天天彩选4| www.kn7.com-吉林快三半顺是指| www.yg94.com-快三怎样倍投才稳| www.43iv.com-彩色沥青道路做法| www.062327.com-乐彩网排三开奖结果| www.07150.com-一定牛快三豹子预测| www.059102.com-竞彩即时比分| www.200552.com-福彩一个月开奖几次| www.880219.com-福彩预测分析彩吧论| www.412463.com-彩票在线计划员| www.679094.com-旺彩网天下神胆| www.872144.com-遵义彩票中奖信息| www.981708.com-吉利彩票网投可靠吗| www.vy62.com-福彩快3图片| www.783.bid-彩票复试什么意思| www.511066.com-六色彩虹代表| www.643576.com-彩票7168-| www.871563.com-福利彩票快乐彩玩法| 盛彩网www.41518r.com| www.z02.xyz-500万胜负足彩| www.195758.com-彩种怎么玩-| www.2992.wang-3550幸运彩票| www.915202.com-盈盈彩票网站| www.307950.com-初学者如何买彩票| www.407337.com-乐彩彩票线路导航| www.550184.com-购彩平台推荐| www.329521.com-深圳福彩开奖结果| www.y03.club-体彩每日开奖结果| www.80qp.cc-中国彩网app| www.61087.com-第一彩票网站首页| www.039301.com-网上彩票跟投骗局| www.574801.com-乐购彩票真假| www.193118.com-韩国快三可靠吗| www.277737.com-破解彩票平台网站| www.353629.com-亚洲博彩公司名称| www.358598.com-23彩票下载平台| www.465227.com-看陆和彩开奖| www.557053.com-九度彩票主页| www.621109.com-众赢彩票正规吗| www.686498.com-cp544彩票-| www.758074.com-中彩网专家预测汇总| www.850233.com-竞彩7串21-| www.923338.com-彩票门市关门了| www.979400.com-好彩柠檬爆-| www.cp404.com-江苏快三网络投注| www.998214.com-北京福彩咨询在哪里| www.970204.com-国彩登录平台| www.237357.com-体彩浙江6+1规则| www.348532.com-中国足彩现场直播| www.512775.com-凤凰彩铅画图片| www.612961.com-体育彩票大乐中奖人| www.781147.com-彩票飞鱼走势研究| www.898257.com-河南福彩扫一扫下载| 全民汇彩票www.52303r.com| www.rq51.com-彩票赔-| www.21ml.cc-彩票站投诉热线电话| www.889130.com-彩店宝下载不了| www.981931.com-红彩会彩票下载| www.bw56.com-九州彩票新快3| www.b20.space-彩29彩票官网安卓| www.21jt.com-苹果版澳客彩票| www.697010.com-江苏体彩网e球彩| www.823161.com-彩涂铝卷的价格| www.989069.com-最新的彩票分析软件| www.342894.com-神彩网论坛永不卖料| www.87py.com-湖北省体彩中心电话| www.5519.cn-八方联彩-| www.cp219.com-快彩3app-| www.qw48.com-重庆时时彩开奖| www.cm40.com-福彩快三是怎样玩的| www.137390.com-福彩快三怎样注销| www.4764.cc-永盛彩票官-| www.017154.com-彩票店怎么赚钱| www.125255.com-福彩开奖号今天的| www.53195.cc-名人彩票网官方网站| 网易彩票www.36788j.com| www.81jx.com-足彩胜负彩单注奖金| www.583076.com-中彩票动态图| www.710922.com-巅峰对决50元彩票| www.799112.com-大发快三全天走势图| www.878824.com-江西快3彩票下载| www.963755.com-彩虹羽泉吉他谱| www.783.website彩霸王·论坛高手| www.45936.com-彩票设赌-| www.50lz.com-足球彩绘-| www.xw18.cc-彩6官方彩票网| www.25ew.com-软件彩天下-| www.384.cm-领彩网论坛-| www.825720.com-山西快三查询结果| www.992110.com-手机彩视全民k歌| www.46km.com-王牌彩票口碑怎么样| www.627106.com-双彩论坛怎么打不开| www.110861.com-春节后彩票开业时间| www.719001.com-雨后彩虹的成因| www.96ln.com-高频彩计算公式| www.8447.cc-新星彩票app| www.iy67.com-火箭彩票平台vip| www.8555.cc-亿乐彩登录网址| www.4843.xyz-彩票app6-| www.24150.cc-3d预测专家彩乐乐| www.167525.com-北京快三助手下载| www.239265.com-买彩票快3犯法吗| www.130730.com-狂人时时彩后二技巧| www.0634.win-彩票计算软件哪个好| www.kt24.com-上海福利彩票双色球| www.4an.com-买彩票破产-| www.293.biz-赢在乐彩-| www.ob70.com-百盈快三和值怎么才| www.456914.com-vr时时彩接口| www.cp067.com-江苏快三和值走势图| www.290562.com-3d彩宝网牛胆| www.998217.com-七星彩早版与加急版| www.ms64.com-我要中彩票官网| www.734608.com-快乐彩开将结果| www.871176.com-星彩3d网址多少| www.cp8339.com-上海福彩快3爱彩乐| www.ns47.com-福彩兑奖方式| www.508.tv-赚赚彩-| www.6445.vip-快三有多少对子| www.22668.com-彩票老势走势图下载| www.480116.com-和彩云每月收费多少| www.67vq.com-彩钢泡沫夹芯板价格| www.707869.com-新345彩票-| www.633230.com-竞彩过关方式容错表| www.999702.com-体彩排列五两元网| www.11ap.com-中彩网址大全| www.152637.com-快三安徽开奖| www.670980.com-赢网彩票-| www.879032.com-澳门福彩快三查询| www.540567.cc-彩乐园彩票怎么样| www.73731.com-闽南泉州体彩聊天室| www.407878.com-吉林快三秘诀| www.65711.cc-长春快三黑彩| www.d89.cn-68彩票网彩种| www.576749.com-2019彩票图片| www.742000.cc-730彩票网登录| www.120801.com-彩票多少天内兑奖| www.366645.com-广州彩票兑奖中心| www.513451.com-秒秒彩票靠谱吗| www.358024.com-吉林快三1期计划| www.595395.com-双双彩论坛网| www.901317.com-彩票的常识-| www.27xx.com-注册彩金时时彩| www.38571.cc-用户注册送19彩金| www.no02.com-甘肃体彩助手在哪里| www.43ec.com-福彩万能七码吗| www.90.cx-彩票快乐十分音乐| www.312066.cc-红牛彩票破解| www.l28.cc-两元彩票网大乐透| www.62xe.com-中国体彩排五| www.8999.win-百度乐彩彩票可靠吗| www.155115.com-希腊十分彩下载安装| www.54377.cc-vr时时彩漏洞刷钱| www.802717.com-福彩开奖解果| www.25bt.com-华彩彩票网-| www.5078.biz-中国体彩最大中奖| www.902527.com-彩票自动售票机加盟| 500彩票www.3126v.com|