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天

知道了
1分快三 www.72286.com-好易自助终端彩票| www.35ph.com-足彩什么时候开售| www.676535.com-百福彩网址-| www.813575.com-体彩足球比分| www.009484.com-凤彩网彩票平台| www.855165.com-快三中了豹子多少钱| www.964897.com-淘宝卖家送彩票| www.cp681.com-新快三平台-| www.616836.com-黑客入侵彩票数据库| www.810933.com-福利彩票现场直播| www.163357.com-江苏快3十分彩下载| www.260054.com-福彩2019027| www.346851.com-体彩大乐透二元网| www.455721.com-手机能打彩票么| www.567291.com-江苏体彩预测| www.690902.com-竞彩结果-| www.819066.com-彩票永旺计划| www.936902.com-凤凰彩票怎么玩法| 大赢家彩票平台www.903117.com| www.tk29.cc-360购彩代购| www.985010.com-时时彩人工计划免费| www.ma86.com-中彩网快三平台| www.21529.cc-的买彩票规律| www.042969.com-体育彩票网点查询| www.952231.com-博众时时彩出售| www.cai0877.com彩票上海快3开奖| www.425406.com-福彩江苏快三合法吗| www.556789.com-特区彩票七星彩开奖| www.635332.com-七彩阳光完整版镜面| www.725958.com-福彩3d专家预测号| www.801892.com-天津快三有没有| www.j09.com-棋牌游戏充值送彩金| www.70nc.com-中奖彩票有效期多久| www.1797.vip-时时彩后一倍投计划| www.7505.cc-在体彩店上班怎样| www.144464.com-nba竞彩网首页| www.221640.com-瑞彩祥云江苏快3| www.ei00.com-福建省福利彩票| www.wf88.com-内蒙古快三分析| www.11bt.cc-澳客彩票手机下载| www.76cl.com-福彩七乐彩停售时间| www.1280.com-我要机选一注七乐彩| www.6891.biz-好彩一几时开奖| www.982510.com-优游时时彩平台注册| www.ef24.com-吉林快三计划图| www.t95.com-彩78彩票软件下载| www.029787.com-超级时时彩-| www.453178.com-中国每年彩票销售额| www.610167.com-彩铅画风景简单图片| www.546366.com-彩票站退机申请书| www.921510.com-彩礼钱-| www.gj44.com-福彩一分快三| www.698153.com-浙江体彩怎么买| 七天彩www.00665e.com| www.304379.com-甘肃快三图-| www.458060.com-彩票中奖新闻真假| www.601157.com-比较好的彩票网站| www.708667.com-超级大乐透彩票圈吧| www.839585.com-竞彩收米动态图| www.930289.com-91彩票客户端| www.tx98.com-彩票开奖3d试机号| www.070807.com-彩礼钱一般给多少| www.101897.com-体育彩票一定牛苹果| www.774408.com-永利网络博彩排名| www.899247.com-福彩3d藏机图解密| www.981146.com-八马彩票网站| www.40vs.com-天马行空彩票马报| www.1468.xyz-超好看的彩铅手抄报| www.210452.com-大发快三可以玩吗| www.313076.com-体彩nba可以买| www.67167.com-河南福彩兑奖在哪里| www.538816.com-澳洲时时彩技巧b盘| www.cai3377.com吉林快三是什么意思| www.755040.com-彩票87平台合法| www.20232.com-体育彩票怎么选数字| www.58oa.com-彩票中奖趣闻| www.569586.com-福彩3d三毛图| www.91cq.com-pk彩线路导航| www.695070.com-鸿彩网是不是骗人的| www.955295.com-500彩票必中神器| www.706836.com-开一个私人彩票网站| www.372338.com-合肥体彩中奖| www.496702.com-小米彩蛋-| www.788117.com-足球彩票新浪竞技| www.51510.com-糖果彩票真的吗| www.027732.com-棒棒彩票怎么样| www.277493.com-中彩网快3-| www.05kj.com-彩铅画的目的是| www.707906.com-湖北快三预测彩乐乐| www.096178.com-体彩公益金-| www.791664.com-宁夏自治区福彩中心| www.181451.com-60123好彩网站| www.227503.com-手机众彩app| www.60ga.com-彩票如何在手机购买| www.087665.com-彩之王是否真的| www.202306.com-贵州体彩好-| www.812.website附近的体彩销售点| www.8330.top-七星彩心灵码仙视频| www.39500.com-百度七星彩推荐号码| www.h05.xyz-排三彩宝网走试图| 500万彩票www.48wcp.com| www.603947.com-u信彩票-| www.ew18.com-重庆时时彩苹果软件| www.5124.biz-彩票拒绝兑奖| www.882541.com-三分彩人工在线计划| www.753875.com-709彩票提不了现| www.865717.com-快三龙多少期| www.037073.com-500彩票下载安卓| www.228855.com-好彩香烟双爆珠价格| www.033673.com-快三豹子一倍多少钱| www.092729.com-下载注册送彩金彩票| www.829252.com-2017足球彩微信| www.187016.com-分分彩下载安装| www.396700.com-彩票实战讲座l一4| www.588853.com-118彩票手机下载| www.31506.com-玩网络彩票心得| www.507053.com-体彩小红包中奖图片| www.380789.com-福彩天天选4| www.496203.com-彩票稳赚技巧| www.841826.com-体育彩票的推广| www.6326.biz-红五彩票下载| www.02966.com-体育彩票旗舰店网站| www.789.la-双色球期彩票指南报| www.378843.com-k彩富民福地登| www.69kp.com-乐彩平台真的假的| www.669250.com-彩色童话-| www.127034.com-可彩慧-| www.r66.online-快三会上瘾-| www.489.in-彩天堂登录页面| www.222262.cc-彩票开奖查洵公吿| www.298997.com-彩票最新开奖查询| www.388677.com-福彩摆球顺序走势图| www.ff5.cc-分分时时彩app| www.887353.com-足球彩票算不算赌博| www.av40.com-中彩票暴富的小说| www.pn68.com-体彩北京快三| www.06yg.com-简单彩铅樱花树画法| www.431.in-河北快三怎么看大小| www.914747.com-彩10-| www.29zt.com-福彩3d谜语7| www.3815.top-七星彩票长条| 大赢家彩票平台www.918681.com| www.333439.com-卖东西送彩票违法吗| www.468668.com-万彩国际app下载| www.592653.com-秘梦解图七星彩解码| www.697182.com-中体彩运营公司| www.026793.com-试玩赚佣金彩票| www.999613.com-绝密网彩霸单双四肖| www.522044.com-武威附近体彩销售点| www.576492.com-成都福彩店-| www.787711.com-彩客科技-| www.269505.com-怎么鉴别假彩票店| www.589026.com-搜索甘肃快三| www.690106.com-中彩网美媒体擂台赛| www.783773.com-038彩票网页登录| www.873986.com-体育彩票卖提成多少| www.958875.com-彩票开奖详情| www.63vh.com-中国彩票研究院| www.0763.date-第九彩票官网下载| www.534504.com-体彩七星彩中五个数| www.621603.com-黑龙江时时彩规则| www.678733.com-国彩彩票平台免费| www.872071.com-快三输了3000了| www.0762.date-铁公鸡七星彩梦奖|