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.885012.com-九号彩票下载| www.82ik.com-荣耀彩票168网址| www.967247.com-网上玩彩票被骗| www.rt09.com-彩客网1分快3规律| www.2541.shop-彩票分析软件k线| www.23200.com-数字型彩票分析方法| www.9333.date-5937彩票网址| www.218899.cc-刷彩金很挣钱吗| www.nx46.com-竞彩任意9场奖金| www.729229.com-中国福利彩票新3d| www.631819.com-七彩阳光的预备节| www.771324.com-大福彩票靠谱吗| www.933839.com-今日开奖彩票查询| www.ba11.com-网彩骗局-| www.112381.com-彩票送18元-| www.341519.com-海口彩票网下载| www.004651.com-快乐彩胆拖中奖规则| www.227828.com-辽宁体彩网11| www.51wq.com-无鹰鸟全彩少女漫画| www.894925.com-中彩网极速快三| www.999009.cc-彩乐汇是干什么的| www.l58.top-大发一分快三计划| www.024465.com-斯特凡万能彩票公式| www.100114.com-快三输了很多怎么办| www.9651.biz-云南农村彩礼多少钱| www.45837.com-68彩票网官方网站| www.76188.cc-温州市体育彩票中心| www.083408.com-智博彩票平台| www.88741.com-彩net-| www.917500.cc-彩票提现不了| |M13Graphics-手机彩膜贴纸打印机| www.132406.com-兰考彩礼风俗| www.4988.cn-盈盈彩官网彩票| www.698793.com-彩铅上色技巧| www.232495.com-足彩十四场对阵表| www.318249.com-十字彩票-| www.67be.com-360彩票软件下载| www.759355.com-高频彩十年高手心得| www.969215.com-8k彩票破解方法| www.ja95.com-福利彩票网站中心| www.151.hk-雨后彩虹网名大全| www.5670.pw-正规彩票排行榜| 500万彩票www.96386k.com| www.44711.com-淘彩app手机下载| www.765979.com-苹果下载58彩票| www.yr45.com-湖南体彩网论坛| www.741989.com-好运来彩票是不是黑| www.829000.com-新乐彩登陆-| www.906217.com-彩色肉系动漫| www.971729.com-有红包雨的彩票平台| www.ff3.cc-时时彩开彩结果查询| www.sd24.com-吉林快三坑爹| www.538663.com-三d家彩试机号| www.623389.com-顺亿彩票是真的假的| www.699548.com-竞彩资讯中心| www.773394.com-彩论坛-| www.860217.com-奥客彩票wan| www.930573.com-足球众彩专家汇总| www.986308.com-靠谱彩票平台有哪些| www.1333.live-永利皇宫网络博彩| www.86bx.com-福彩3d村杀码| www.781476.com-u9彩票官网-| www.921.red-彩虹颜色是哪几种| www.04673.com-买足彩哪个网站正规| www.536776.com-菠萝彩双色球破解版| www.667911.com-体彩米老鼠事件| www.750438.com-九歌彩票吞奖| www.812051.com-新加坡天天彩资讯绲| www.892554.com-50073彩票-| www.957418.com-足彩任九开奖| 幸运彩票www.609477.com| www.02515.cc-彩票了2元网走势图| www.297495.com-时时彩百位杀号法| www.212300.com-大发优彩网-| www.328918.com-一分快三全天预测| www.8466.net-七星彩复式投注介绍| www.jo25.com-王者彩票是圈钱的吗| www.447976.com-新加坡大彩开奖| www.577005.com-闲聊快三赌博群| www.20hx.com-也买彩平台手机版| www.7406.vip-搜索天吉福彩论坛| www.971471.com-723彩票下载| www.584443.com-1077彩票app| www.736631.com-多彩贵州网铜仁频道| www.836296.com-金彩网天空彩喜中彩| www.915708.com-快捷彩票登录| www.992576.com-广州福彩3d-| www.dg91.com-中福彩票是骗局吗| www.017156.com-腾讯五分彩软件计划| www.092296.com-上海快三号码大全| www.948579.com-福彩3的定位| www.cp00.com-彩客彩票-| www.983471.com-天津时时彩软件| www.475335.com-西宁市福彩中心| www.422767.com-合买彩票中奖的例子| www.547536.com-28彩吧-| www.628795.com-彩票代打兼职招聘| www.704004.com-滴滴跟单足球竞彩网| www.780056.cc-福彩三d初三能打吗| www.267070.com-2013彩票网下载| www.441235.com-四川体彩手机在线| www.189769.com-河南福彩网-| www.703276.com-万家彩票手机登录| www.836690.com-中原彩票0055| www.069986.com-立彩一我的帐户| www.069024.com-彩神争8网-| www.178368.com-微信如何买彩票| www.35521.cc-香港正规彩票有几种| www.76910.com-优盈彩票计划| www.882717.com-全国彩礼排行| www.82212.com-7349胜彩论坛| www.786354.com-微信购彩app下载| www.859948.com-5050彩票app| www.922156.com-彩礼是给谁的| www.978225.com-绵阳彩钢围挡| www.bb35.com-江西快三中奖规则| www.rt94.com-大奖彩票注册送38| www.8320.in-福彩佣金怎么算的| www.41100.cc-中国彩票有几种| www.56758.com-时时彩计划群发软件| www.122645.com-刷彩票怎么牟利| www.223620.com-大发快三漏洞分析| www.307884.com-七星彩历史号码大全| www.229079.com-到彩票店买彩票流程| www.427678.com-双色球彩票手机下载| 500万彩票www.35155p.com| www.796425.com-网上彩票赚钱靠谱吗| www.323779.com-七乐彩随机选号| www.785569.com-下载卖彩票-| www.637272.com-彩虹无人机产地| www.702370.com-雅彩旧版-| www.792596.com-福彩中心冯-| www.870469.com-吉林市开彩票站| www.947398.com-3d中国彩吧图库| www.998496.com-福彩公司招人吗| www.lg77.com-感彩彩票app| www.35940.com-福彩开奖助手| www.631007.com-彩运宝清风-| 500彩票网www.65707l.com| www.89bk.com-热购彩票客服| www.5223.cc-快三红号有几个| www.279529.com-时时彩大小预测| www.754692.com-菲律宾信誉彩票网站| www.1290.cc-快三平台如何建站| www.56149.com-9彩平台-| www.816397.com-福彩网一分钟开一次| www.1139.in-胜负彩擂台500| www.542001.com-体彩网app下载| www.45508.com-微彩站是正规的吗| www.295981.com-福彩二等奖多少钱| www.cai4433.com河南彩票快三| www.77576.com-彩票保安区在哪里| www.097665.com-买彩票用什么app| www.169323.com-快三怎样看走势| www.914238.com-瑞彩祥云快三邀请码| www.995759.com-体彩单场竞猜玩法| www.jt9.com-大发快三计划网址| www.kq46.com-福利彩票官方专业版| www.zc84.com-红牛彩票网址下载| www.954184.com-胜负彩087期| 中华彩票www.9149m.com| www.1093.wang-张家口体育彩票中心| www.090838.com-go彩app-| www.2469.cn-王成周中彩票的公式|