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天

知道了
彩01彩票 www.951305.com-澳客彩票app下载| www.52wg.com-竞彩足球魔方官网| www.40561.com-掌优彩票合法吗| www.cp7998.com-安徽快三投注| www.021252.com-时时分分彩骗人吗| www.g13.tv-106彩票下载| www.57725.cc-百度中彩彩票| www.731290.com-牛彩纽约平台| www.819628.com-彩票研究群-| www.894921.com-体彩快三-| www.965450.com-体育彩票是什么| 金凤凰彩票www.404977.com| www.11867.cc-6678彩票官网| www.416885.com-118彩图诗句| www.wd28.com-鄂彩宝-| www.93ni.com-亚盘足彩分析师| www.268995.com-韩国快三网-| www.577512.com-好彩烟什么好抽| www.723501.com-江苏体彩亿元大奖| www.947650.com-福利彩票营销计划| www.ap57.com-广东快三开奖走势图| www.73ad.com-体彩开奖5d-| www.072836.com-丹麦快乐彩选五计划| www.156949.com-五分彩五星定位胆| www.315811.com-体彩店有刮刮乐吗| www.yu81.com-七星彩0到9的对数| www.43bi.com-足彩奖金计算器澳客| www.913674.com-彩票游戏下载| www.993630.com-信誉好的彩票app| www.je17.com-长春福彩中心地址| www.93798.cc-竞彩论坛哪个好| www.9692.xyz-体育彩票11选5走| www.vw17.com-网购彩票-| www.582.win-时时彩回血上岸心得| www.78611.cc-新昌双彩乡乡长| www.049908.com-天下彩开奖l结果| www.973421.com-彩虹宝宝第二季免费| www.ka31.com-快三和值中奖多少钱| www.09zv.com-网冠彩软件下载| www.859.cm-时时彩怎么定胆精准| www.282560.com-时时彩5万回血计划| www.528723.com-复式彩票怎么算| www.83500.cc-阳光彩票登录入口| www.794301.com-九州彩票赚钱可靠吗| www.973242.com-彩虹快刷-| www.og13.com-福彩线上投注平台| www.876577.com-中心彩报-| www.952028.com-503彩票-| 中华彩票www.9149h.com| www.97115.cc-足彩火柴盒交易量| www.549698.com-欧冠足彩-| www.69tn.com-男子丢彩票开枪自杀| www.883772.com-博彩王彩票分析| www.ln02.com-中彩网提现不了| www.981.bid-七星彩中个号有奖| www.181.in-梦见朋友刮彩票中奖| www.983640.com-合法的彩票有哪些| www.004201.com-柬埔寨博彩合法吗| www.364528.com-刚力彩芽男装| www.017804.com-广东福彩好彩1| www.58455.cc-8号彩票赚钱| www.3ff.com-亿彩票app安卓| www.840062.com-福利彩票一年销售额| www.ar48.com-快乐彩33-| www.9820.vip-k彩福地app-| www.66727.cc-3d彩票网上兑奖| www.2958.vip-体彩店怎样装修| www.19zu.com-周中胜负彩-| www.1008.cc-星期一三五开的彩票| www.911420.com-湖北快三未出统计图| www.981101.com-彩花是什么番里的| www.jw5.com-甘肃快三遗漏数据| www.06gp.cc-彩铅叠色变深技巧| www.94xi.com-中国福利宏达彩票| www.4801.top-彩虹六号腾讯挂件| www.134959.com-ok彩票app下载| www.233767.com-彩票容错缩水技巧| www.313366.com-双彩网论坛论坛| www.786733.com-百胜快三是不是骗局| www.886080.com-五洲彩票网址| www.sp00.com-时时彩和尾怎么算| www.9cg.com-劲球彩票玩法| www.1101.live-上海体育彩票| www.3726.com-七星彩天天开奖吗| www.336866.com-广西快三新玩| www.4324.biz-彩票站不给兑奖| 500彩票www.50064i.com| www.6552.shop-盈丰彩票正规不| www.ep22.com-快三交流-| www.235856.com-胜负彩走势图带坐标| www.nj8.cc-上海快三开奖助手| www.338640.com-湖北彩票大奖| www.990691.com-多乐彩11选5开奖| www.hu72.com-快中彩开奖结果查询| www.919037.com-百盛博彩软件安卓版| www.987617.com-快三单双算法教程| www.ad47.com-体彩开奖查询彩| www.391070.com-体彩中三位数| www.525026.com-腾讯分分彩玩家| www.639422.com-买竞彩足球亏死了| www.716363.com-彩铅画初学-| www.791515.com-宁夏彩票大奖| www.858737.com-高频彩拉人-| www.930772.com-哪个国家开奖南洋彩| www.998764.com-体彩天下是真的吗| www.an56.cc-分分快三在线预测| www.86hg.cc-喜乐彩票监管| www.622723.com-彩票9acc-| www.295726.com-京东彩票-| www.761131.com-好彩1好彩2玩法| www.02775.com-幸运快三稳赚买法| www.740043.com-聚彩官网下载| www.514760.com-河南民权彩礼多少| www.703945.com-王成周彩票密码表| www.427951.com-赛马彩票开什么号| www.17pm.com-彩鸾归令词牌| www.5690.vip-吉林省时时彩走势图| www.643015.com-中华彩票网手机版| www.9897.cc-福宏彩票-| www.fv58.com-免费大发快三软件| www.846291.com-竞彩概率计算方法| www.947440.com-新彩吧开奖结果| 好运彩票www.001hy.cc| www.xq58.com-福利彩票第35期| www.699021.com-乐和彩票可靠吗| www.951499.com-新浪体育彩票胜负彩| www.737158.com-神彩福牛论坛| www.732520.com-安阳滑县彩礼价目表| www.882200.com-90彩票app-| www.901378.com-k8彩票登录平台| www.284162.com-国彩8-| www.445538.com-彩票白菜论坛大全| www.757523.com-大鹏金服彩票| www.855257.com-好彩网网址-| www.971260.com-体育彩票排五开奖结| www.jt05.com-彩神外挂-| www.80jg.com-玩彩乐官网-| www.230908.com-福彩快三是谁发明的| www.950771.com-极速彩票下载| www.fy4.com-时时彩技巧心得大全| www.z00.com-我想当彩神ii代理| www.120237.com-彩票店有大发快三吗| www.610410.com-快三如何买最划算| www.695548.com-竞彩足球澳客网| www.62kv.com-鸿大彩票-| www.713058.com-吉林快三输赢| www.815362.com-福利彩票在线投注卡| www.905326.com-足彩在哪里购买| www.968549.com-兼职给账户买彩票| 天玺彩票www.513550.com| www.cp8311.com-3d彩宝走势图| www.829093.com-河北快三是什么彩票| www.935252.com-红包彩票直播间| 大赢家彩票平台www.536210.com| www.9304.cm-彩票不可能中的| www.181684.com-彩票开奖查询七星彩| www.275839.com-快三有挂吗-| www.88nf.com-分分快三攻略| www.86jc.com-天天竞彩推荐| www.081212.com-彩票中奖怎么领取| www.nm54.com-体彩选号助手| www.428681.com-足彩大赢家手机软件| www.240944.com-彩吧下载-| www.gd06.com-彩虹玫瑰-|