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.1599.net-彩宝贝走势图| www.q23.bid-国家体彩中心电话| www.425630.com-彩票倍率高的台子| www.516255.com-快三彩票接口怎么接| www.95gv.com-玩投彩的男人| www.5354.biz-梦到学生买彩票中奖| www.226641.com-旺彩网-| www.474364.com-篮球竞彩网预测推荐| www.04ud.com-彩铅绘画欣赏图片| www.1527.xyz-腾讯赛车彩票计划| www.77437.com-官网彩88下载| www.554463.com-彩票励志诗-| www.878486.com-中国福彩网积分卡| www.178638.com-在手机买彩票平台| www.33108.com-七星彩开奖全部历史| www.722447.com-华阳彩票骗局| www.858758.com-体彩直选和值遗漏| www.943386.com-南国彩票论l坛| www.kl53.com-易彩堂彩票可靠吗| www.7072.me-5分快三下载| www.28538.cc-腾讯5分彩计划群| www.113689.com-三彩家托管到底咋样| www.997642.com-时时彩职业玩家心得| www.lu20.com-搜神传的好彩妹| www.899.org-彩票33的网址| www.538654.com-百度彩彩票可靠吗| www.610386.com-福彩8app是什么| www.680553.com-百乐门彩票正规吗| www.760345.com-今天好彩3开奖结果| www.848613.com-福利彩票刮开保安区| www.091468.com-703彩票网网址| www.223033.com-足球彩票怎么买| www.305072.com-彩票投注客户端下载| www.7936.cn-彩宝的专业知识培训| www.084199.com-玩极速快三输了2万| www.205133.com-内蒙快三和尾走势图| www.290011.com-彩票双色球必中预测| www.101461.com-九号彩票手机登录| www.498033.com-手机5k彩票登录| www.575783.com-福彩电子投注| www.28531.cc-凤凰彩票元角模式| www.615937.com-美狮彩票网站| www.728196.com-澳客彩票网首页| www.835533.com-福利彩票26期| www.932955.com-正规的国家快三平台| www.yv62.com-公布中国湖南福彩网| www.347658.com-彩虹特殊含义| www.451636.com-818彩票下载安装| www.583027.com-体彩排列三有规律吗| www.554378.com-秒速快三网页计划| www.698802.com-华夏彩票平台下载| www.826136.com-二元彩票网大乐透| www.230378.com-3d预测家彩-| www.330100.cc-3d今日推荐好彩网| www.446132.com-哪里有卖彩票平台的| www.96512.com-彩票中了大奖怎么花| www.976557.com-运城结婚风俗彩礼| www.778923.com-幸运彩票走势图表| www.673267.com-快三江西-| www.807152.com-双色球彩票折叠| www.900026.cc-天天中彩票中奖给吗| www.976908.com-焦作孟州结婚彩礼| www.gt44.com-3d福彩图谜-| www.965603.com-买彩票那个软件好用| www.al13.com-七星彩和值走势| www.8vl.com-体彩极速跟单| www.68az.com-竟彩网258-| www.829353.com-新乐彩说风控| www.893711.com-博马彩票极速快三| www.020238.com-网易彩票官方网站| www.109093.com-下载567彩票网| www.1912.me-一个人领彩票| www.55211.com-滴滴彩票送28平台| www.532108.com-彩票中奖金符咒法| www.658590.com-范伟买彩票中的号码| www.767666.com-牛蛙彩票下载软件| www.830956.com-新彩手机版-| www.890566.com-至尊快三网址| www.952887.com-七乐彩中奖情况| www.997324.com-仙彩娱乐-| www.dm39.com-官方快三有哪些省份| www.692539.com-福彩3d双彩图百度| www.812277.com-3d福彩交流吧| www.890233.com-正规官网彩票有哪些| www.963141.com-体彩顶呱刮运| 500彩票www.339968.com| www.71146.com-福彩3d彩民乐| www.118471.com-皇冠重庆时时彩开奖| www.225653.com-彩票排列五开奖| www.52461.cc-今天3d选号彩报| www.875674.com-时时彩牛牛-| www.961467.com-大奖彩票下载苹果| www.cp1018.com-快三网赚是真的吗| www.39065.com-中彩彩票注册账号| www.89299.cc-查彩票下什软件| www.106047.com-谦喜彩票app| www.189456.com-上海时时彩开彩结果| www.254431.com-山西福彩-| www.395666.cc-今天彩什么彩票开奖| www.622171.com-中国广州体彩网官网| www.693864.com-红神体彩下载| www.759297.com-快乐赛车彩票| www.814643.com-安徽快三投注站| www.881458.com-辉煌彩票靠谱不| www.939716.com-彩票盛邦财团| www.986584.com-728彩票手机检测| www.km7.com-快三规则图-| www.435632.com-好运彩票免费注册| www.886236.com-永乐彩票下载| 天天彩票www.2373o.com| www.501821.com-关于体育彩票| www.130565.com-快彩王是怎么坑人的| www.3056.biz-雅彩彩票下载| www.hn22.com-广西快三昨天走势图| www.65ap.com-全天彩票计划助手| www.9231.online新浪竞技彩票中心| www.6898.win-好彩头公司电话| www.713718.com-咋样计算下期彩票| www.808361.com-新浪胜负彩九场推荐| www.893060.com-福彩遗漏数据彩经网| www.973931.com-老快三线上投注平台| 网购彩票www.cp7777b.com| www.wt73.com-快三投注计划图表| www.62mz.com-篮彩推荐网-| www.864277.com-体彩福彩开奖123| www.th79.com-福彩体彩开奖号码| www.77wf.com-买国外彩票-| www.90599.cc-牛彩双色球字谜图谜| www.104831.com-时时彩5星缩水技巧| www.840296.com-天下58彩-| www.cm06.com-湖北快三未出号| www.19cn.com-星期五那个彩票开奖| www.333019.com-为什么彩票那么难中| www.518836.com-中国彩票巨奖排行榜| www.574107.cc-中信积分的彩票入口| www.628935.com-查今天体育彩票| www.142959.com-正规的彩票代购网站| www.382277.com-体彩排名诈骗| www.551089.com-三分钟彩官网网址| www.234014.com-体育彩票快乐扑克| www.980496.com-注册送彩金的网站| www.nw8.com-一定牛彩票走势图| www.94oc.com-和乐彩票平台注册| www.722756.com-w彩22956注册| www.5878.biz-体彩中心上班时间| www.743996.com-下载7星彩例表| www.840368.com-全国彩票销售排名| www.908538.com-休闲帝彩票-| www.964013.com-彩虹代表什么| 彩天下www.196909.com| www.716.cm-北京报亭可以买彩票| www.382292.com-阜阳福彩加盟条件| www.515219.com-中国福彩官网中心| www.18up.com-七乐彩开奖是几点| www.802.biz-日干支测彩出数法| www.152728.com-够力七星彩海口论坛| www.cai6644.com长春快三走势图| www.284051.com-关于彩票好听的网名| www.3832.top-神彩燃油宝怎么样| www.9649.tv-排列三试机彩宝网| www.083922.com-预测彩票准的软件| www.182113.com-下载北京彩票快3| www.37176.cc-好运彩下载-| www.ig44.com-正规官方彩票软件|