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天

知道了
1分快三 www.583167.com-百位杀号彩经网| www.089001.com-最新彩票33安卓版| www.079797.com-福彩3d规律-| www.170226.com-快三三不同号怎么玩| www.231077.com-彩73彩票-| www.107191.com-博彩娱乐导航网址| www.217081.com-彩票指南报纸手机版| www.536859.com-福利彩票分为哪几种| www.358936.com-北京快三彩票网点| www.k13.bid-中国新彩吧网| www.975934.com-狂人时时彩后二直选| www.69858.cc-彩运8.首页-| www.46qb.com-红彩app靠谱吗| www.25725.com-菜鸟彩票app| www.44jo.com-彩票缴款通一支付宝| www.505659.com-黑彩网站怎么破解| www.731972.com-重庆结婚要彩礼吗| www.886197.com-彩票676-| www.ca07.com-时时彩快3怎么赚钱| www.41486.com-玩彩票这个软件| www.62098.com-彩票查询双色球开奖| www.206349.com-快乐彩历史开奖号码| www.391332.com-该彩种暂停销售| www.594929.com-七星彩数字计算器| www.750896.com-今晚七星彩开奘结果| www.151508.com-中彩网用户注册| www.500221.cc-网络彩票开售新闻| www.636673.com-礼拜六开什么彩票| www.764124.cc-彩678怎么下载| www.855780.com-七乐彩3十1有奖吗| www.949176.com-快三遗漏数据江苏| 杏彩www.00840h.com| www.592285.com-七星彩解梦查码| www.688353.com-uu彩票网-| www.765900.com-喜盈盈彩票网| www.851422.com-体彩单式票开奖| www.916107.com-体彩店转让最新信息| www.982984.com-致享7彩福-| www.pm3.cc-福建体彩-| www.324253.com-和乐彩票是真的吗| www.028275.com-彩之王下载地址| www.573908.com-趣趣彩票-| www.704579.com-足彩胜负比分开奖| www.791761.com-六彩彩票-| www.6868.gg-浙江飞鱼体彩| www.1357.cc-买博牛彩票算赌博吗| www.594488.com-彩虹连接-| www.685698.com-武威快三走势图| www.769664.com-55彩票ios-| www.846039.com-足球彩票圈贴吧| www.930474.com-买彩票中大奖| 乐盈彩票www.gy11.com| www.09ic.com-福彩3d缩水彩乐乐| www.63895.cc-胜负彩可以机选吗| www.022925.com-中奖概率最高的彩票| www.112076.com-98c彩票登录| www.181282.com-福彩快3官网下载| www.272306.com-怎么玩快三才能赚| www.239219.com-天天福彩是正规的吗| www.826822.com-开体育彩票竞彩店| www.527098.com-博盈彩票是诈骗吗| www.616511.com-微信小程序彩票制作| www.802054.com-体彩38期开奖| www.882880.com-宏达彩票靠谱吗| www.963896.com-菠萝彩软件靠谱吗| www.us63.com-快三计划单双| 乐彩网www.4189e.com| www.204111.com-七乐彩专家-| www.280630.com-在线模拟彩票投注| www.o23.cn-网络彩票输了| 乐彩网www.60ksw.com| www.80zl.com-一三五台湾福星彩| www.4583.cc-彩票店春节开门营业| www.661491.com-易彩票是什么| www.751194.com-博牛彩票app登录| www.835165.com-lol炫彩皮肤| www.922175.com-3168彩票-| www.xf.com-彩票倍投-| www.pg66.com-福彩走势图app| www.8xh.com-掘金团队彩票微信| www.4814.org-梦见别人买彩票| www.20vb.com-彩票中奖金额分别是| www.5309.vip-仓山区彩票店转让| www.276044.com-北京快三彩票| www.254744.com-好彩投官网-| www.ph87.com-海南快三走势图表| www.79rk.com-福利彩票中3个有钱| www.076999.com-国外彩票名称| www.542200.com-海南省体彩中心地址| www.615896.com-沈阳游戏厅彩票| www.689703.com-体彩500万-| www.6765.biz-彩票对子是什么意思| www.694.live-网上推广彩票违法吗| www.234949.cc-3d彩票预测-| www.096113.com-众彩网彩票预测专家| www.207622.com-上海快三下载| www.341898.com-诺亚时时彩平台登录| www.998139.com-足彩app加奖| www.fv19.com-投资福彩快三违法吗| www.619357.com-重庆彩票中心地址| www.697861.com-彩票联盟下载手机版| www.797175.com-98彩票合法吗| www.397.vip-辽宁省体彩中心主任| www.900379.com-粤淘彩票app| www.959885.com-19号彩票-| 好彩头彩票www.23579d.com| www.349054.com-彩票工具计算器| www.562163.com-快彩开奖结果查询| www.40755.com-中彩网高手三肖| www.352034.com-外围基诺彩太假了| www.081028.com-男子一亿买彩票赔了| www.rw2.com-福彩3d和尾走势| www.664582.com-福彩双色球奖号| www.55729.com-七星彩中奖查询计算| www.982405.com-鸿彩开了多少年了| www.365027.com-彩民红高手-| www.976140.com-信阳结婚彩礼多少| www.zo88.com-贏钱彩-| www.1937.link-500万彩票怎么样| www.oj52.com-长春市福彩中心电话| www.663425.com-澳门时时生肖彩| www.550325.com-中国彩票大奖| www.031901.com-做时时彩黑平台代理| www.515563.com-彩票输惨-| www.05551.cc-体彩升级竞彩不批| www.116965.com-快三怎么计算公式| www.781040.com-江西快三彩票app| www.708938.com-被骗叫买个澳洲彩票| www.53022.com-彩票广告语-| www.664545.com-赢钱彩平台靠谱吗| www.os90.com-福彩3d计划网| www.855675.com-福彩3d彩先知网址| www.917684.com-彩虹代刷网美化模板| www.980564.com-9968彩票-| www.cp358.com-6e彩票-| www.525338.com-中国手机彩票客户端| www.88ai.com-中国彩吧3d走势图| www.676078.com-万众福彩图诗句| www.365190.cc-彩票近期中奖号| www.41989.com-6020中彩吧-| www.006721.com-福彩3d怎么算中奖| www.756182.com-福彩交流群是骗子| www.822229.com-彩票系统全套源码| www.885804.com-福彩3d彩神关注号| www.942212.com-600彩票平台| www.984692.com-大乐透杀号彩吧助手| www.cp0550.com-瑞彩祥云-| www.255950.com-玩时时彩最稳的玩法| www.416627.com-四平彩票店出兑| www.90439.com-彩票77苹果-| www.338204.com-今天七乐彩免费预测| www.im16.com-澳客网彩票官网| www.2541.shop-彩票分析软件k线| www.1594.vip-足彩买比分规则| www.831695.com-傅乐彩票app| www.912331.com-聚福里体彩店| www.975670.com-正规网上买彩app| 凤凰彩票www.606920.com| www.jw38.com-彩库视频开奖| www.yl44.com-申请体育彩票投注站| www.09cu.com-河内彩票骗局| www.1264.vip-乐彩010102-| www.7080.site-七彩衣坊-| www.503455.com-奔驰彩票apk|