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.22875.com-快三实时交流群| www.069064.com-彩票高手完整视频| www.154404.com-足彩博彩公司规律| www.266050.com-快购彩票5-| www.122675.com-彩金软手镯-| www.441384.com-七星彩梦册查奖| www.sr42.com-64卦测福彩3d| www.988042.com-福建体彩网官方首页| www.ni88.com-雪原园足彩比分直播| www.38cg.com-福彩双色球骗局| www.0883.net-山东福彩交流区| www.83vk.com-什么是豆彩瓷器| www.9878.org-万通五分彩平台下载| www.881384.com-足球博彩软件下载| 澳客网www.okw7.com| www.9865.in-五分彩开奖号是多少| 老彩票www.775702.com| www.669790.com-福彩有什么彩票| www.ks45.com-乐米彩票-| www.113924.com-体育彩票360| www.749084.com-苏州快三是什么彩票| www.1400.me-皇室彩票是骗人的吗| www.956219.com-体彩买球怎么买| www.774236.com-怎么买双色球彩票| www.877722.com-足彩属不属于赌博| www.660187.com-人工智能扫描彩票| www.949941.com-广东体彩11先5| 1号彩票www.yi636.com| www.124318.com-福彩3b开机号| www.29.me-七星彩中几位数有奖| www.63734.com-今日竞彩单场专家| www.039099.com-体彩快三-| www.796390.com-网上美女买彩票| www.54cg.com-彩16正版下载安装| www.079491.com-网上买的福彩快三| www.27789.cc-599彩票官网上| www.136206.com-赌彩票一分钟开一次| www.293630.com-江苏福彩体彩| www.500577.com-复式彩票怎么玩| www.87vz.com-彩虹鱼的特点| www.381135.com-重庆时时彩停购通知| www.532971.com-海南七星彩梦兆解码| www.603195.com-双色球快三多少钱| www.625612.com-牛彩3d-| www.712641.com-彩票老师微信| www.815633.com-排列五是福利彩票吗| www.899018.com-福彩三d专家预测| www.969744.com-网上购彩平台有吗| www.fl16.com-国家正规彩票软件| www.318804.com-南昌体彩兑奖中心| www.609293.com-彩票开奖三d走势图| www.450377.com-较大的博彩公司| www.666596.com-乐视彩票app下载| www.819883.com-彩礼钱高句子| www.cp9.shop-福彩5d玩法-| www.492200.com-竞彩足球怎么看欧倍| www.085012.com-彩之网3d相年富| www.097889.com-中国福彩在线| www.88384.com-人生出彩是什么意思| www.332613.com-公务员买彩票合法吗| www.428181.com-足彩缩水软件管用吗| www.527555.com-时时彩三星和值走势| www.787338.com-副彩体彩开奖| www.916102.com-中国体彩加盟| www.718579.com-彩虹的雅称-| www.828890.com-盗窃中奖彩票| www.921510.com-彩礼钱-| 竞彩网www.8jcw.com| www.3953.biz-ck8888彩客-| www.529887.com-东方彩软件-| 99彩票www.313355.com| www.ky38.com-彩票ios下载| www.04dn.com-大乐透杀号彩乐| www.74vl.com-时时彩彩票开奖时间| www.2305.org-3d彩吧全图迷| www.651.date-天下彩票49cc| www.16831.com-辽宁福彩下载| www.pe05.com-河北省福利彩票中心| www.183908.com-河北快三ks-| www.671222.com-万彩吧彩票开奖直播| www.955266.com-80彩app下载| www.70666.cc-口袋彩票店铺| www.822326.com-福利彩票36选7| www.123213.com-江苏体育体彩票| www.176229.com-快三必中技巧方法| www.520926.com-博雅彩票投注站点| www.712321.com-e彩票app下载| www.841617.com-福彩内部号是真的吗| www.957938.com-彩彩乐江苏福彩快三| 55彩票www.755914.com| www.vf07.com-彩吧全图迷-| www.76335.cc-彩博士全能王手机版| www.10989.com-足彩妖刀微博| www.104001.com-彩神争8的网址| www.318249.com-十字彩票-| www.573046.com-彩字在五行中属什么| www.53xf.com-搜索彩票双色球| www.po4.com-韩国有几种彩票| www.021319.com-博彩优惠高返水网站| www.730306.com-福彩3d太湖字迷网| www.913403.com-彩客站会跑路吗| 奔驰彩票www.781566.com| www.056797.com-韩式15分彩计划| www.39mx.com-七星彩能网上购买| www.929512.com-七星彩计算器360| 豪彩VIPwww.816820.com| www.858673.com-体彩试机号近10期| 吉利彩票www.66376h.com| www.623600.com-汇晨彩票-| www.130491.com-彩控网pk10-| www.245518.com-胜负彩比分直播| www.562163.com-快彩开奖结果查询| www.ji60.com-北京福彩票论坛| www.0821.net-欧冠足彩app| www.af04.com-体彩体彩开奖号| www.110650.com-七星彩奖池金余额| www.618586.com-体育彩票表格下载| www.127469.com-最老版彩库宝典下载| www.jg71.com-爱彩乐开奖结果| www.243218.com-360快三开奖结果| www.385260.com-福彩中奖假新闻| www.992458.com-旺彩号码库-| www.bu49.com-湖北快三今日关注| www.ub12.com-彩神iv安装| www.62ju.com-体彩助手官网二维码| www.026371.com-海南私彩平台| www.123263.com-精彩音乐会-| www.85420.com-随州福彩中心| www.cp9586.com-中彩网合法吗| www.xd05.com-618彩票网-| www.089210.com-vr重庆时时彩官方| www.555094.com-799彩票下载安装| www.53157.cc-福彩排列五走趁图| www.90474.com-三国梦想惨星彩漫画| www.030545.com-民彩网下载-| www.099769.com-快乐彩任三推荐号码| www.735155.com-福彩快三线上投注| www.798194.com-h广西体育彩票| www.870036.com-快三老板走势图| www.261009.com-安徽福彩快3开奖| www.650737.com-彩之云客服电话| www.750155.com-手机在线购彩平台| www.840011.com-官方快三购彩平台| www.902295.com-微信里能买彩票吗| www.973883.com-hao.123彩票| 彩61www.611874.com| www.nu57.com-彩票赌博输钱| www.cai0644.com兰州快三走势图今天| www.422356.com-88爱彩有没有破解| www.045600.com-河南快三杀号技巧| www.139473.com-优享彩-| www.46281.com-一张彩票提成多少| www.175587.com-大发快三走势图| www.343282.com-时时彩赔20倍| www.452345.com-太原福彩店转让| www.589650.com-好彩堂玄机网站| www.690202.com-新浪爱彩官网合法吗| www.809299.com-3d彩票技巧交流| www.956591.com-星彩3d论谈-| www.oz0.com-第一次买彩票就中奖| www.008340.com-在网上买彩票犯法吗| www.wm81.com-999彩票网-| www.416505.com-彩虹e台序列号| www.308791.com-彩票大乐透了预测号|