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.125565.com-快播彩票手机版下载| www.6048.vip-彩字的图片-| www.39831.cc-彩运彩票app| www.95305.com-谁有重庆时时彩群| www.139247.com-784彩票-| www.316989.com-彩票注册免费送18| www.060933.com-快三早知道-| www.211826.com-彩客站靠谱吗| www.398050.com-彩票猜大小单双句| www.121180.com-3d福彩几点开奖| www.839.in-玩彩票输光积蓄| www.539842.com-彩票中的数学概率| www.7364.cc-体彩16字-| www.39jp.com-彩神v丨-| www.0457.net-金多彩网址-| www.7755.com-正规的118彩票| www.38129.cc-福彩抽奖是真的假的| www.999544.com-中彩网老牌网站| www.ds31.com-如何反彩票托的套路| www.2609.com-乐购彩票真假| www.532371.com-买彩票中奖秘籍| www.671937.com-和彩宝合法吗| www.830951.com-老彩民高手它坛| www.958557.com-七星彩彩图-| www.89me.com-辽阳彩票站出兑信息| www.3414.cn-三地开奖结果彩票| www.364556.com-聚财彩票软件可靠吗| www.473177.com-西安彩票店申请| www.556752.com-新浪彩票动态澳盘| www.622605.com-福福彩彩票站多少钱| www.690955.com-xmb彩票-| www.768090.com-戚泥丝彩票软件| www.837577.com-竞彩滚球什么软件| www.907762.com-秘梦解图七星彩奖表| www.972481.com-优彩师软件下载| www.lt.com-竞彩足球比分| www.222507.com-上海快三和值走势图| www.389959.com-帝王彩票下载安装| www.563950.com-分分彩投注-| www.735577.com-乐⑧彩票网站| www.02017.com-金沙送彩金的网站| www.523009.com-黑彩玩法-| www.149783.com-百万彩票兼职| www.114898.com-银河彩票免费下载| www.255410.com-六星彩开奖公告查询| www.652175.com-福彩快频彩app| www.6960.vip-重庆十人彩-| www.38751.cc-快三同号不同号规律| www.456185.com-彩票中了到期了咋办| www.520561.com-彩票兑奖经历| www.670505.com-七星彩南国彩票| www.800562.com-万豪彩票官网下载| www.888004.cc-3d试机号牛彩网| www.973521.com-彩虹歌词曲原唱| www.hg13.com-彩票在线万能倍投器| www.873123.com-老快三专家杀号| www.997240.com-体彩期3d开奖号码| www.f92.top-体彩排列三图谜专区| www.23ny.com-辽宁全运彩走势图| www.9179.com-七星彩各省中奖情况| www.68136.cc-重庆时乐彩开奖号码| www.092130.com-乐发彩票合法吗| www.952094.com-新希望彩票靠谱吗| www.883207.com-彩友多软件合法吗| www.941612.com-合买彩票话术| 易彩集团www.25688k.com| www.865259.com-下彩网网页-| 大赢家彩票网www.544093.com| www.356567.com-美食绘画图片彩铅| www.354566.com-福彩3d彩票交流群| www.868271.com-五分彩怎么玩法| www.959938.com-彩票精准购彩计划| www.ms60.com-爱乐透彩票电脑版| www.4lz.com-刮彩票中大奖视频| www.67ob.com-竞彩2中一-| www.21648.com-彩神争8lll| www.798433.com-竞彩篮球编号| www.919337.com-彩经走势图-| www.986109.com-今日足彩分析| www.fo41.com-大发快三有没有技巧| www.m01.me-乐彩vip购彩| www.576753.com-下载鸿运彩票网| www.659684.com-台湾六福彩总站直播| www.753225.com-d9彩票网址-| www.814804.com-吉林快三大小微信群| www.897052.com-福彩出的什么号| www.963489.com-简单彩铅星空图片| 网易彩票www.502433.com| www.093875.com-北京时时彩高频彩票| www.462209.com-彩票规则漏洞| www.573114.com-彩虹51官方下载| www.662625.com-人工智能彩票机器人| www.791153.com-体彩模拟-| www.903740.com-那个彩票合买平台好| www.993358.com-足彩竞猜胜负规则| www.lb99.cc-福彩抽奖-| www.697637.com-天下彩网址-| www.850891.com-三分时时彩规则| www.964898.com-揭秘网上彩票骗局| www.bh59.com-重庆5分彩骗局| www.2nu.com-黑彩不给提现怎么办| www.399.hk-福彩主任上级是| www.563853.com-松岗东方亮彩在哪里| www.638632.cc-色彩构成图片作业| www.771734.com-三时时彩人工计划| www.853185.com-竞彩168app-| www.936319.com-大发彩票群-| www.991383.com-够力七星彩海口论坛| www.pt08.com-福彩3d论坛静态版| www.663011.com-中国体彩大乐透开奖| www.804473.com-cp1248彩票-| www.886790.com-大大中彩票靠谱吗| www.972334.com-福彩3d胆码最准| www.cd98.cc-黑彩赌博的案例| www.020312.com-晋城福利彩票转让| www.025817.com-福彩三地中奖窍门| www.598390.com-七星彩19023期| www.680930.com-福彩开奖造假视频| www.150234.cc-保定体彩中心地址| www.260506.com-福彩3d五行八卦图| www.353242.com-1216con彩票| www.447561.com-足彩正规投注网站| www.564440.com-东方彩票平台注册| www.658338.com-彩票走势图的app| www.766208.com-投彩网彩票投注站| www.848083.com-怎样查福彩中奖了吗| www.922924.com-网络竞彩平台靠谱吗| www.978531.com-福彩3d银海布衣| www.de43.com-买体育彩票几位数| www.xg22.com-福彩双色球奖项设置| www.654070.com-重庆时时彩直选遗漏| www.55440.cc-九宫图算法彩票运用| www.338624.com-湖北彩民中大乐透| www.480272.com-和彩云是什么业务| www.0088.cn-中国彩票查询下载| www.016016.cc-唯彩会苹果下载安装| www.110280.com-k3彩票网官方网址| www.tz60.com-彩票123网址导航| www.16bk.com-幸运彩乐园极速飞车| www.31715.com-竞彩足球完整500| www.73289.com-有没有彩票计划群| www.077551.com-鸿彩网直播种子| www.996707.com-福利彩票机选与自选| www.310231.com-省体育彩票孙宪斌| www.33932.cc-高频彩票分析师招聘| www.007410.com-体彩开奖公告号码| www.27526.cc-彩票7选5图-| www.216727.com-彩票数字规律题| www.937227.com-易彩民彩福地| www.254470.com-旺彩开奖结果大全| www.639721.com-微信彩票竞彩| www.gd37.cc-分分彩胆码计算公式| www.306414.com-足彩软件-| www.4834.xyz-世界杯阿根廷彩票| www.0550.loan-体彩赢刊电子版| www.962333.com-精英彩票app| www.295113.com-福彩快三新闻| www.690.cm-时时彩代理反水规则| www.dg94.com-讧苏福彩快三开奖号| www.417855.com-中博彩票系统| www.209625.com-体彩排五开奖结果| www.265376.com-快三多久开一次奖| www.071137.com-彩票店开业-| www.211138.com-安徽省福彩快三号码|