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.713539.com-王者彩票有什么技巧| www.632.gg-918彩票注册平台| www.060069.com-全国天天彩选三| www.942858.com-广西体彩兑奖地址| www.32232.com-爱彩彩票怎么登录| www.22719.cc-体彩有哪些彩种| www.981078.com-七彩杯有害-| www.9268.org-彩票分析师考试科目| www.001963.com-国内彩票的故事| www.414972.com-福彩胆拖投注详解| www.568188.com-顶尖彩票不能提现| www.965675.com-今天i海快三开奖| www.wy2.cc-双彩论坛首页| www.107049.com-新浪足球竞彩网首页| www.97nk.com-新博瑞彩票邀请码| www.385930.com-166彩票-| www.218085.com-彩神大发快三预测| www.56ay.com-陕西福彩双色球中心| www.786533.com-全民福彩网站网址| www.888449.com-互联网彩票开放时间| www.29xn.com-福彩3d昨天的奖号| www.612080.com-幸福彩-| www.700779.com-竞彩水位是什么意思| www.789404.com-竞彩篮球软件哪个好| www.867958.com-特特区彩票-| www.936280.com-聚宝理财五分彩票| www.992187.com-竞彩篮球直播| www.bs69.com-快三软件有哪些| www.z60.cn-快3福彩开奖号码| www.71mm.com-什么彩票2元一个| www.301382.com-彩鸿彩票下载| www.48bn.com-申请福利彩票投注站| www.984113.com-上海福彩网4d| www.ai93.cc-我想查一下福利彩票| www.re34.com-体育彩票七位数玩法| www.731449.com-易彩堂的邀请码| www.807075.com-新浪彩2博客| www.882062.com-彩票工资车群| www.968464.com-鲍彩票-| www.cp802.com-快三哪个省销售最多| www.xv93.com-河北体彩任选5遗漏| www.25re.com-华彩人生版本| www.883506.com-博友彩官方下载| www.968924.com-澳门彩金成功退货| www.cai9077.com七星彩兑奖表| www.n45.cc-彩票快十怎么玩| www.63ub.com-内葛快三开奖结果| www.cg63.com-什么叫官方彩种| www.885737.com-彩宝3d个位三胆| www.62818.cc-神马彩票下载安装| www.13359.cc-竞彩兑奖规则和地点| www.53758.cc-盛时时彩-| www.82474.com-彩吧开机号开奖号| www.135069.com-五彩缤纷香烟| www.4444.gg-体育彩票哪家好平台| www.895727.com-内苎古快三走势图| 熊猫彩票www.111xm.cc| www.wh23.com-体彩排3丹东全图| www.311682.com-红牛彩票网址下载| www.379559.com-华夏鑫彩积分互通| www.488377.com-七乐彩3十1多少钱| www.556303.com-乐彩国际提不了现| www.622113.com-五福彩票平台靠谱吗| www.686523.com-500彩票计划在线| www.755361.com-乐米彩票苹果版| www.826271.com-体彩3亿大奖| www.895116.com-爱投彩票怎么玩| www.954982.com-快三是黑彩不是| 福利彩票www.99677r.com| www.hx70.cc-快三概率计算公式| www.111803.com-新用户送白菜的彩票| www.220232.com-北京快三到几点封盘| www.7475.vip-苏州开彩票店流程| www.99250.com-福彩时时彩下载| www.090126.com-体育彩票新游戏规则| www.169746.com-内蒙快三开奘结果| www.566923.com-旺旺彩票网址| www.665398.com-新浪体彩网-| www.773681.com-北京时时彩开奖软件| www.32031.com-go彩网官网-| www.005317.com-体彩历史开奖号码| www.083811.com-彩票指南电子版今天| www.156137.com-3d牛网彩涂迷今天| www.225460.cc-天天中彩票正规吗| www.306083.com-ios正规彩票软件| www.381325.com-中国福利彩票双色开| www.507318.com-3g购彩网-| www.582231.com-福彩3d快餐-| www.661566.cc-福彩十二生肖图片| www.730745.com-360彩票网杀号| www.796906.com-彩票中奖走奇门下载| www.861465.com-安徽省体彩兑奖中心| www.913562.com-彩客投注app| www.965383.com-快三输了10万| E彩堂www.43818b.com| www.557846.com-金山彩票提款被拒绝| www.659465.com-澳彩风情开奖记录l| www.815899.com-1分快三是不是假的| www.913666.com-快三提现延迟吗| www.984054.com-老徐说彩今日| www.jc94.com-下载中国彩票app| www.39ci.com-七星彩不好中奖| www.1124.in-竞彩5000万中奖| www.36009.cc-官方渠道买彩票| www.hp07.com-胜负彩的中奖规则| www.00ut.com-体彩超级大乐透真假| www.93zz.com-有重庆五分彩吗| www.6163.xyz-彩票宝典最新开奖| www.50283.com-新宝gg彩票| www.150207.com-中彩手彩票大全| www.220991.com-福彩快三中奖软件| www.147.cm-美丽漂亮的彩虹图片| www.9753.net-排列三和值彩宝网| www.760061.com-彩31彩票官方网址| www.877271.com-上海快三和值预测| www.960790.com-网络购彩票恢复了吗| www.fj33.com-福利彩票缩水软件| www.r48.xyz-快钱彩票官网| www.87ir.com-彩一票开奖查询结果| www.5446.vip-沈阳市福利彩票中心| www.468628.com-福彩刮刮乐官网| www.657045.com-彩票二维码可以干嘛| www.813460.com-真人真事足彩博客| www.891055.com-至尊彩可靠吗| www.962075.com-大彩网抢红包| 500彩票www.401276.com| www.93uc.com-退伍迷彩倒计时| www.00039.cc-藏宝图福彩-| www.127248.com-多肉彩铅画教程| www.246151.com-彩5彩票-| www.326963.com-北京赛车彩票官方网| www.383549.com-足彩妖刀竞彩推荐| www.3502.com-江西快三彩票下载| www.51222.cc-鑫彩国际怎么样| www.vf26.com-网络买彩票骗局| www.49hb.com-被头奖彩票骗了5万| www.0103.org-彩色代表颜色吗| www.bi02.com-利彩工具-| www.61uu.com-35彩票的网站| www.345619.com-武汉福彩三d| 大赢家彩票平台www.710650.com| www.542421.com-河北彩未图片| www.39901.com-11选五彩票预测| www.971415.com-众筹合买彩票群| www.506704.com-福彩三d试机号10| www.2856.shop-江西褔彩快三查询| www.686850.com-中彩那天的主要内容| www.318205.com-彩博app苹果下载| www.20290.com-彩票资讯网开奖记录| www.08626.com-福彩3d模拟摇奖机| www.67964.com-360时时彩-| www.051041.com-彩票平台代理找谁做| www.150010.com-快三大小稳赚买法| www.zv06.com-重庆时时彩官方投注| www.554896.com-买彩票亏了一千多| www.14920.cc-香港资料彩票正版| www.g39.cm-彩票开奖走势排3| www.1218.tv-全民彩票能买彩票吗| www.1091.net-今日福彩字谜定位三| www.102049.com-本期足彩对阵表| www.307289.com-爱彩乐是合法的吗| www.66844.cc-彩票店最高兑奖多少| www.wq65.com-彩中彩一旦拥有| www.27gr.com-七星彩头尾杀码平台|