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天

知道了
58福彩 www.0347.cn-附近有中国福利彩票| www.780318.com-福彩站点如何申请| www.813043.com-高频彩开奖结果赚钱| www.896991.com-中福彩票网骗局揭秘| www.jr11.com-湖北11选五爱彩乐| www.2959.cc-体彩标准店-| www.072213.com-秒速时时彩财神| www.637992.com-色彩斑斓女神款微信| www.05xv.com-彩铅宇宙星空简笔画| www.88279.cc-发红包的彩票| www.163004.com-河北省燕赵福彩网| www.602966.com-彩虹六号解禁| www.085891.com-快三二同号复选必中| www.392782.com-彩票网站推广哪家好| www.434382.com-最优的移动彩票软件| www.k08.com-贵州体育彩票网站| www.863810.com-七星彩彩版互换专区| www.744000.com-众彩网娱乐平台| www.400466.com-辽宁福彩35开奖号| www.035098.com-南方双彩网开机号| www.fs22.com-北京极速快三助手| www.188673.com-彩票斩龙什么意思| www.842895.com-2018彩礼排行榜| www.369655.com-七彩乐中奖结果查询| www.539141.com-彩票打负盈利| www.gx56.cc-百盈快三是真是假| www.986841.com-七乐彩预测号| www.zv75.com-c8万彩吧-| www.8189.loan-幻彩胆码排序软件| www.779523.com-大同邮箱彩票平台| www.179660.com-河北快三开奖一定牛| www.285250.com-深圳福彩中心在哪里| www.pf83.com-一分快三官方开奖| www.3201.com-彩8娱乐app-| www.465.cn-体彩预测app| www.800234.com-山东省福彩中心位置| www.903632.com-3d福彩试机号今天| www.397957.com-七星彩精品局奖表| www.685065.com-中国福彩3b彩涂| www.393934.com-采摘牛彩-| www.888378.com-七星彩今晚开奖号码| www.77mz.com-开奖足彩奖金查询| www.9660.biz-三d手机彩宝网网| www.062275.com-澳客彩票app| www.490828.com-宏达彩票购买中心| www.31834.com-易彩堂靠谱吗| www.32882.cc-全民彩票是真是假| www.931095.com-彩八仙人工计划官网| www.679411.com-乐彩网论谈手机版| www.790006.com-计算器竞彩网| www.77cn.com-高频彩票记录| www.933188.com-可以反选的彩票工具| www.228127.com-立彩app-| www.079931.com-海南七星彩解梦| www.4107.cm-太子报彩吧图库| www.301759.com-下载个福利彩票助手| www.216342.com-五分快三计划平台| www.98110.com-竞彩首页计算| www.205666.com-98vip彩票网| www.75741.com-中了彩票-| www.88664.com-彩九怎么下载不到| www.457531.com-全国彩票2元网首页| www.37zb.com-体彩在哪个台开奖| www.985243.com-福利彩是不是真的| www.057653.com-福彩3d资料大全| www.842786.com-天天快三开奖结果| www.268813.com-哈尔滨逸彩快三| www.856702.com-好彩客电脑版下载| www.7048.biz-买彩票有什么窍门| www.169311.com-快三安徽开奖结果| www.238133.com-内蒙快三跨度和值图| www.117659.com-2019竞彩普及日| www.182873.com-北京快三走势有| www.368007.com-入门水彩画图片简单| www.046477.com-彩票生日号码生成器| www.673505.com-彩票开奖结果今天奖| www.82664.com-19025期胜负彩| www.141322.com-大乐透论坛彩吧论坛| www.393227.com-今日彩票天将结果| www.929001.com-中彩网广西福利彩票| www.98204.com-腾讯5分彩开奖网址| www.218176.com-福彩快三项目| www.489908.com-牛蛙开奖彩票网| www.999126.cc-ic汇彩网app| www.5li.cc-时时彩倍投如何止损| www.3266.me-江苏福彩3d快三| www.004439.com-三彩丽雪官方网站| www.36005.cc-彩票iphone-| www.056186.com-长春体彩客服| www.578508.com-兰州福彩兑奖地址| www.9017.com-头彩是正规彩票网吗| www.856453.com-苏州体彩店转让| www.00685.com-中国体育彩票申请书| www.881014.com-大发快三人工计划群| www.464095.com-体彩平台是不是骗局| www.39271.cc-3d双彩论坛字谜| www.821620.com-民政部彩票作假| www.89235.com-567彩票网可靠吗| www.750622.com-兴盈快三老品牌| www.43ph.com-足彩培训-| www.931110.com-彩八仙时时彩手机版| www.2983.net-福彩3d购买计算| www.455729.com-彩票中奖新闻和故事| 中彩网www.71233p.com| www.07yu.com-刚力彩芽体重| www.775.biz-陕西有快三吗| www.341500.cc-3d彩玩法中奖介绍| www.333758.com-有人知道爱彩彩票吗| www.550933.com-一分钟时彩合法吗| www.992586.com-福彩3d新玩法| www.8803.shop-海口网七星彩论坛| www.555540.com-福福建今日快三| www.32az.com-竞彩篮球返奖率奇低| www.989111.com-新浪彩票3d论坛| www.q16.com-中国彩票合买网站| www.135666.com-足彩胜平负计算器| www.535063.com-打生肖是什么彩票| www.778001.com-汇彩网网站-| www.cp1158.com-快三软件-| www.79pq.com-拼博在线彩票网| www.753550.com-f彩网注册-| www.28og.com-世界杯彩票算法| www.500637.com-91彩虹哥官网| www.251664.com-手机中彩网可靠吗| www.365969.com-海底世界彩铅画图片| www.919646.com-重庆时时彩的算法| www.254811.com-分分时时彩是真的吗| www.671071.com-排三杀码凤彩网| www.169690.com-内蒙古快三预测号码| www.751207.com-11选五彩票网| www.2321.biz-w彩票线路检测| www.961594.com-各种釉彩大瓷瓶| www.29962.cc-亿彩app下载安装| www.000316.com-温州体育彩票网点| www.220680.com-彩神8是哪里的| www.38tb.com-彩铅画用什么纸| www.797720.com-彩票这期买什么号| www.625735.com-高兴彩票是否违法| www.950722.com-足彩预测网站| www.94xx.com-买彩票靠不靠谱| www.7168.tv-搏有彩下载-| www.f99.vip-福彩三d综合走势图| www.887673.com-阿里彩票是真的吗| www.256212.com-福彩手机自助购彩| www.395131.com-彩虹岛梦境攻略| www.579981.com-七星彩by明月珰| www.737220.com-众彩网雨鱼专家汇总| 福彩www.15355n.com| www.87172.com-体彩2元网走势图| www.162783.com-福彩杀码定胆| www.384756.com-搜索福彩3d开奖号| www.610700.com-0165彩票-| www.731713.com-彩钢板围挡多少钱| 京彩集团www.369888a.com| www.166622.com-大发快三平台| www.081907.com-最新双色球维彩视频| www.226251.com-福建福利彩票开奖| www.337072.com-彩868网-| www.479480.com-中国新彩吧网开机号| www.619545.cc-彩票过滤分析| www.727965.com-亿彩票老板是谁| www.839516.com-北京3d彩票走势图| www.922639.com-人人红彩店app| www.998809.com-香港快三彩票吗|