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天

知道了
9彩注册 www.778244.com-竞彩早上几点兑奖| www.029815.com-利彩是合法的吗| www.699736.com-彩客网是骗人的吗| www.811605.com-九鼎彩票官方网站| www.890032.com-cba博彩分析| www.961262.com-博友彩五分快三兼职| 网易彩票www.562601.com| www.xj04.cc-好彩三中奖规则| www.121585.com-手机彩票输了3万| www.211081.com-彩票网站源码| www.555362.com-彩票计划软件网| www.362931.com-羽泉彩虹吉他谱| www.2954.org-山东体彩开奖详情| www.372912.com-顺利彩票-| www.483989.com-彩票如何快速刷流水| www.563288.com-uu快三直播注册| www.635666.com-皇冠彩票网提不出款| www.753279.com-中彩吧五分彩可信吗| www.876751.com-彩票泳坛夺金怎么玩| www.977818.com-25彩票是什么意思| www.cp8639.com-河南快三爱彩乐| www.2100.in-广东福利彩票公告| www.79qh.com-中国彩票软件开发| www.822888.cc-七星彩app哪个好| www.22gj.com-怎么入侵彩票网站| www.51226.cc-福彩网快3是真的吗| www.050234.com-网上打黑彩怎么处罚| www.65123.com-竞彩独家-| www.54332.com-天际彩票下载| www.9822.cm-彩票开奖查询三d| www.299615.com-彩8官网-| www.052016.com-中国福彩官网下载| www.874257.com-彩票平台租用| www.385734.com-周日体彩兑奖吗| www.489822.com-时时彩怎么当代理| www.568823.com-体彩大彩鲸-| www.81rv.com-聚彩彩票靠谱吗| www.720411.com-七星彩开有没有规律| www.94299.cc-浙江省体彩中心主任| www.144088.com-北京时时彩停售时间| www.990707.com-竞彩足球如何能赢钱| www.134922.com-9万彩票软件安卓| www.556373.com-彩票106黑吗| 大玩家彩票www.84499h.com| www.314240.com-13d彩报-| www.20tq.com-体彩样票有什么用| www.511154.com-彩虹天堂是什么意思| www.lv57.com-拉萨快三开奖| www.976987.com-河北快三软件| www.731645.com-湖北快三和值跨度| www.772.live-画彩虹背面图片大全| www.cai0299.com彩票选号助手| www.021920.com-45彩票最新版| www.32486.com-彩妆店的加盟| www.739993.com-玩牛彩犯法吗| www.821011.com-时时彩在线计划数据| www.bq65.com-彩票50倍平台| www.ty39.com-微彩时时彩计划软件| www.996040.com-数字三彩票选号绝招| www.ed77.com-福建福彩双色球开奖| www.238759.com-七天彩票官网网址| www.678.net-时时彩68计划网| www.995226.com-足彩冷热指数怎么算| www.ii42.com-福彩3d怎么玩| www.27699.cc-体育彩票门头标准| www.801028.com-2123彩彩票网| www.578983.com-qq30秒彩票-| www.705339.com-中福利彩票领奖程序| www.gd6.cc-河南福彩22迭5走| www.99371.com-特彩吧旧版原版正料| www.132002.com-河南南阳彩礼是多少| www.225160.com-三d彩票结果| www.714883.com-重庆分分彩个位计划| 网易彩票www.26163o.com| www.137419.com-五分彩是不是骗局| www.663374.com-248彩票数字彩购| www.809405.com-955彩票ios-| www.935488.com-彩神机器-| www.9700.biz-cb88彩宝-| www.16712.cc-广西福彩彩官网| www.971840.com-泰安体彩中一等奖| www.3701.biz-七星彩正规的吗| www.635134.com-一线彩宝品牌| www.170752.com-河南快三一码遗漏| www.550642.com-沈丘彩票最近中奖| www.984640.com-彩8提现不了| www.57ii.com-360彩票购彩| www.1677.xyz-福彩走势图乐彩| www.905113.com-加盟福彩自助售彩机| www.973134.com-彩虹玫瑰花图片| www.cai8255.com体彩体彩开奖结果| www.oa62.com-百盈快三规则| www.07ux.com-双色球走势图星彩网| www.79if.com-彩排的彩是什么意思| www.657540.com-福彩3d中奖奖号| www.887633.com-爱名彩-| www.143624.com-彩票幸运选号中大奖| www.942118.com-彩票兼职吧-| 大赢家彩票网www.54400y.com| www.sj15.com-福彩五分快三| www.084.space-彩票大本赢软件平台| www.080703.com-中信彩票平台下载| www.152987.com-彩票输了怎么办| www.87158.cc-今天开啥彩票| www.z33.top-彩票站前景-| www.382038.com-稍后更多精彩内容| www.505408.com-上海雅彩-| www.567084.com-哆啦a梦彩膜| www.635563.com-中国彩票税-| www.et37.com-国家正规彩票网站| www.653289.com-8炫彩-| www.768826.com-倍数最高的彩票网| www.827679.com-澳门三分彩是合法吗| www.900632.com-3d彩界小少爷毒胆| www.960480.com-唐山中3亿彩票的人| www.cai1488.com福彩快3是赌博吗| www.cp0133.com-彩票平台网-| www.0ov.com-7乐彩尾数走势图| www.21294.com-卖体育彩票的软件| www.581274.com-体彩任九开奖结果| www.386793.com-彩票投注网站| www.507656.com-福彩65期开奖| www.587375.com-鸿彩投注怎么样| www.zg10.com-彩票双色球幸运选号| www.475605.com-盛世彩票是骗局吗| www.877328.com-海南私彩做庄| www.053158.com-网赌彩票可以追杀吗| www.793028.com-河南安阳福彩5亿| www.914200.com-凤凰彩票交流群群号| www.680046.com-两元彩票最多中多少| www.272556.com-河北福彩快3遗漏表| www.94442.cc-pc彩票app下载| www.411552.com-黄鹤楼彩色包装纸箱| www.61144.cc-红旗彩票投注站| www.029922.com-内蒙福利彩票站利润| www.914895.com-迷彩兔电影-| www.647898.com-霍金的彩票公式| www.755508.com-福彩三d独胆家彩网| www.1036.vip-我爱彩乐-| www.7854.pw-网易十四场足彩预测| www.76914.com-手机新浪彩票网下载| www.602035.com-辽宁福彩35选7| www.713083.com-中国体育彩票怎么看| www.797227.com-吉祥彩票-| www.869327.com-手机怎么买七星彩| www.937107.com-福运彩票可信吗| www.977541.com-冠军彩票下载| www.cp8918.com-江苏快三彩票网站| www.03dn.com-甘肃快三开奖加奖| www.188372.com-安徽快三遗漏最大值| www.th54.com-乐点大发快三官网| www.78fj.com-怎么买足彩才能赚钱| www.950215.com-105彩票网页版| www.3788.mobi-飞鱼彩票海口有几家| www.bn12.com-彩票平台拉人骗局| www.485581.com-怎么买6盒彩| www.10sy.com-福利彩票意义| www.798947.com-竞彩数据分析| www.913081.com-中华彩票官方网站| www.974608.com-众彩市场一日价格| 中原彩票www.455745.com| www.253893.com-足彩免费推荐app| www.650761.com-手机博彩输了十六万| www.51kp.cc-彩多多网址-|