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.909469.com-唯彩看彩-| www.61328.com-乐米彩票不能买了| www.975665.com-重庆时时彩骗局模式| www.167777.cc-青海快三走势图今天| www.606247.com-福彩杀码村-| www.807504.com-陈赫包贝尔买彩票| www.954756.com-如何选择彩票号码| www.dv04.cc-五星彩开奖结果| www.q03.site-3d彩票的玩法介绍| www.1789.biz-网彩跟群计划倍投表| www.707344.com-彩票谁在控制| www.088016.com-彩神88ap-| www.218739.com-彩票平台刷流水兼职| www.7490.cc-体彩门店绑定app| www.wb21.com-甘肃快三中奖奖金| www.555557.cc-吉林快三属于赌博么| www.93qr.com-一寸彩照-| www.131843.com-焦作地区彩礼| www.234815.com-中国竞彩网竞彩足球| www.884156.com-快三pk10计划| www.968310.cc-时时彩诈骗报案流程| www.cp0336.com-快三预测一定牛| www.pl56.com-彩钢瓦-| www.505257.com-新瑞博博彩-| www.592949.com-彩虹六号手游安卓| www.678873.com-申请重庆时时彩代理| www.772286.com-如何在线买彩票| www.83693.com-哪个星座中彩票| www.1910.vip-程阳3188彩票| www.35589.com-大通彩票手机| www.279028.com-体彩e球彩怎么玩| www.89258.cc-彩票每年害死多少人| www.179750.com-湖北快三一定牛推荐| www.656730.com-k彩—彩民中奖福地| www.747410.com-乐优彩票提现| www.629462.com-时时彩半顺是什么| www.711250.com-竞猜足彩分析预测| www.807881.com-优彩彩票是合法的吗| www.73cf.com-福利彩票赛车直播| www.858022.com-体育彩票大乐查询| www.775639.com-彩富资料大全香港| www.881592.com-连中彩票app| www.983955.com-彩99平台靠谱吗| www.gd65.com-新快三单机游戏| www.01kl.com-丹东三d彩涂精华版| www.5999.date-山东省体彩中心新址| www.42298.com-12号彩票-| www.90972.com-新浪福利彩票直播| www.054279.com-浙江福彩支行| www.125827.com-众购彩票网登录网址| www.200988.com-七星彩最新开奖结果| www.273222.com-体彩公益宗旨| www.35878.cc-下上海快三-| www.10.net-体彩断组胆码| www.769172.com-620好彩网-| www.616.name-传奇彩票登录| www.626571.com-下载彩民之家app| www.51515.cc-糖果彩网址-| www.ha47.com-500彩票幸运快三| www.689158.com-c81彩票-| www.798567.com-贵港体彩中心| www.890649.com-南方双彩网143期| www.02.cc-购彩顺口溜-| www.119691.com-即开型彩票销售方法| www.96928.cc-国家统一快彩| www.924939.com-丹麦快乐彩在线预测| www.445583.com-助赢江苏快三| www.481228.com-喝彩中华评委| www.964807.com-长春制作彩票走势图| www.113345.com-福彩3d解太糊字迷| www.925417.com-宏发快三开奖| www.11dj.com-933时时彩票软件| www.1283.pw-网易彩票网电脑版| www.731032.com-快易彩首页-| www.573068.com-合法的彩票购买网站| www.61416.com-七星彩大奖算法| www.621502.com-竞彩之家比分网页| www.737935.com-彩神喷绘机价格| www.813674.com-代理彩票站提成多少| www.949724.com-365娱乐彩票| 吉利彩票www.66376b.com| www.v34.me-网上可以买时时彩吗| www.514009.com-购彩网靠谱吗| www.29ar.com-竞彩足球258网| www.786875.com-七星彩票走势图| www.912188.com-贩卖私彩构成什么| www.050540.com-哪里可以买3d黑彩| www.065512.com-彩铅画简单图片| www.963076.com-体彩4场进球对阵| www.26735.com-彩乐汇聊天室登录| www.8831.vip-众彩网彩票专家预测| www.076636.com-体彩体育下载| www.1759.vip-私彩2015-| www.52111.cc-福彩胆码预测| 新盈彩www.xinyc2.com| www.09wm.com-七乐彩几点封机| www.03740.com-聚象购彩网-| www.020096.com-中l国体育彩票| www.787565.com-360足球竟彩| www.818.cm-87竞彩app-| www.286396.com-买彩精英专栏| www.14ug.com-308彩票安卓版| www.062458.com-中国福利彩票开兑奖| www.874526.com-山西福彩中心官网| www.948217.com-三地牛彩网图谜| www.994191.com-时时彩机器人| www.bb50.com-浙江福彩-| www.y00.cc-运彩朋友圈-| www.37775.com-六喝彩开奖结果香港| www.91159.cc-好彩香烟纸盒| www.673293.com-福彩3d什么时候开| www.792520.com-铜陵市福彩兑奖中心| www.877388.com-百胜彩票网站| www.943341.com-彩票负盈利打法| www.993571.com-竞彩14场怎么兑奖| www.359526.com-微信买足球彩票| www.515367.com-如何网上购买七星彩| www.622267.com-九彩洗衣液-| www.711179.com-烟台福彩开奖| www.23420.com-四季彩登录平台| www.535110.com-福彩三d布衣字谜| www.0820.top-欧冠足彩专家预测| www.232849.com-好彩客苹果版下载| www.8905.cc-射阳县城西竞彩足球| www.597366.com-满堂彩彩票怎么样| www.198365.com-下载大发彩票app| www.959390.com-5分时时彩计划群| www.wf29.com-福利彩票开奖号码开| www.23hy.com-体彩开奖号吗| www.v98.me-诺亚彩票手机下载| www.84tf.com-飞彩网流水单是什么| www.2078.cm-今晚足球竞彩网| www.198399.com-快三坑死人-| www.523172.com-彩票王成周-| www.315587.com-安微福彩快三结果| www.2559.pw-网上可以购彩票吗| www.036531.com-中国体育彩-| www.362875.com-彩票节假日休息几天| www.23939.com-网易颖彩双色球预测| www.162288.cc-竞彩足球大小球软件| www.227938.com-彩票查询官网| www.238176.com-网易彩票怎么兑奖| www.0459.win-福彩双色珠走势图表| www.wp62.com-全天快三计划稳定版| www.402941.com-众益彩票官网| www.947071.com-福彩高频彩有哪些| www.cai1234.cc-北京快三助手| www.552296.com-日本1.5分彩计划| www.37595.cc-8888彩app-| www.569061.com-彩票跳槽彩金| www.877857.com-一张彩票-| www.336770.com-中国彩票合买网站| www.773418.com-打鱼送10金币彩金| www.866365.com-昨天福彩什么奖号| www.924789.com-哪些彩票中大奖的人| www.975262.com-汇彩网是不是假的| www.cai4388.com内蒙古快三下载| www.129667.com-彩票新闻中奖故事| www.0635.la-彩票系统告别死工资| www.2184.org-有人让你玩永利彩票| www.653297.com-8炫彩彩票-| www.379342.com-竞彩虎扑-| www.541389.com-我想做彩票代理| www.606422.com-还能用的足彩app|