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.15dm.com-江苏快三出奖结果| www.63ag.com-基诺型彩票是什么| www.954198.com-7k官方彩票566| www.mv14.com-正规的彩票预测软件| www.01wo.com-网络购买世界杯彩票| www.177053.com-河南快三投注技巧| www.766975.com-2017竞彩普及日| www.891166.cc-红彩会555-| www.977720.com-开彩票店利润| www.go34.com-江西彩礼-| www.1or.com-时时彩前二万能七码| www.144278.com-搜索新浪竞彩足彩| www.274203.com-三分快三的规律| www.086005.com-麒麟彩票是诈骗吗| www.971853.com-福彩3d丹东全图库| www.bc07.com-多乐彩票是真的吗| www.05cn.com-人人中彩栗-| www.947276.com-哪个软件可以买彩票| 500彩票www.50064b.com| www.fh93.com-快三可以买大小单双| www.3975.cm-大富彩平台-| www.27623.com-美国数学家彩票大王| www.92462.com-188彩票官网| www.365459.cc-落日风景彩铅画教程| www.522117.com-高频彩最新规定| www.662666.com-手机彩票计划免费版| www.6903.org-七彩西游完整版| www.42bw.com-福彩开奖怎么算中奖| www.051367.com-大发快三星光| www.uz38.com-内蒙福彩官方| www.05329.com-红彩彩票app下载| www.770455.com-快三杀大赔小| www.894767.com-想中奖彩经网走势图| 中国福利彩票www.34788s.com| www.pw51.com-三分彩是正规的吗| www.345798.com-福彩布衣图库| www.906596.com-幸运彩票幸运相伴| www.xm15.com-北京快三规律推算| www.699675.com-彩民村彩民村| www.133688.cc-福彩3d真大报图库| www.021450.com-彩名堂最新版| www.176946.com-河南彩礼-| www.291313.com-幸运快三一分钟| www.375342.com-福彩视频开奖直播| www.510745.com-彩虹屁怎么用| www.952606.com-彩k-| www.dg49.com-福利彩票有哪些彩种| www.zs88.cc-篮球彩票规则穿法| www.660303.com-人工智能足彩| www.1290.me-彩宝彩票网页版| www.951288.com-京彩彩票官网邀请号| www.cai8333.com极速快三规律| www.271907.com-862彩票-| www.361956.com-彩吧论坛官方下载| www.454557.com-聚鑫乐彩彩票| www.563901.com-2020彩网吧-| www.627155.com-ios买彩票app| www.701783.com-彩票注册送18元吧| www.ax96.com-七乐彩专家-| www.st16.com-福彩双色球图标| www.761599.com-甘肃快三计算方法| www.6968.gg-重庆市彩983网站| www.035552.com-彩票在线试玩| www.873341.com-中l国体育彩票| www.961548.com-八卦推算彩票| www.fi84.com-优德送38彩金| www.ze12.com-春秋彩票下载| www.023.cc-彩票网推荐幸运之门| www.245471.com-足彩竞猜新浪| www.322723.com-好123彩走势图| www.0500.site-中国购彩网是真的吗| www.7634.vip-彩票原理是什么意思| www.398353.com-每周几七星彩开奖| www.49cv.com-大家赢彩票网正规吗| www.1237.pw-彩神争霸8网站| www.7080.cn-银燕七彩艺校| www.772298.cc-正彩化妆品怎么样| www.853667.com-足彩310官网下载| www.907581.com-合肥小庙街彩票站| www.964031.com-描写彩虹的诗句| 大赢家彩票网www.83033r.com| www.137264.com-凤凰彩票下载| www.246155.com-上海福利彩票中奖| www.824782.com-22选五河南福彩| www.63xo.com-彩票无损刷水| www.266097.com-河北体彩网开奖结果| www.358499.com-凤凰彩登录首页| www.453444.com-彩色混凝土效果图| www.538935.com-官方时时彩奖金多少| www.692151.com-永久彩票平台| www.780017.com-福彩3d研究者| www.844858.com-体彩公益宣传| www.907090.com-哪个彩票是8位数| www.968454.com-福彩中心作弊事件| 好彩网www.hcw823.com| www.595904.com-福彩单一跨度走势图| www.969687.com-乐彩3d17500| www.ac72.com-北京五分彩官方开奖| www.rj10.com-北京快中彩中奖| www.vz29.com-快三手机游戏| www.362.in-必胜彩票-| www.27tq.com-分分彩九码稳赢技巧| www.8475.cc-亿彩网合法吗| www.2829.biz-七星彩今晚几点开奖| www.34766.com-软件玩快三是犯法| www.665456.com-七乐彩定胆机选| www.361561.com-香港六给彩开奖结果| www.533182.com-老彩民村高手论坛| www.086816.com-什么的光溢彩| www.782797.com-福利彩票30选7| www.120792.com-河南快三一走势图| www.922901.com-天天爱彩票官方版| 梦想彩票www.33112p.com| www.1cc.cc-香港彩宝典手机版| www.69ni.com-聚彩论坛手机网站| www.455984.com-爱彩人彩票网好不好| www.630814.com-大玩家彩票京东店| www.706698.com-玩私彩一直赢钱| www.793591.com-v8彩票可靠吗| www.868892.com-体彩7星彩预测号码| www.974240.com-江西多乐彩组选走超| www.ul8.com-彩票开奖七乐彩| www.605377.com-尚合娱乐平台彩票| www.32yo.com-随时赚彩票平台| www.0011.ren-七星体彩几点开奖| www.544208.com-男生教我玩彩票| www.849681.com-分分彩对应公式| www.715826.com-买彩票上瘾啥表现| www.800878.com-彩票三d藏宝图全图| www.873060.com-彩票时时彩在哪里买| www.940102.com-彩神争霸11-| www.985149.com-福利彩吧8-| www.gr75.com-好彩烟代购-| www.5wk.com-分分彩助手-| www.57bd.com-北京五分彩官网网址| www.sn55.cc-竞彩比分直搐| www.595221.com-好彩赢天下报纸| www.726562.com-安全可靠的买彩票| www.799972.com-彩票开奖查询及公告| www.874402.com-福彩精彩十分查询| www.938757.com-亿彩下载安装| www.984039.com-老猫3d彩报-| www.cp3665.com-大发快三合法吗| www.jj75.com-五亿彩app下载| www.497149.com-福彩手机投注后拿票| www.074874.com-开福彩店-| www.165477.com-彩票倍率高的网址| www.892500.com-福彩杀号软件| www.970913.com-迷彩兔是哪里的网站| www.cai1699.com快三大小单双app| www.315725.com-彩虹网络电视直播| www.5108.cc-买体育彩票几点截止| www.vn60.com-江苏快三的技巧| www.397.vip-辽宁省体彩中心主任| www.355576.com-刘军时时彩秘籍| www.464232.com-彩票缩水工具怎么用| www.859833.com-彩票封号是什么意思| www.938725.com-亿彩票app-| www.yf42.com-好彩彩票-| www.923068.com-彩票好运占卜下载| www.610293.com-做梦买彩票数字中奖| www.709137.com-体彩大乐透领奖时间| www.72557.cc-19023期体彩| www.899642.com-xy313幸运彩|