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.235069.com-九州彩票安卓版| www.076534.com-凤凰彩票维护| www.71xb.com-彩票2元二走势图| www.1792.win-福彩实时开奖结果| www.9666.biz-福建体彩彩宝网| www.53973.com-现在哪有彩票好平台| www.388080.com-华彩益彰是什么意思| www.83369.cc-有没有彩票高手| www.237446.com-彩票816app-| www.119608.com-即开彩下载安装| www.211199.com-福利彩票快三的玩法| www.297313.com-江苏快三贴吧| www.370573.com-澳客彩票下载ios| www.524323.com-福彩快乐12规则| www.984018.com-福彩体彩开将结果| www.44093.com-全民中彩官网| www.042420.com-多彩贵州网领导分工| www.391673.com-易迅彩票是什么| www.535587.com-体彩7位数中奖号码| www.612425.com-万彩彩票三d| www.696128.com-体彩竞彩奖金计算器| www.769160.com-天天好彩头-| www.875273.com-河南福利彩票微官网| www.977495.com-彩妆店赚钱吗| www.og67.com-广西快三开奘结果| www.8aw.com-关于彩票经典传奇| 天际彩票www.tj92.com| www.121451.com-588彩票网官方| www.cx04.com-彩经网河北快三| www.1675.vip-超高彩票平台| www.702602.com-有三位数彩票么| www.794368.com-黑客植入重庆时时彩| www.875416.com-河南福彩幸运彩走势| www.946737.com-体彩天下平台正规吗| 8号彩票www.81520k.com| www.ou52.com-福彩3b-| www.20bt.com-彩从哪个网站买| www.815383.com-彩票票什么样子| www.911534.com-湖北快三末出号统计| www.999100.com-汇彩网官网-| www.pn57.com-湖北快三开奖走势| www.60wh.com-在线购买彩票软件| www.s85.org-梦见中彩票500万| www.885988.cc-彩虹屁是什么意思| www.987126.com-海南三亚快三查询| www.cx99.com-彩票平台搭建一条龙| www.wt52.com-快三安徽形态走势图| www.54cu.com-天天足彩app下载| www.44ef.com-重听今天天天福彩| www.1995.online足彩二串一倍投| www.9432.net-华人娱乐彩票方网站| www.974686.com-排列三振幅2元彩票| www.g54.pw-排三试机号彩宝| www.210722.com-福利彩8平台| www.34ue.com-体彩可以网上购买吗| www.00178.cc-彩钢板围挡的价格| www.059876.com-湖北快三选号图| www.665811.com-手机玩彩票下载安装| www.9618.xyz-爱彩足球比分| www.465166.com-古建彩绘横梁图案| www.20699.cc-合买彩票被骗| www.012533.com-七星彩2281-| www.132702.com-腾讯彩票走势图| www.293683.com-彩票南京-| www.529539.com-彩票套利团队| www.652871.com-贵州快三和尾振幅| www.zr34.com-福利彩票怎么看的| www.42cz.com-七彩球开什么号码| www.67566.com-足彩19042分析| www.995582.com-北单好还是竞彩好| www.7819.top-时是彩5星投注技巧| www.390041.com-新加坡乐彩开奖记录| www.502737.com-多彩投有收益了吗| www.351789.com-卖体彩怎么提成| www.31026.com-彩票中奖ps-| www.86714.com-好彩频道直播回放| www.603663.com-梦见买彩票周公解梦| www.878864.com-九江体彩中心电话| www.986573.com-699彩票苹果版| www.dr24.com-彩票去哪买-| www.g88.biz-七星彩预测专家默彩| www.57tn.com-花呗彩票-| www.079040.com-大玩家彩票快3| www.577536.com-招彩票代理加盟| www.693187.com-彩票中奖短信恶搞| www.837369.com-广西竞彩返点率| www.949989.com-百宝彩青海快三| www.ph92.com-彩票思路-| www.70505.cc-彩票打印机多少钱| www.159689.com-体彩期3d开奖号码| www.235550.com-中国福彩3d字迷| www.22869.com-快三走势挂-| www.500076.cc-狂三同人全彩本子| www.jw70.com-彩库下载宝典| www.025195.com-智慧彩软件下载| www.838363.com-快三辅助器软件| www.5794.org-pk拾赢彩王专业版| www.zc37.cc-大发快三的运算公式| www.0342.loan-手机购买彩票摇一摇| www.06116.com-竞彩店经营-| www.690957.com-彩22彩票-| www.824182.com-三彩大衣-| www.941325.com-体育彩票七位数唯一| www.vg7.cc-体彩开奖号直播现场| www.969140.com-体彩公益金分类| www.1917.com-时时彩任选玩法技巧| www.806602.com-老猫出彩快讯app| www.253738.com-博众时时彩官方网站| www.25993.cc-彩虹有哪7种颜色| www.650296.com-彩虹伞美篇-| www.715500.com-彩票微助手怎么样| www.788806.cc-足彩投注量分析| www.855003.com-雪园网足彩比分直播| www.910305.com-福彩3d直播-| www.961825.com-彩吧3d开机号| E彩堂www.9818r.cc| www.757322.com-体彩8串8什么意思| www.fd52.com-特区彩论坛-| www.b94.com-体彩天下-| www.262248.com-福彩客户端官网下载| www.340150.com-彩票里的长龙是啥| www.406931.com-彩吧三毛3d图库| www.504658.com-博大彩票网址| www.567156.com-江苏快三盈利计划表| www.459429.com-彩票背后的猫腻| www.568831.com-体彩11选5大彩鲸| www.828548.com-2m彩票永久免| www.933185.com-蓝月亮天天开彩| www.cp6376.com-足彩计算胜负平| www.828511.com-9b彩票平台-| www.913185.com-彩客网五分快三| www.988385.com-甘肃快三开奖规则| www.jp63.com-所有彩票网站大全| www.w66.xyz-香港福彩门户新书签| www.237054.com-中国竞彩网计算器| www.nh12.com-彩17app-| www.mf46.com-凤凰网投时时彩网址| www.0im.cc-彩票app合法吗| www.067658.com-越穷越买彩票| www.671479.com-彩宝网的三地开机号| www.82774.com-足球彩票19040| www.72qt.com-炫彩油画真的回收吗| www.168986.com-上海快三开奖查询| www.ip39.com-共享彩票快三返点| www.010882.com-昨晚彩票开奖结果| www.077106.com-买哪种彩票靠谱| www.450865.com-3k彩票下载安装| www.33417.com-盛宏彩票首页| www.063058.com-彩票店加盟条件| www.055234.com-北京彩票票面| www.129363.com-今日体彩双双字谜| www.376523.com-福彩幸运彩玩法| www.19vq.com-彩仙阁挂机说明| www.428587.com-彩票的利弊百度文库| www.552494.com-彩票机器故障| www.523.red-怎么看时时彩走势| www.8533.pw-360彩票安安卓卓| www.45364.com-有人买彩票中奖过吗| www.99179.cc-腾讯分分彩是正规吗| www.607083.com-福彩利润是多少| www.698832.com-体彩开奖七星彩| www.789570.com-竞彩001-| www.zp67.com-浙江福彩快乐12| www.312717.com-彩票开奖北京快三|