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.go98.com-好彩客app官网| www.oj11.com-福利彩票38期| www.788166.com-中国足彩网下载安装| www.900053.cc-51彩票登录-| www.987375.com-哪个彩票平台正规| www.vj58.com-今日开奖快三河北| www.512610.com-秋天树林道路彩铅画| www.52ub.com-49gcc特彩-| www.53440.com-五分彩投倍规则| www.033030.com-c78彩票-| www.692203.com-17彩票网靠谱么| www.823848.com-福彩双色球在线购买| www.905170.com-滨州体彩转让| www.970349.com-体彩任选三开奖| www.cai9211.com河北快三官网下载| www.168353.com-北京快三开奖结果走| www.ox57.com-快乐彩走-| www.127211.com-彩铅q版萌图| www.931882.com-多多中彩票网| www.999056.com-时时彩压大小规律| www.fp83.com-福彩快三刷流水赚钱| www.xy95.cc-梦到买彩票中奖| www.51621.cc-鸿运博彩app| www.383089.com-大智慧彩票图表| www.499401.com-五分彩注册号| www.441229.com-竞彩混合过关规则| www.424268.com-北京七彩祥云| www.q57.cc-快三加奖公告| www.512608.com-素描彩铅画图片简单| www.157987.com-有加奖的足彩app| www.262060.com-快三软件哪个是真的| www.16lt.com-天天福彩软件下载| www.2982.cc-彩票网购官方| www.285652.com-安徽快三计划哪里有| www.363756.com-彩虹小马简笔画图片| www.874234.com-大厅彩票源码| www.c55.shop-甘肃快三对子分析| www.66879.cc-彩票扫码查询| www.115416.com-七乐彩3l期-| www.266552.com-网上快三算赌博吗| www.485886.com-足彩任九场开奖时间| www.050357.com-黑彩坐庄心态| www.461236.com-福彩3d独胆死规律| www.824113.com-三彩雪丽品牌| www.70088.com-下载福彩体彩走势图| www.77hb.cc-重庆时时彩第53期| www.359197.com-福d三彩开奖| www.951464.com-聚鑫网彩票真提现钱| www.0rm.com-天津体彩玩法| www.6613.wang-青蛙彩票开奖| www.699530.com-新浪彩票3d詹天佑| www.95581.com-彩票怎么分-| www.663755.com-中国体育彩票全运彩| www.9908.cn-体彩公益图片大全| www.65822.cc-彩票伪随机数| www.176877.com-彩票导师靠谱吗| www.45079.com-江苏快3彩乐乐| www.763009.com-今天西宁快三d开奖| www.es7.com-腾讯快三走势图| www.rx99.cc-苹果手机怎么买彩票| www.368928.com-七星彩画规神器| www.481618.com-什么彩票平台不黑钱| www.560892.com-体彩走势图500期| www.627236.com-3o6官方彩票网| www.693789.com-线下彩票怎么买| www.38xw.com-太原结婚彩礼| www.718257.com-彩库宝典1.3.2| www.18921.cc-体彩实体店终报价| www.85544.com-福星彩软件-| www.695325.com-竞彩支持比例与误差| www.686103.com-3000万彩票应用| www.es44.com-彩神是真的吗| www.44bv.com-重庆时时采彩投注| www.5743.cc-彩票七位数怎么买| www.27758.com-爱彩乐是什么东西| www.318035.com-三分时彩开奖记录| www.778559.com-江苏能不能买七星彩| www.610282.com-福彩3d991-| www.715677.com-中彩娱乐作弊器| www.814004.com-千亿彩票3官网| www.902803.com-k彩彩民中奖福地| www.980327.com-558彩票app下| www.bv53.com-中国福利彩票查询| www.784678.com-乐米彩票官网资讯| www.691597.com-烟台福利彩票官网| www.33309.com-山东竞技快三查询| www.hh45.com-肥强彩经app| www.23113.com-体育彩票纸-| www.995706.com-竞彩赚钱-| www.ot92.com-大发快三1分钟一期| www.183281.com-河北彩票快3跨度| www.308921.com-七乐彩3个号有奖| www.725821.com-期期中彩票资讯| www.806508.com-竞彩跟单资金计划| www.966827.com-宝马彩票老宝马登录| www.wl51.cc-江苏体彩开奖| www.76gz.com-七乐彩守号图| www.78779.cc-福彩三d贴吧| www.269157.com-官彩-| www.20955.cc-足彩稳胆技巧| www.177368.com-百盈快三是哪的彩| www.507931.com-中兴彩票正规吗| www.660722.com-看福彩3d开奖号| www.768961.com-东盛彩报1-| www.2902.vip-东北快三有吗| www.366400.com-快三10和值-| www.695179.com-昆山彩票中奖| www.4414.vip-别赌彩怎么玩都输| www.53132.cc-新浪爱彩是什么| www.211686.com-湖北快三选号| www.954525.com-奔驰彩票计划网| www.ep97.com-360彩票开奖公告| www.06em.com-彩铅手绘人物写实| www.4238.in-七彩云mz网-| www.160227.com-乐都彩票app登录| www.412727.com-福利彩票19032| www.5514.cn-真实有效的彩票程序| www.279889.com-5分时时彩开奖| www.163900.com-假彩票粉-| www.145358.com-福利彩票提点多少| www.348.bid-中彩双色球开奖视频| www.05128.cc-中国合法彩票app| www.af04.com-体彩体彩开奖号| www.854851.com-极速快三能玩吗| www.802898.com-双彩票中奖者| www.702182.com-胜负彩彩果-| www.603756.com-977幸运彩票| www.312169.com-下载e球彩走势图| www.ld43.com-111·cc彩票| www.16nv.com-体育彩票中奖公布| www.98vj.com-福彩三滴字谜| www.3284.me-学的福利彩票走势图| www.45tm.com-盛大彩票怎么才能赢| www.0791.cx-在线购买足彩| www.5546.vip-1516彩票网下载| www.163231.com-快三是啥玩意| www.362231.com-怎么形容彩虹| www.067858.com-时时彩制作网站价格| www.80638.com-竞彩交流群-| www.7985.vip-澳门博彩业收入占比| www.237984.com-彩票快3和值跨度表| www.69vs.com-福彩易彩-| www.65rs.com-体彩怎么买法大乐透| www.405999.com-江苏快三中奖图| www.549449.com-哪里可以买欧冠竞彩| www.1013.net-彩乃奈奈作品封面| www.17tv.com-大乐彩今晚开奖视频| www.313678.com-体育竞彩网首页| www.391005.com-购福彩双色球选号| www.688614.com-发短信来教人买彩票| www.753896.com-南国七彩票论坛| www.805570.com-网上买彩输了很多钱| www.863535.com-内蒙快三打豹子图| www.912117.com-购买私彩违法吗| www.967336.com-彩票qq群号大全| www.iv.com-足彩竞猜-| www.923562.com-彩票开彩票软件| www.982410.com-山西体彩网上购买| www.zv5.com-足彩14场推荐| www.tx46.cc-快三投注员头像| www.8yc.cc-新浪彩票3g版| www.59ch.com-我的彩票3d开奖| www.567739.com-彩票c36cm网| www.52297.com-福利彩票店开店赚钱|