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.158890.com-彩票开奖结果百度| www.318912.com-江西彩票大奖| www.00cs.com-天津快乐十分彩经网| www.129648.com-奥客网竟彩足球| www.567174.com-旺旺彩票app网站| www.305896.com-江西快乐彩11选五| www.398751.com-彩运来官网下载| www.184599.com-玩彩票-| www.321820.com-百度爱彩票-| www.527058.com-王刚讲被冒领的彩票| www.53982.cc-彩票自动投注app| www.064500.com-私彩平台修改器| www.505478.com-乐彩网3b静态版| www.399913.com-星期三什么彩票开奖| www.189593.com-福彩3d专家预测| www.310323.com-长春体彩中心在哪| www.430990.com-跟大奖快三有技巧| www.3623.biz-网络彩票受害者| www.092272.com-福彩3d讲师视频| www.503927.com-鸿博股份彩票软件| www.260830.com-竞彩足球500| www.885021.com-亿彩堂怎么下载| 凤凰彩票www.5091k.com| www.81cs.com-江西体育彩票任三| www.5544.cn-幸福彩大乐透推荐号| www.100228.com-互联网销售彩票工作| www.78961.cc-178彩票真假问题| www.828863.com-足彩分析微信群| www.222060.com-7星彩预测最准号| www.398665.com-网络彩票兼职代打| www.626611.com-彩名彩票app| www.875235.com-排列三走势图彩经| www.15713.cc-初学者简单的彩铅画| www.860292.com-昨天体彩出的什么号| www.ud40.com-彩神大发时时彩| www.69382.com-快三二期计划| www.be.cc-安徽快三中奖号码| www.80016.com-体彩排列三技巧| www.505417.com-中国竞彩混合过关| www.53776.cc-非凡彩票充值| www.163226.com-福彩网兼职是真的吗| www.154944.com-竞彩单关历史| www.335595.com-广西快三加奖公告| www.515478.com-阜阳彩票案最终结果| www.614321.com-新加坡4d彩票开奖| www.701276.com-今期财神报彩图| www.235916.com-14场足彩开奖结果| www.26ab.com-彩煌-| www.799464.com-彩吧彩票勇士团队| www.469708.com-网上买私彩严重吗| www.872924.com-海南七星彩开奖奖表| www.359.com-如何才能中彩票大奖| www.16xd.com-香港五分⑥和彩| www.8700.vip-七星彩中奖对比查询| www.310356.com-兴平体彩-| www.723008.com-中国彩票坑人| www.822213.com-天空彩票四字解特| www.076206.com-彩票达人图片| www.176051.com-快三技巧选号口决| www.728844.com-大连体育彩票机出售| www.818528.com-中国福利彩票真实吗| www.04vu.com-彩票图片模板| www.68zu.com-澳门博彩戒治中心| www.576946.com-兰州彩票中奖者| www.25696.cc-彩民周刊专家组| www.74878.com-qq分分彩官网| www.183667.com-北京快三专家预测| www.097752.com-鑫彩网彩票客户端| www.9457.top-美国人彩票-| www.60600.com-江苏十五选五爱彩乐| www.105820.com-彩宝网走势图带连线| www.k64.me-上海快三安卓版下载| www.525.cn-7星彩怎么中奖| www.1788.live-二八彩app下载| www.17357.cc-彩套印刷-| www.334672.com-彩票开奖查询接口| www.18fo.com-七乐彩33期开奖| www.2457.vip-博金彩票站-| www.326235.com-瑞彩祥云app全民| www.141939.com-3d开奖结果彩宝网| www.779023.com-3d彩报大花猫| www.69406.com-网上哪里买彩票正规| www.994247.com-彩票分析大师官方| www.vb26.com-福彩林竹胆码今天| www.12372.com-大乐透彩乐乐| www.68219.cc-体育彩票如何中奖| www.73801.com-福利彩票几点封机| www.024415.com-时时彩任三组选玩法| www.336991.com-广东体彩网十一选五| www.773784.com-中国福到彩票| www.884487.com-福彩试机号走势图彩| www.957203.com-七星彩20组头尾| 500彩票www.303480.com| www.815989.com-排五走势图乐彩网| www.946106.com-福建福彩e线申请| 大赢家彩票网www.178167.com| www.gk34.com-九亿彩票一分快三| www.t25.cn-彩分兑换大乐透| www.80cm.com-3d双彩网站开机号| www.3224.in-778彩票下载安装| www.962353.com-福彩中心fc开机号| www.cp3801.com-如何破解快三买下期| www.576197.com-快三稳赢法-| www.di42.com-快三怎么买豹子| www.567026.com-emoji的彩虹| www.657975.com-乐盈彩票输死人| www.468817.com-三d彩票吧-| www.558143.com-大赢家彩票一分快三| www.702111.cc-体育彩票足彩竞猜| www.944633.com-百万彩票网骗局| www.994062.com-竞彩篮球胜分差| www.bm38.cc-可靠彩票平台有哪些| www.rd04.com-彩6官方下载3.0| www.973761.com-一分快三ios下载| www.jg0.com-彩票术语-| www.ol41.com-福彩种类及规则| www.s97.cc-彩票助手安卓| www.zz08.com-22彩票注册网址| 幸运彩票www.774311.com| www.966006.com-全民快三代理| www.cp860.com-福彩快三网上投注站| www.jm58.com-杏彩平台官网| www.169396.com-快三游戏-| www.759.cc-福彩3d漏洞号码| www.039203.com-彩票投资是什么意思| www.9726.org-风云彩票网址| www.62505.com-极速⑥合彩票网| www.rm55.cc-内蒙十分钟一期快三| www.9kx.cc-七星彩开奖结果宝| www.976362.com-安阳农村彩礼| www.ob8.com-优乐彩票官方网站| www.oe46.com-大陆平台彩票送彩金| www.0641.net-cc彩球网是真的吗| www.942891.com-湖北快三预测推荐表| www.995139.com-福彩主任违法事件| www.ku8.com-幸运快三有规律吗| www.262.cm-那些彩种是官方的| www.130436.com-江苏快三大小破解| www.66793.com-彩票3d怎么算中奖| www.3535.cc-澳门赠送彩金网站| www.038987.com-彩票投注时间大乐透| www.179234.com-河南福利快三开奖| www.860913.com-福利彩票3d直播| www.962796.com-银河全部彩票平台| www.bj74.com-1分快3彩票安装| www.9806.online彩票专家网345| www.677993.com-怎么分析安徽快三| www.yg61.com-重庆彩票时时彩| www.74197.com-七星彩七乐彩区别| www.169174.com-安微省快三开奖结果| www.91227.cc-彩烟香烟图片| www.081044.cc-体彩排列3追加期| www.619876.com-奇门测港彩秘诀| www.680492.com-彩票害死人-| www.911456.com-福彩公益行最近走进| www.981101.com-彩花是什么番里的| www.na6.com-分分快三稳定版| www.nz87.com-宁夏快三今日开奖| www.472020.com-香港三色彩有限司| www.379523.com-宝马时时彩下载| www.237478.com-福彩中奖规则表说明| www.932883.com-彩票平台互刷风控| www.3112.in-吉林省七星彩一等奖| www.rj22.com-安徽快三到几点|