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.449778.com-武汉体彩中心在哪里| www.06rk.com-全讯彩票网-| www.4297.vip-a彩平台官网注册| www.mw8.com-5分快三趋势| www.3071.vip-七星彩小说txt| www.04rl.com-手绘彩铅教程| www.456296.com-腾龙时时彩做号新版| www.622624.com-万家彩票网检测线路| www.17sn.com-体彩提成如何计算| www.137858.com-中国福彩快三和值| www.34536.cc-激励买彩票的句子| 澳客彩票www.277ak.com| www.uu75.com-彩彩吧论坛首页| www.xs28.com-中奖彩票-| www.79vu.com-福彩3d怎么学| www.402625.com-爱彩下载安装到手机| www.302551.com-七星彩第一位杀号| www.460790.com-彩票站打票员体彩| www.16047.cc-福利彩票17500| www.56kj.cc-天天有彩票-| www.2629.cm-98彩票王-| www.269018.com-超彩票-| www.99943.com-168彩票能提现吗| www.025056.com-智慧彩计划官网| www.631711.com-大丰彩app-| www.757717.com-福利彩票复试计算器| www.202268.com-贵州中彩票-| www.il83.com-手机买福彩双色球| www.20po.com-e77乐彩会员登录| www.871085.com-利彩是什么性质| www.976818.com-二审改判不退还彩礼| www.kg25.com-中国福彩推选机选号| www.879269.com-五位数的彩票叫什么| www.2317.net-福彩中几亿-| www.867363.com-一定牛彩票网首页| www.3000.cm-3132彩票-| www.164885.com-海口彩票网经典彩| www.74ty.com-香港中彩网网址| www.1258.top-08vip彩票-| www.879325.com-江西快三选号技巧| www.028304.com-彩票之王是谁| www.780328.com-福利彩票咋申请| 大赢家彩票平台www.106537.com| www.799120.com-彩票打印机多少钱| www.904396.com-福彩3地跨度走势图| www.975740.com-河南驻马店订婚彩礼| www.cp2011.com-河北福彩快三一定牛| www.mb13.com-七星彩808加急版| www.0349.net-如何研究彩票| www.318561.com-图表走势贵州快三| www.266.com-开原琳彩电话| www.85909.com-深圳福利彩票app| www.289562.com-那个是凤凰私彩平台| www.290906.com-8828彩票平台| www.323472.com-七乐彩现场直播节目| www.889075.com-彩站宝8号店| www.980960.com-四川福彩快3| www.nc3.com-大乐透彩经网| www.rv34.com-博牛彩票破解| www.23km.com-新彩网3d汇总| www.106531.com-掌上娱乐彩票| www.mt6.cc-内蒙古快三早知道| www.vr54.com-快乐彩票乐彩网| www.914.online-彩虹人生的唯美句子| www.771270.com-天天爱彩票的网址| www.864864.com-中国体彩手机网| www.503862.com-75秒重庆时时彩| www.49337.com-彩之家大乐透走势| www.760689.com-重庆时时彩分析软件| www.851895.com-内蒙古体彩十一选5| www.my90.com-福彩三d视频讲座| www.025562.com-5分快三是哪里的| www.861586.com-体彩开将结果| www.469000.com-8g彩票线路登录| www.586883.com-无意间中彩票的故事| www.670643.com-彩票店兑奖-| www.739711.com-福彩双色球基本走势| www.191663.com-快三彩票怎么玩法| www.264500.com-购彩票网众-| www.327328.com-三d彩票开奖号| www.312628.com-快购彩平台怎么样| www.9638.xyz-b8彩票安全吗| www.78951.cc-福彩差5运用| www.44679.com-福建体彩论坛2中1| www.346234.com-快彩网投网站| www.59674.com-重庆时时彩时间结果| www.024455.com-国彩彩票app下载| www.119957.com-大发快三网投彩票| www.257843.com-彩票软件手机破解版| www.331764.com-乐彩静态版-| www.506504.com-江西福彩哪个台直播| www.525931.com-8k彩票作弊器| www.589132.com-310彩票网-| www.675333.com-广州汇彩路-| www.791591.com-京东如何投彩票| www.878143.com-3d走势图表乐彩网| 五星彩票www.5xca.com| www.426252.com-高人分析彩票| www.79708.com-吉林体彩11选五| www.585435.com-开元彩金免费送| www.232956.com-足球彩票比分值| www.071774.com-彩票的前景如何| www.243516.com-手机投注彩票app| www.8827.vip-彩票注册送白菜大全| www.90539.com-成功彩票计划| www.100559.com-乐彩客苹果版| www.212340.com-什么彩票平台稳| www.321558.com-彩票体彩开奖排五| www.31ho.com-飞盘奇门测彩| www.984880.com-吉林福彩网快3开奖| www.245767.com-佬牛足彩-| www.442027.com-在超市开彩票站| www.683195.com-浙江福利彩票征召| www.817850.com-新彩票走势下载| 凤凰彩票www.77801h.com| www.8ak.com-体彩14场对阵表| www.65qd.com-分分彩人工计划| www.404085.com-福彩17500开奖| www.855012.com-新皇冠彩票怎么样| www.8961.vip-易彩福地登录| www.520344.com-财神2彩票-| www.130336.com-乐汇彩-| www.020539.com-江苏快三大发计划| www.077198.com-广东快中彩开奖记录| www.292000.com-搜索快三助手下载| www.028848.com-家彩网3d排三胆码| www.78581.cc-苏州南站到新昌双彩| www.28375.cc-彩票中超级大奖| www.294167.com-国乐彩江苏快三| www.683158.com-老凤祥彩金调换规则| www.700028.cc-河内2分彩人工计划| www.925535.com-体彩店内布置图片| 网易彩票www.504133.com| www.898756.com-678彩票客户端| www.974336.com-彩客网大小分| www.cai3363.com快三投注-| www.tf06.com-体彩418走势图| www.26757.com-网投快三刷水钱方法| www.8281.loan-幸运彩52ⅹyc| www.286729.com-福利彩票店开店条件| www.398012.com-快三百度百科| www.529018.com-中国数字彩票| www.606870.com-彩票犯法么-| www.dj89.com-七星彩稳赚万能码| www.580107.com-成都福彩外围| www.665722.com-pk彩票在线-| www.761714.com-时时彩牛牛开奖查询| www.mf44.com-旺彩开奖结果大全| www.09nd.com-福建体彩泉州乐聊天| www.230216.com-盈彩骗局-| www.622051.com-福彩3d模拟摇号| www.398019.com-七星彩直播网易网| www.552901.com-浙冮快乐彩十二选五| www.14446.com-七星彩一等奖最低| www.031123.com-天天购彩票-| www.608113.com-最新白菜彩金| www.372508.com-无彩色-| www.499693.com-分分彩app手机版| www.737290.com-广西快三方法和技巧| www.91105.com-彩票双色球开奖信息| www.h24.me-体彩今天试机号| www.323417.com-七乐彩中奖查询工具| www.774410.com-彩漫母穴后篇71| www.126210.com-上海体彩最新app|