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天

知道了
彩票123现在叫什么名字 www.998800.com-天津福运快三走势图| www.332900.cc-快乐彩票靠谱吗| www.bo21.com-大发快三怎么买| www.19ei.com-汇金彩票-| www.313681.com-更好的彩票预测软件| www.881312.com-快乐彩胆拖玩法规则| www.98705.com-足彩3串3什么意思| www.686838.com-彩票宣传广告词| www.088053.com-上海福利彩一官方网| www.191959.com-江苏快三选号助手| www.48063.com-彩票机打能中奖吗| www.191260.com-上海快三开奖助手| www.965671.com-江苏快三中奖牛人| www.66279.com-网福利彩票自动选号| www.73592.com-彩中彩平台app| www.060314.com-高频彩分析论坛| www.2286.cm-天天彩票钱提不出来| www.521006.com-彩票微信群骗局| www.062457.com-江苏快三倍数| www.353042.com-世纪彩城-| www.0668.vip-七星彩开奖查询结果| www.93988.com-体彩文化建设| www.t20.club-体彩合买骗局| www.127506.com-彩虹网-| www.131570.com-彩票中奖无人领奖| www.9829.loan-快三和值跨度| www.056299.com-七乐彩中奖规则图解| www.95150.com-儿童彩妆怎么画| www.1910.vip-程阳3188彩票| www.978950.com-360彩票苹果版| www.ff99.com-免费湖北快三计划| www.427950.com-赛马彩票三中三| www.557763.com-福彩双色球杀红号| www.198948.com-彩票怎么看号码| www.316592.com-乐彩网双色球论坛| www.393363.com-昨天的福彩中奖号码| www.507656.com-福彩65期开奖| www.580084.com-云购彩票网官网首页| www.588225.com-乐迎彩票免费下载| www.672390.com-快3是什么彩票| www.791782.com-六彩彩票与你同行| www.868713.com-7星彩今天预测号码| www.936530.com-彩客彩票下载安装| www.986266.com-时时彩玩法技巧大全| www.as06.com-河北福彩排列5| www.ws23.com-手机彩票123| www.08nh.com-彩民社区47849| www.73zv.com-体彩排列3怎么兑奖| www.1987.me-赌足彩-| www.1000.pro-小乐彩app-| www.080824.com-奇门遁甲预测时时彩| www.683213.com-黄金兑换彩金亏本吗| www.833198.com-口袋彩店如何下载| www.926852.com-达人彩票网站诈骗| 彩82www.c1669.com| www.gh76.com-1分快三官网| www.zf98.cc-51彩票是骗人的吗| www.39xd.com-江油彩礼一般多少钱| www.454.in-快三秒热水器调压阀| www.4002.xyz-时时彩杂六买号法| www.or28.com-优彩彩票手机版| www.5zf.com-豪彩vip计划| www.155630.com-重庆赛车彩票技巧| www.655493.com-网易彩票开奖直播间| www.759473.com-江苏快三在线计划| www.81jv.com-武汉彩票作弊案| www.3232.biz-爱波网竞彩足球推荐| www.80fz.cc-百盛彩-| www.659438.com-利彩安全吗-| www.7501.vip-彩票终端-| www.259827.com-3d福彩下载-| www.412721.com-今日3d彩票开奖| www.524084.com-大数据彩票双色球| www.g53.cc-新浪竞彩足球比分| www.45js.com-中博国际是正规彩票| www.878.mobi-彩铅牌子哪个比较好| www.4499.in-私彩与官方彩票网| www.216196.com-体彩6十1玩法介绍| www.128769.com-快三福彩助手下载| www.261891.com-大众彩票注册送体验| www.939365.com-福彩上海选四走势图| www.cp5638.com-安徽快三骗局揭秘| www.7415.cc-色彩斑斓的黑| www.5078.com-竞彩足球18年停售| www.101308.com-天天彩票网下载| 凤凰彩票www.77801h.com| www.024865.com-极速赛车彩票小技巧| www.136408.com-浩博彩票投注平台| www.246116.com-3d牛彩-| www.14po.com-乐彩苹果下载| www.947851.com-免费彩票预测软件| www.167990.com-宁夏快三实时走势图| www.507018.com-彩神8赚钱吗| www.215501.com-彩1彩票-| www.711016.com-app刷彩票流水| www.063575.com-凤凰时时彩平台| www.228845.com-好彩1开奖结果查询| www.249516.com-999彩票下载| www.340006.com-彩票收米图片| www.956586.com-55彩票-| 大玩家彩票www.316083.com| www.806398.com-亚搏足彩-| www.873751.com-众彩网是真的吗| www.929635.com-七乐彩3拖8-| |M13Graphics-买彩票倾家荡产害人| www.4163.biz-七彩云商城-| www.338917.com-够彩大厅网址| 体彩网www.3890a.com| www.3034.cm-360彩票大全| www.qv54.com-福彩几加几什么意思| www.708228.com-状元彩票网安全吗| www.693331.com-爱乐透彩票网app| www.788832.cc-足球竞彩投注比例| www.860945.com-好彩一开奖号码| www.934691.com-福彩天齐网站| www.978470.com-彩色沥青生产厂家| www.cp9892.com-湖福彩快三走势图| www.0458.bid-体彩图谜首页| www.077262.com-彩色复印图片| www.974186.com-福彩3b中奖号码| www.cp3522.com-福建快三中奖助手| www.163184.com-河北燕赵风采福彩网| www.37467.com-7星彩官方-| www.110650.com-七星彩奖池金余额| www.186384.com-快三所有开奖概率| www.16ni.com-足彩分析网易推荐| www.952614.com-中奖彩票app链接| www.050005.com-聚诚是黑彩吗| www.579032.com-139彩票网-| www.708874.com-微信美洲彩-| www.844490.com-千亿彩票手机版| www.976986.com-玩彩乐-| www.hf64.com-湖北快三时间开奖| www.224410.com-中国福彩精彩十分| www.325129.com-体彩3p图迷第一版| www.411788.com-熊猫彩铅-| www.xx69.cc-甘肃彩工网-| www.747076.com-体彩排五的走势图| www.3377.org-富鱼网触屏版彩票| www.9888.net-为什么快开彩票调整| www.69707.com-易彩计划软件| www.192885.com-758彩票app-| www.75du.com-福彩快3河南| www.3198.xyz-中国体彩网123| www.121967.com-5d体彩开奖-| www.il42.com-陕西体彩网官方网站| www.ch98.cc-分分快三开奖记录| www.453354.com-竞彩258足球直播| www.u10.biz-深圳体彩兑奖流程| www.3998.xyz-沙巴是哪的博彩公司| www.67112.cc-福彩3d表格-| www.085512.com-红牛彩票是否真实| www.7185.win-彩票税收计算| www.507908.com-福彩怎么申请| www.4786.biz-六个彩开奖结果查询| www.988736.com-计划稳中福快三| www.z60.top-宋金时期红绿彩小人| www.138056.com-吉林福彩投注助手| www.337310.com-银川千彩摸吧在哪| www.976614.com-彩礼排行榜2019| www.581118.com-彩票怎么查看| www.073912.com-体彩专家杀号定胆| www.222764.com-快3彩票害死多少人| www.cai177.cc-快三投注平台|