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天

知道了
彩01彩票 www.056543.com-福利彩票快3和值图| www.230628.com-彩八-| www.76746.com-电竞赛事竞彩| www.997435.com-三分时时彩计划心得| www.wp13.com-马采西亚乐和彩开奖| www.2167.cc-七彩野山鸡养殖过程| www.005650.com-酷彩-| www.576212.com-东莞福彩网点| www.47qk.com-广西福彩领奖流程| www.062447.com-全民中彩票快三| www.319086.com-体彩游泳夺金视频| www.67618.com-679.com彩票| www.55292.com-时时彩的判刑标准| www.79iq.com-百彩网综合资料| www.523612.com-手机时时彩合法吗| www.42873.com-白菜彩金-| www.025417.com-时彩在线追号计划| www.892811.com-成化珐琅彩特征| www.200187.com-数字彩票频道| www.400345.com-辽宁福彩走势图| www.576903.com-趣彩网投注可信吗| www.114247.com-大发彩票手机版本| www.4573.vip-长春彩钢板-| www.769005.com-亚博彩票ios| www.832013.com-双色球机选买彩票| www.521367.com-体育彩票双色球玩法| www.620046.com-釉中彩的碗好不好| www.1169.me-彩票销售广告语| www.777847.com-安徽快三模拟走势图| www.871410.com-江苏快三买彩票软件| www.945631.com-福建体彩90512| www.hy45.com-快购彩票3怎么玩的| www.4dc.cc-百度新浪彩票| www.895057.com-牛娃彩票app下载| www.999582.com-福彩排列三试机号码| www.ks82.com-彩票分析师靠谱吗| www.j99.biz-彩票平台有跑路的吗| www.114625.com-精准彩票计划网站| www.175545.com-福利彩票快三走势图| www.189876.com-时时彩长龙害死人| www.055352.com-福彩一分快三网址| www.154592.com-易彩票怎么玩能挣钱| www.386149.com-彩票代注是什么意思| www.550990.com-网易彩票怎么合买| www.856004.com-新西兰快三玩法说明| www.309066.com-导师带你买彩票赚钱| www.20ay.com-乐透啦彩票是否正规| www.0059.cn-哪种彩票奖最大| www.309309.cc-网络福彩快三的骗局| www.897632.com-多彩贵州网待遇| www.8041.xyz-87彩店客服电话| www.18505.com-足彩单场胜平负竞猜| www.213747.com-神彩8‖-| 大赢家彩票www.5086q.com| www.542470.com-江苏快三豹子2| www.665292.com-七乐彩历史对比器| www.391671.com-体彩中三位数多少钱| www.899174.com-怎么下载彩神通| www.983054.com-体彩吧百度贴吧| www.485169.com-中国体育彩票预测| www.456073.com-彩虹六号起什么名字| www.019614.com-湖南体彩报-| 环球彩票www.644996.com| www.33090.cc-245彩票下载| www.js36.cc-王者彩票彩种| www.007874.com-澳客电脑版彩票网页| www.071774.com-彩票的前景如何| www.133019.com-开彩票店选址技巧| www.276678.com-福彩8app-| www.358759.com-五位数的是什么彩票| www.451771.com-信彩票是真的吗| www.550867.com-彩票的缺点-| www.687021.com-136亿彩票-| www.780523.com-快三权威平台真假| www.860572.com-5分彩开奖走势图解| www.944562.com-博盈彩票是真假| 彩宝www.cb2788.com| www.820722.com-彩钢瓦搭建视频| www.915539.com-天吉电子彩报3d版| www.977283.com-彩票购买大厅| www.rt48.com-乐彩网首页彩| www.105333.com-手机时时彩网址| www.176376.com-下载内蒙古福彩快三| www.665292.com-七乐彩历史对比器| www.501137.com-官网购彩软件| www.858970.com-彩乐网开奖-| www.928330.com-安徽十一选五彩经网| www.977816.com-足彩去哪买-| www.cai716.com-快三助手破解版| www.98bq.com-重庆十时彩走势图| www.2365.cm-2500万彩票-| www.7381.cc-怎么用懂球帝买彩票| www.k81.com-彩票3d人人中奖| www.972129.com-博彩水位怎么看| www.cai4888.com湖北福彩快三| www.m27.cn-今日彩票预测号码| www.46yp.com-有没有彩票计算软件| www.6470.cc-怎么推广别人玩彩票| www.366570.com-彩铅叠色变深技巧| www.559756.com-体彩大乐透直播时间| www.cp2979.com-英国时时彩开奖记录| www.ru92.com-90彩票平台代理| www.8984.vip-福彩33-| www.932585.com-网赌时时彩有作假吗| 500彩票网www.61655l.com| www.997668.com-北京体彩站点查询| www.hv74.com-众彩网手机版| www.83zq.com-旭彩网36元-| www.6837.cc-极速三d是假彩票| www.28791.cc-彩快彩app网址| www.716022.com-3d彩乐乐定位预测| www.929386.com-我要搜索彩票开奖| 福彩网www.5522w.cc| www.rt44.com-乐彩网苹果app| www.024386.com-正盛彩票-| www.115585.com-星光彩票大发快| www.60077.cc-七星彩开码直播| www.35xr.com-足彩开奖金-| www.627.gg-彩票佣金-| www.132190.com-彩礼是把女方买断吗| www.6128.in-七乐彩介绍-| www.23019.com-王者彩票网站是多少| www.81127.cc-排列五是福彩| www.5094.vip-彩播下载-| www.6257.biz-看彩啦分析预测| www.40006.cc-今日彩票28-| www.148896.com-飞乐迷彩羽绒服| www.247669.com-湖南福利彩票3d| www.42579.com-不限id送彩金| www.n68.top-如何看懂彩票| www.225970.com-福彩公益金宗旨| www.356884.com-彩票诗谜大全| www.919559.com-怎么搭建彩票网站| www.998759.com-明发彩票主页| www.dm73.com-快三一个号码怎么组| www.96191.cc-点石成金彩票| www.57gh.com-福彩36迭7开奖| www.902345.cc-360购彩-| 网易彩票www.065wy.com| www.196352.com-足彩2串1漏洞| www.72940.com-亡灵天涯彩票专栏| www.044329.com-足彩让球规则详解| www.128413.com-快三走势口诀| www.718986.com-彩虹为什么会消失| www.975228.com-彩控智能网-| www.cp5513.com-快三广西-| www.903890.com-福彩定胆的玩法| www.230293.com-北京快三最晚几点| www.179.gg-大地彩票下-| www.822512.com-福彩群英会倾家荡产| www.126297.cc-8号彩票正规吗| www.871740.com-彩票刮刮乐青蛙过河| www.266775.com-玩快三算不算赌博| www.46749.com-失控的黑彩三| www.218533.com-大发彩票下载手机版| www.332635.com-热购彩票登录| www.530095.com-头彩是什么意思| www.720660.com-竞彩足球跟单合买| www.539577.com-下载826cc彩票| www.619252.com-云南彩票未领奖| www.688670.com-248a1彩票-| www.671301.com-广州万彩-| www.019634.com-福彩端是什么软件| www.556502.com-全部天天彩票下载|