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.44eb.com-七彩教育简介| www.588011.com-施乐彩色复印机碳粉| www.30jg.com-c58彩票网网址| www.062795.com-盈盈彩票网站| www.637.in-福彩字谜一横分六点| www.50321.cc-彩神通金码关注| www.073722.com-体彩专家胆码家彩网| www.326875.com-奥鸿集团彩票合法吗| www.69364.com-韩国彩票预测| www.ye35.com-玩彩票时时彩| www.72ry.com-足彩妖刀专家推荐号| www.857839.com-盈彩网充值-| www.967323.com-找个玩彩票的群| www.cai90.com-上海快三走势图| www.413709.com-时时彩一期8码计划| www.555496.com-彩神争霸8网站| www.814900.com-彩60app-| www.183736.com-175oo乐彩网| www.308985.com-南洋彩开奖查询| www.cp7769.com-苹果手机买彩票| www.qv26.com-彩票pc是什么意思| www.17qz.com-正规的合肥体彩店| www.96xd.com-彩票为什么限号| www.104327.com-彩票全能计划| www.229242.com-大发快三输了八十万| www.310279.com-今日湖北快三推荐| www.394806.com-彩虹玫瑰用纸怎么做| www.486008.com-大发500万彩票网| www.579713.com-博乐彩票平台| www.662678.com-免费彩票计划网页版| www.274477.com-分分彩稳赚不赔技巧| www.754286.com-足彩预测推荐| www.635838.com-彩虹六号围攻豪华版| www.751204.com-中福网彩票qq群| www.194163.com-河北省快三预测号| www.18021.com-彩票包赔场-| www.92087.com-顺丰彩票软件靠谱吗| www.088920.com-123彩票可不可靠| www.169077.com-河南快三投注| www.v71.top-熊猫分分彩分析软件| www.85kp.com-足彩混合过关推荐| www.6939.shop-七彩虹是什么意思| www.300038.cc-七天彩是骗局| www.379355.com-nba体彩盘口| www.505128.com-中国彩票之王| www.581335.com-七星彩加急版预测| www.659344.com-时是彩杀号专家| www.968442.com-体彩作弊事件| www.cai0707.com江苏快三一定牛| www.ka70.com-快三和值表下载| www.745888.cc-大彩网是真的吗| www.849822.com-信彩网平台怎么样| www.928767.com-排列5和七星彩奖表| www.979748.com-一品彩票网手机版| www.in6.com-内蒙福彩官网| www.27ne.com-体彩实体店厂家现货| www.27020.com-新2彩票论坛资| www.ng04.com-北京极速快三查询| www.265241.com-宁夏福利彩票中心| 500彩票www.202439.com| www.627036.com-彩票九苹果版下载| www.79wo.com-竞彩推荐众彩网| www.2358.cn-七彩虹显卡官网| www.6288.mobi-五福彩票的真假| www.06268.com-福彩了3d走势图| www.902880.com-彩知-| www.cp274.com-广西快三官方网站| www.oj01.com-今天福彩开奖查询| www.26ph.com-fu福彩试机号| www.318630.com-私彩平台排名前十图| www.213635.com-足彩分析师培训| www.334949.com-高智商玩彩票| www.466318.com-人民网自营彩票| www.554896.com-买彩票亏了一千多| www.13253.com-傅彩什么意思| www.59363.cc-中国福利彩票任五| www.292907.com-越南时时彩下载| www.551918.com-我要买彩票大乐透| www.773447.com-中彩网计划-| www.861666.com-天水快三开奖结果| www.923323.com-彩票外围是什么| www.979435.com-体彩7位数模拟| www.c2.me-9118彩票网-| www.153391.com-快三能买和值吗| www.83722.com-彩票的好处英语作文| www.114581.com-手机怎么下载体彩| www.237743.com-竞彩足球比分及亚盘| www.832903.com-彩77彩票安卓版| www.05gp.com-渐变花朵彩铅片| www.43687.com-旺彩彩票软件| www.730589.com-智慧福彩app下载| www.066837.com-彩票实体店老板吃票| www.1103.in-上海福彩快三结果| www.44ks.com-江苏快三共多少期| www.200076.cc-江苏体彩网首页| www.110609.com-九万彩票下载| www.448167.com-佳彩国际化妆品骗局| www.330786.com-带彩票的棋牌游戏| www.498178.com-e彩票平台-| www.756591.com-全民彩票客服电话| www.864752.com-147彩票平台| www.969478.com-彩票一期计划网站| www.14zx.com-开奖结果查询彩宝贝| www.387168.com-512彩票网-| 小米彩票www.101377.com| www.88098.cc-lg传统彩票-| www.372789.com-高棉福彩开奖中心| www.603671.com-梦到开彩票店| www.715188.com-826彩票正规吗| www.23gj.com-竟彩足球比分直播网| www.028594.com-彩报3d图库-| www.81kd.com-彩312-| www.942118.com-彩票兼职吧-| www.fe83.com-彩票注册送28元| www.84863.com-福彩彩乐乐-| www.hv01.com-福彩快3开奖| www.077792.com-11选5旺彩大师| www.e58.shop-北京乐和彩-| www.958479.com-七星彩开奖图片大全| www.971201.com-球探彩票ios| www.092739.com-宁陵彩礼-| www.253583.com-大发时时彩怎么玩法| www.411221.com-彩色纸箱印刷厂| www.101631.com-500彩票真的吗| www.518.la-福彩3d计算器直选| www.5842.vip-神彩福牛在哪下载| www.365754.cc-彩铅画花卉绘画教程| www.501451.com-合乐888时时彩| www.535057.com-福彩3d布衣精华| www.600079.cc-彩票科学-| www.276464.com-百盈彩票谁知道| www.350338.com-湖北体彩手机app| www.434384.com-中国移动代购彩票| www.512038.com-500万彩票计算机| www.571231.com-好彩妹心水码| www.630505.com-彩报吧库-| www.262646.com-天津快三开奖查询| www.036601.com-时彩开奖结果| www.213009.com-手机彩票平台排行榜| www.192690.com-手机app彩票停售| www.739904.com-496cc彩票官网| www.825656.com-一分赛车彩票怎么玩| www.890659.com-倍率高的彩票网址| www.952350.com-爱乐透彩票手机购彩| www.995974.com-彩投合法吗-| www.xt1.cc-湖北福彩3d-| www.fm64.com-福彩十分钟快三| www.913270.com-彩民之家app下载| www.969093.com-彩金自己怎么刷| 大赢家彩票平台www.306503.com| www.200222.com-彩票开奖大厅结果| www.850421.com-七星彩众彩网| www.580688.com-彩票世界杯专家预测| www.922854.com-彩票店怎么转让| 彩票坊www.022x.cc| www.914.mobi-买彩票的方法与技巧| www.11gb.com-七乐彩五分区走势图| www.80eo.com-3d老司机全民玩彩| www.1023.love-爱彩乐有多少用户| www.7181.com-博彩众长-| www.562799.com-正规高频彩票有哪些| www.370480.com-怎样看走势图买彩票| www.1681.org-盈利彩票软件下载| www.1543.cn-十位走走势图中彩网|