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天

知道了
百盈PK10 www.365764.com-彩铅画的工具| www.920932.com-199期彩吧图| 99彩票www.99001r.com| www.le59.com-61彩app-| www.r45.com-江苏快三走遗漏| www.463626.com-天天好彩之奇觉四象| www.6373.biz-乐彩幸运飞艇| www.033864.com-彩票世界app| www.9868.bid-足彩销量查询| www.995076.com-惠彩彩票是真的吗| www.37jy.com-足彩猜比分单双| www.022349.com-恒彩首页登录平台| www.222268.com-福利彩票刮刮乐骗局| www.480496.com-七乐彩设几个奖级| www.667861.com-福彩事件-| www.933896.com-今日彩票彩票| www.ew87.com-香港正规彩票网站| www.642743.com-上海体彩11-| www.73wv.com-婚恋网站时时彩骗局| www.911191.com-北京福彩公益活动| www.307185.com-韩国彩票吧-| www.369640.com-七彩乐单式开奖查询| www.744413.com-1216购彩-| www.107811.com-福彩端下载-| www.418758.com-易旺彩票可以提现嘛| www.643177.com-乐彩33兼职-| www.870596.com-博友彩江苏快三| www.995973.com-中免绿好彩判别真假| www.te77.com-时时彩组三大全| www.19si.com-足彩19043推荐| www.336225.com-香港开彩规律| www.tp82.com-欧冠足彩怎么买| www.3595.xyz-无意间中彩票的故事| www.777925.com-牛彩图迷-| www.913365.com-大乐透彩神通软件| www.984368.com-广州鸣彩公司口碑| www.t90.org-时时彩报-| www.84so.com-青蛭彩票开奖现场| www.3802.cn-全民赢球彩票| www.883588.com-彩票上家是什么意思| www.3134.pw-查排三排五彩票| www.9696.bid-彩宝网下载-| www.578030.com-彩票微信代购违法吗| www.674564.com-英国都有什么彩票| www.242368.com-快三的玩法技巧| www.365855.com-陆慧明竞彩精选| www.504630.com-彩之王靠谱吗| www.86707.com-台湾快三是官方| www.036350.com-九彩凤凰与弓的传变| www.69fg.com-皇冠国际彩票登陆| www.1423.com-彩虹伞玩法小班| www.79073.com-235彩票软件下载| www.199673.com-福建快三走势图和值| www.021759.com-恒博快三下载安装| www.wl32.cc-豪彩下载安装| www.eg04.com-百姓彩票是不是假的| www.12ay.com-七彩虹颜色排序| www.67ti.com-分分彩开奖有规律嘛| www.53gx.com-彩票一等奖号码| www.835483.com-好彩3中奖查询| www.et19.com-大发快三中奖助手| www.38zy.cc-猜冠军彩票pk10| www.01uy.com-乐彩网3d首页| www.402887.com-乐购a彩票-| www.604787.com-下载盛元彩票| www.093883.com-中国彩票造假| www.654115.com-江苏快三三不同| www.021823.com-买了彩票怎么查真假| www.167612.com-最大的快三投注平台| 500彩票www.38y.com| www.109556.com-晶彩派-| www.965648.com-亿彩彩票钱提现不了| www.ka50.com-福彩快3计划网| www.6199.cm-掌上彩票ios| www.60753.com-星宇购彩是合法的吗| www.833979.com-加税美产无嘴好彩| www.926535.com-五福彩票网5f12| www.998274.com-广州福彩网公示| www.en26.com-福彩3d预测分析飞| www.tu21.com-最全的彩票导航| www.07vv.com-彩铅画动漫-| www.72vn.cc-懂球帝的懂彩帝| www.0517.la-福彩消消乐怎么玩| www.418016.com-盛大彩票正规吗| www.262281.com-快三遗漏一定牛| www.365211.cc-三亿彩票网站| www.454100.com-彩易一福彩3d| www.537827.com-色彩与颜色有区别吗| www.s37.cn-今晚七彩码开奖| www.574404.com-关于703彩票| www.855441.com-深圳快乐彩技巧| www.959114.com-体育彩票站-| www.cp6922.com-河南快三一牛| www.693095.com-福彩三的开奖结果| www.853435.com-名游彩票-| www.952953.com-新粤彩广东版| 万彩网www.wcp8008.com| www.ri39.com-福利快频彩-| www.50uo.com-福彩双色球超级助手| www.941124.com-北京单场彩票推荐| www.356160.com-中国体彩属于企业| www.624627.com-今天的福彩天地| www.756267.com-幸运分分彩计划| www.860955.com-河内五分彩官方开奖| www.981610.com-彩票悲剧-| www.sa1.com-体彩上海11选5| www.d28.org-七星彩梦册解码大全| www.037.org-福利彩票3d2元网| www.678435.com-中国足彩比分完整| www.615488.com-华彩软件站-| www.44pn.com-红树林彩票平台注册| www.010592.com-实时彩玩法介绍| www.61170.com-广西福令快三| 网易彩票www.064wy.com| www.kk34.com-中国竞彩足球| www.8085.com-新彩票玩法-| www.42707.com-体彩福彩彩经下载| www.166324.com-快三开奖结果上海| www.288757.com-熊猫竞彩官网| www.487874.com-亿腾彩票网-| www.238041.com-福利彩票下载安装| www.385817.com-九度彩票下载| www.545334.com-一分钟易彩全天计划| www.769622.com-好运彩票赚钱| www.719328.com-新彩吧彩票下载| www.817009.com-中华彩票报-| www.883022.com-kk彩票骗局-| www.953460.com-好彩三复式四中四| 彩票坊www.583877.com| www.23626.cc-彩神作弊器免费| www.9442.loan-福彩三d牛彩网| www.38321.cc-台湾五分彩网页计划| www.82772.com-19040胜负彩| www.095083.com-北京福彩网购| www.027.vip-老徐说彩论坛公众号| www.123652.com-燕赵福彩网网页版| www.265963.com-福彩代理怎么弄| www.355431.com-彩友会网站是多少| www.268304.com-彩涂铁板-| www.900.win-彩票中奖风水| www.5845.vip-彩票奖票-| www.10895.com-19045胜负彩| www.53830.com-东方亮彩招聘| www.86575.com-郑州市福彩中心地址| www.20538.com-签到领彩金的彩票| www.596511.com-甘肃省快三下载| www.4238.in-七彩云mz网-| www.20662.com-竞彩篮球混合投注| www.1988.live-福彩3d杀二码组合| www.0202.pro-江苏扬中彩票大奖| www.372639.com-上海快三2同号复选| www.518013.com-1分彩开奖号码| www.589609.com-七星彩多少种组合| www.688444.cc-广东体彩店申请| www.785868.com-今日体彩排列三图谜| www.869060.com-中信彩票下载安装| www.957624.com-七星彩机选号码5注| www.999552.com-福彩3d大小走势表| www.ew85.com-中国彩票官网| www.wk05.com-河北快三推荐的| www.06hi.com-体彩奖金包括本金吗| www.980907.com-本地七彩冰淇淋| www.237374.com-华夏彩票安全吗| www.967869.com-刚力彩芽-|