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.728321.com-福彩网点查询| www.88nt.com-彩九骗局-| www.30ai.cc-彩铅皮肤上色教程| www.431.date-百度分分彩-| www.755486.com-福彩5分钟玩法| www.739114.com-福彩3d开奖投注| www.897737.com-贵阳多彩贵州城门票| www.995024.com-5000彩票网-| www.m70.net-彩票热购个人中心| www.203787.com-七乐彩历史开奖号码| www.323273.com-全国最大彩票站| www.434903.com-福彩三d54期开奖| www.897147.com-时时彩长龙统计| www.hf11.com-三军大小快三| www.25yq.com-是彩友-| www.1992.love-宏发彩票官网| www.00879.com-福彩两天计划必出| www.481286.com-抚顺福彩对大奖在哪| www.327561.com-彩票开奘结果| www.253863.com-分分时时彩是官网么| www.005356.com-昨天体彩出的什么号| www.630225.com-福彩高手论坛首页| www.ki77.com-辽宁体彩网官网| www.3230.vip-安徽快三什么意思| www.005274.com-go彩是合法的吗| www.119412.com-福彩3d倍投计算器| www.971416.com-众购彩票导航| www.rj5.com-红牛彩票快三| www.069113.com-幸运快三的玩法介绍| www.181309.com-彩票投注app官方| www.322044.com-亚博科技阿里彩票| www.391193.com-易中彩票网骗局揭秘| www.661267.com-本科彩票专业| www.893762.com-彩票投注选号| www.980578.com-成功彩票网址是多少| www.kq03.com-吉林快三连出多少期| www.69iq.com-彩娱乐靠谱吗| www.354674.com-福利彩票交流3d群| www.37111.com-手机购彩软件靠谱吗| www.44hc.com-96彩票网-| www.54ze.com-大同体育彩票| www.09950.com-6118彩票注册| www.82338.cc-足彩19028-| www.068717.com-湖北快三彩票下载| www.189347.com-福彩基诺中奖规则| www.294727.com-体彩断组全部| www.398307.com-体彩排列三正好网| www.2643.pw-大发快三回血贴吧| www.245996.com-今日足彩资讯| www.55583.cc-简单水彩画教程星空| www.065265.com-彩铅画图片卡通人物| 瑞彩网www.809572.com| www.194.tv-彩之星彩票网| www.89588.com-国内彩票平台排名| www.jh11.com-电子彩票怎么兑奖| www.8068.vip-水彩画花卉图片| www.84677.cc-时时彩计划研究| www.220090.com-快三大全平台| www.586984.com-线上彩票有哪些| www.07ad.com-彩铅梦幻小样图| www.556.live-时时彩怎样算豹子| www.070146.cc-龙虎彩票官网| www.680342.com-中彩娱乐官方网站| www.762283.com-篮彩app排行榜| www.901209.com-江苏快三和值跨度图| www.076111.com-褔建体彩31选7| www.5330.me-彩票概率吧-| www.53199.cc-奇趣分分彩官网平台| www.346218.com-广西福彩官方| www.707339.com-彩票高手选号秘笈| www.875960.com-福彩小图-| www.cp2900.com-福彩快三中奖金额| www.678323.com-乐彩论坛_手机版| www.755820.com-彩票网站起名字| www.830718.com-万彩彩票计划| www.899231.com-福彩快3有赢钱的吗| www.964891.com-18彩票的网址| 华彩网www.www.hcw332.com| www.765220.com-808海口彩票论坛| www.0548.xyz-福彩牛彩3d字迷| www.422802.com-有没有彩票计算软件| www.179880.com-欢乐快三是哪里的| www.623557.com-竞彩猫官网首页微博| www.799962.com-体彩能在手机上买吗| www.yh17.cc-淘宝福彩哪里买| www.578272.com-福利彩票机-| www.026524.com-天齐彩票论坛| www.166367.com-快三算号神器| www.713391.com-福彩3d是不是假的| www.785109.com-乐迷炫彩ios| www.859783.com-彩民论坛推荐号| www.6081.vip-彩色纸箱厂家批发| www.947232.com-118彩票外挂| www.jh56.com-发彩网网址-| www.796248.com-头奖彩票官网| www.908071.com-俄罗斯1分彩的计划| www.978822.com-雷诺好彩一彩彩乐| www.bq83.com-下载至尊彩app| www.88084.com-如何分辨彩票站真假| www.cai0177.com快三彩票开奖查询| www.024378.com-500彩集团-| www.122575.com-乐彩vip安全么| www.57942.com-山东七乐彩-| www.137512.com-彩票专家查询| www.718699.com-彩虹简笔画图片| www.788132.com-新浪足彩开奖| www.864928.com-下彩网安卓彩网| www.937756.com-体彩第19007期| www.156263.com-选彩票神器-| www.706993.com-竞彩足球推荐彩乐乐| www.953255.com-我想下载中彩网| www.ij75.com-广东体彩-| www.898351.com-彩票刷分红靠谱吗| www.988047.com-仲彩网站-| www.154098.com-福彩3字迷图谜总汇| www.226882.com-彩虹哥-| www.322657.com-海南七星彩开奖现场| www.473816.com-足彩最新奖金查询| www.543699.com-全国彩票图表我中啦| www.610266.com-淘宝不能买彩票了| www.675777.com-天下彩免费资料综合| www.738851.com-500彩票彩神争霸| www.796424.com-猜谜语动物的彩票| www.89969.com-高频彩伪随机数漏洞| www.207699.com-大发快三免费作弊器| www.737306.com-众彩网址-| www.837480.com-山东福彩微信公众号| www.937477.com-快三包号技巧| www.cai5444.com甘肃快三的预测| www.nj04.com-竞彩篮球360直播| www.435165.com-彩吧助手排三走势| www.526931.com-福彩五星通选| www.591263.com-竞彩保本对冲7%| www.676210.com-彩色压模地面| www.776975.com-苹果如何下载立彩| www.260559.com-福彩3d首页折线图| www.789409.com-成都彩色压印地坪| www.3643.me-彩票外交是什么职业| www.503050.com-微信快乐彩是什么| www.613666.cc-彩票带赚-| www.238390.com-快三自己-| www.154706.com-足彩买比分的技巧| www.8741.loan-重庆时时彩又卡奖了| www.40864.com-372彩票-| www.005274.com-go彩是合法的吗| www.172215.com-江西福彩快三今天| www.791121.com-彩票大师下载软件| www.848236.com-古建彩绘公司| www.893712.com-彩牛彩票app下载| www.947686.com-贵州体彩网排列三| www.988588.com-幸运中彩票安卓下载| www.cp817.com-贵州福彩快3走势图| www.jb23.com-京彩手机购彩票| www.797693.com-彩民彩票撤销订单| www.870551.com-易彩app靠谱吗| www.923007.com-福彩3d开机号试| www.968401.com-时时彩暂停开奖| 易彩网www.12455j.com| www.by80.com-贵州体育彩票网| www.654751.com-最近七星彩图规| www.027248.com-英国5分彩官方网站| www.25725.cc-菜鸟彩票平台| www.960756.com-大众彩票计划群| www.ak48.com-49彩票是黑平台吗|