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.bh32.com-五分彩稳赚公式| www.1zv.cc-手机全身彩膜| www.ft53.com-快乐彩开奖号码浙江| www.s68.wang-彩票怎么合买| www.832187.com-七星彩摇奖是随机吗| www.28pt.com-7意彩网页版| 亿万彩票www.456836.com| www.237492.com-辽宁体彩11选五| www.326169.com-彩一一i一一| www.tt4.com-湖水快三中奖号码| www.876672.com-福彩彩吧助手走势图| www.19av.com-体彩肥城中大奖了吗| www.83kk.com-竞彩258彩票投注| www.94217.com-公益体彩责任为先| www.153789.com-中国福彩网快3平台| www.422178.com-彩59彩票下载安装| www.186725.com-牛彩票-| www.209594.com-大发快三在哪注册| www.882628.com-易彩彩票犯法吗| www.dx56.com-彩神ix大发快三| www.6551.shop-盛兴金祥彩票网| www.252111.cc-中彩网首页图表| www.503937.com-买高频彩算投资吗| www.952238.com-五分彩历史开奖记录| www.8474.cc-欧洲杯胜负彩| www.142395.com-亚博彩票软件下载| www.772255.com-正规的篮球博彩| www.997251.com-鳄鱼彩票福彩3d| www.lj33.com-下载天天中彩票| www.025371.com-人人中彩票合法| www.988024.com-幸运中彩票老版本| www.el35.com-好运快三走势五分钟| www.029583.com-掌上彩票安卓| www.736169.com-买一注彩票挣多少钱| www.824339.com-七星彩内部资料| www.899991.com-天天体彩官方下载| www.975417.com-彩票摇一摇可靠吗| www.cp5568.com-内蒙古快三开奖情况| www.mh24.com-好彩香烟4味混合| www.26891.cc-华夏彩票线路中心| www.219323.com-一分彩在线人工计划| www.350029.com-乐彩网福彩3b首页| www.440474.com-百宝世嘉彩票下载| 网易彩票www.26163b.com| www.371448.com-婚纱手绘图片彩铅画| www.047369.com-广东体彩粤11选5| www.285622.com-彩票预测神器真的吗| www.875988.com-大彩鲸快三-| www.xt40.com-吉林快三二不同预测| www.621902.com-撒福利彩票三d| www.288211.com-比彩名堂好用的软件| www.936057.com-四川乐山快三开奖图| www.12ek.com-吉林快三改时间了| www.484406.com-恒信在线彩票网站| www.569668.com-好彩三开奖情况| www.646089.com-财神分分彩-| www.745533.com-大彩网七乐彩| www.818189.com-陆慧明今天竞彩推荐| www.893365.com-七乐彩手机选号| www.633583.com-468彩票官网| www.728083.com-官方体彩-| www.795484.com-体彩大乐透怎么领奖| www.83174.com-乐彩网被骗-| www.75tm.com-苹果精彩时间| www.951173.com-金豆彩票-| 凤凰彩票www.66652l.com| www.732528.com-彩礼和聘礼给多少| www.835962.com-福彩三d今日开奖号| www.918456.cc-u9彩票软件苹果| www.984258.com-竞彩猫是什么| www.iw80.com-竞彩专栏-| www.zv49.com-上海体彩在哪里兑奖| www.292.tv-为什么七星彩出不来| www.273561.com-彩票案于海最终结果| www.661254.com-即刮型彩票-| www.657504.com-乐彩网嗨少看彩| www.38394.com-天天爱彩票安装| www.8896.in-足球竞彩可靠吗| www.254628.com-北京时时彩停售| www.383502.com-足彩戴维最新推荐| www.492788.com-彩票店关店-| www.591959.com-三弟牛彩-| www.cp9875.com-75868彩票-| www.556656.com-彩票真实性-| www.631104.com-下载新濠环彩网| www.703293.com-福彩新天地报| www.773539.com-胜负彩百度贴吧| www.836511.com-福利彩票0304| www.766061.com-代购彩票-| www.77752.cc-北京市体彩管理中心| www.119081.com-双色球杀号彩乐乐| www.86400.com-怎么查彩票开奖结果| www.152105.com-江苏体彩七位走式图| www.164059.com-优乐娱乐彩票| www.305342.com-历史七星彩开奖记录| www.37hq.com-退彩礼的三种情况下| www.19546.cc-好易彩票-| www.2000.biz-49彩票查看结果| www.vb2.cc-发达娱乐彩票正规吗| www.182.cm-运用统计学推算彩票| www.583580.com-彩票有多少个号| www.668560.com-华人娱乐彩票登录| www.738955.com-福彩双色球彩票群| www.806299.com-快三大数据-| www.885157.com-玩彩票不懂止损| www.49550.com-星光彩票作弊器| www.01949.com-彩票平台赠送彩金| www.258262.com-湖北省福利彩票| www.bp22.com-网易彩票网手机版| www.89gj.com-十分彩网站-| www.904098.com-吉林福彩网快3官网| www.706065.com-彩票海报图片| www.9600.online今晚七星彩开奖查询| www.014817.com-彩之王下载-| www.077306.com-彩色复印机图片| www.717880.com-彩客网苹果手机版| www.523568.com-金口诀测彩纳数法| www.377095.com-大富彩票网登陆网址| www.73wi.com-极速高频彩-| www.8463.vip-众发彩票合法| www.811289.com-大乐透专家牛彩版| www.894973.com-够彩网-| www.977834.com-彩印纸箱生产设备| www.zm9.cc-吉林快三诈骗| www.ow71.com-乐彩论-| www.897153.com-盈发彩票app下载| 彩天下www.c5823.com| www.507197.com-体彩遗漏数据统计| www.g95.cn-彩宝彩票安卓版| www.279672.com-时时彩计算原理| www.92ut.com-福彩售卖点的位置| www.087650.com-云彩厅官网-| www.9550.vip-海南省福彩大赛| www.829272.com-下载188彩票软件| www.895099.com-时时彩中奖助手下载| www.958079.com-福彩3d开l奖| 5号彩www.585hc.com| www.uc4.com-彩票预测最准十专家| www.mh06.com-快彩票-| www.m97.net-怎样举报黑彩平台| www.36dk.com-七星彩27期预开奖| www.98uk.com-大六壬测港彩特肖法| www.1994.live-足彩害人-| www.233946.com-333彩票平台骗局| www.855492.com-七乐彩胆拖奖金| www.943401.com-福彩任选五胆拖玩法| www.cp2330.com-百盈快三口诀| www.xb74.com-彩票921下载| www.156789.cc-蓝球比分新浪爱彩| www.74zu.com-pp彩票站是什么| www.2519.pw-江苏福彩快直彩乐乐| www.8988.tv-新时代彩票网址| www.097285.com-3d彩报看什么最好| www.201472.com-七乐彩走势图表| www.77vm.com-国内怎么买国外彩票| www.143660.com-有玩彩运8的吗| www.300695.com-118彩票官网| www.506400.com-竞彩总进球怎么算的| www.ix99.com-香港彩票网址大全| www.50755.cc-七星彩解诗网| www.39432.com-全民彩票的规律| www.413219.com-卖福彩提多少钱| www.507323.com-陕西福彩快十分开奖| www.560668.com-什么是澳洲三分彩|