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.971746.com-上海体彩app下载| www.130736.com-微信退款致富彩票| www.256002.com-澳客赢家彩票下载| www.400790.com-乐利2分彩计划软件| www.585857.com-ip彩票代玩-| www.623072.com-钻石彩票违法吗| www.695888.cc-新浪中国竞彩对阵| www.33431.com-风采和风彩的区别| www.427783.com-天空与彩票与我同行| www.vk37.com-快乐彩票下载安装| 幸运彩票www.73166b.com| www.097046.com-彩吧泌坛首页| www.225012.com-福彩幸运快三邦投| www.344636.com-武汉体彩店转让信息| www.445340.com-什么是彩票销售者| www.526381.com-头头博彩-| www.818121.com-胜负彩19025| 豪彩VIPwww.998632.com| www.723440.com-彩票江苏快三合法吗| www.955991.com-全部彩票开奖查询| www.un97.com-排三走势图彩宝贝| www.49yp.com-1050彩钢板板型| www.489309.com-彩工网贺老师| www.962204.com-彩友网彩票官网| www.iu76.com-足球彩票软件下载| www.029839.com-55彩票下载-| www.906912.com-极速快三综合走势图| www.715807.com-彩铅星空图-| www.822197.com-爱博彩票67768| www.919895.com-彩乐乐对大乐透杀号| www.bk47.com-鳄鱼彩票网大乐透| www.985408.com-足彩猜胜负中奖规则| www.719236.com-形容彩虹的比喻句| www.841288.com-孕妇彩妆十大排行榜| www.910825.com-幸运快三彩票是什么| www.7222.com-彩虹7号游戏| www.cp7698.com-彩票系统破解| www.72186.com-亿彩购物中心人多吗| www.38126.cc-福彩今晚多久开奖| 豪彩VIPwww.001832.com| www.9wm.com-七星彩打什么奖好| www.0633.date-时时彩代理怎么推广| www.82837.cc-汕头福彩领奖在哪里| www.28965.cc-高频彩为什么拉人| www.041047.com-手机彩票自动投注| www.131082.com-信阳各地结婚彩礼钱| www.988949.com-福彩3d黑彩网平台| 彩宝www.cb7188.com| www.51514.cc-福彩选4开奖| www.076977.com-网上快三平台真吭人| www.442325.com-双色球购彩大厅机选| www.114030.com-中国彩票网app| www.p38.net-体育彩票数字组合| www.75wy.com-台湾福星彩最新图库| www.63286.com-许昌彩礼一般多少| www.037969.com-彩61网址-| www.152152.com-看竞彩亚盘技巧| www.222229.cc-今晚彩票开奖号码| www.770830.com-养七彩山鸡都是亏本| www.879526.com-高频彩票赚钱方法| www.958829.com-19年福彩初几开售| www.385252.com-乐酷彩票靠谱吗| www.525556.com-重庆福彩大楼在哪里| www.523983.com-香港乐和彩-| www.91tl.com-长春彩票站招人吗| www.2ch.com-体育彩票输了| www.327.org-中发彩-| www.1065.vip-跟彩名堂相似软件| www.710006.com-亿彩堂是不是真的| www.9608.me-福彩农场今天| www.oa95.com-c99彩票-| www.582291.com-爱资料福彩大门户| www.2325.gg-彩票三d字谜图总汇| www.062380.com-彩乐园2app下载| www.083060.com-各省份快三时间| www.532224.com-昆明彩票机怎么申请| www.272936.com-中国福利彩票机构| www.445068.com-体育彩票列五走势图| www.29au.com-彩票官网手机客户端| www.0055.biz-香港中彩网投| www.95026.com-结婚彩礼的法律规定| www.126134.com-手机万豪彩票合法吗| www.6934.cc-境外网络私彩案| www.1698.mobi-彩票代理诈骗| www.503726.com-江苏足球竞彩网首页| www.812909.com-银川彩票兑奖点| www.58833.cc-彩票开奖三地走势图| www.852989.com-网投彩票平台大全| www.841933.com-买胜负彩赚钱方法| www.670537.com-名彩论坛专家| www.18806.cc-彩票816软件| www.371844.com-合肥市体彩转让| www.68xl.com-乐彩网官方网站| www.7135.cc-建盏兔毫养出彩| www.oj9.com-福彩3d夸度走势图| www.61526.cc-心之米商城彩票| www.307111.cc-江西福彩今天开奖| www.469.mobi-彩凤凰彩票官网| www.186671.com-博牛彩票合法吗| www.222097.com-七星彩免费9组头尾| www.445936.com-彩票体彩分析软件| www.543598.com-迅盈彩票靠谱吗| www.8123.biz-体彩那个电视台开奖| www.110009.com-王牌彩票网-| www.183827.com-快三倍投-| www.576104.com-500彩票是真的吗| www.0534.org-骰子快三-| www.848806.com-返奖率高的彩票网站| www.c55.me-下载内蒙古体彩网| www.513360.com-购彩app是真的吗| www.612371.com-我要福彩3d试机号| www.710019.com-彩票代玩账号微信| www.871482.com-福彩红五布衣图库| www.967365.com-彩票开奖历史| www.ei44.com-彩宝贝网-| www.1421.xyz-香港博彩堂六六信息| www.7031.biz-七乐彩官方-| www.37836.cc-彩票app都没了吗| www.584595.com-拼博在线彩神通| www.1152.net-体育彩票的意义| www.964191.com-彩乐乐彩票网官网| www.972457.com-乐彩网最新相关文章| www.311692.com-江西爱彩乐-| www.397573.com-彩票卖到几点| www.752798.com-赠送的彩票纠纷案| www.866981.com-七乐彩每周几| www.960768.com-送彩金彩票app| www.oe8.com-体彩11选5走势图| www.wm68.com-178彩票网下载| www.41uv.com-鸿运彩票资金安全吗| www.970314.com-这期七彩奖结果| www.090104.com-qqcp全球彩票| www.068358.com-彩神通官方网| www.cp5561.com-彩票快三有口诀吗| www.877144.com-23彩票-| www.962216.com-山东体彩排三论坛| www.75zy.com-福彩三d天罡八卦图| www.5036.com-彩票明天开什么| www.799265.com-天下赢彩王中王资料| www.mt16.com-玩时时彩输了好想死| www.762193.com-世界杯竞彩足球软件| www.848513.com-c38彩票下载| www.907986.com-21选1彩票走势图| www.965770.com-8号彩票论坛马会| www.536996.com-手机彩票有哪些种类| www.172513.com-新韩国快三开奖结果| www.237949.com-彩票福彩开奖查询| www.188327.com-彩界元宝-| www.262854.com-彩铅画荷花-| www.325591.com-福利彩票三d谜语| www.374066.com-福彩3d杀戮数| www.453178.com-中国每年彩票销售额| 梦想彩票www.33112h.com| www.272512.com-江苏快三走势图批| www.816810.com-彩票命啊-| www.904289.com-代理怎么拉人玩彩票| www.962194.com-三地乐彩网-| www.997981.com-福利彩票三粒走势图| www.ki1.com-吉林省福利彩票快3| www.5133.win-彩票兑奖热线| www.5678.mobi-时时彩搭建出租公司| www.9605.vip-内蒙古彩票中奖者| www.29939.cc-福彩数字三开奖结果| www.284384.com-体彩都有哪些彩种|