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.904218.com-花式休闲快三谢俊娟| www.058351.com-彩票双色球杀号公式| www.615645.com-福彩快三提前开奖| www.7459.com-彩票77是正规的吗| www.884455.com-体彩快三怎么玩稳赚| www.46444.cc-宁夏好彩快三| www.356649.com-宁波年会彩票| www.30.hk-彩票排列三开奖| www.106657.com-一分钟快三猜单双| www.0453.love-如何开发彩票网站| www.j10.net-七星彩开奖直播网易| www.193693.com-中彩论坛-| www.885857.com-福彩3d幸运码下载| www.511575.com-盈丰彩票是真的吗| www.538621.com-大花虎彩吧-| www.pk30.com-彩票人工计划| www.7945.vip-玩彩墨-| www.216126.com-彩票的最新消息| www.485785.com-篮球彩票大小分记录| www.835176.com-手机炫彩灯-| www.72yv.com-中华彩票黑平台| www.505594.com-什么是易彩票| www.gq52.com-易彩快三走势图| www.31636.com-全球彩票最新版下载| www.198257.com-好彩网牛彩吧| www.556639.com-彩票中奖怎么兑奖的| www.811218.com-福彩开奖app| www.004949.com-今日福彩体彩开奖号| www.620248.com-时时彩手机客户端| www.1030.club-秒速时彩下载| www.122238.com-中国彩票作弊| www.373080.com-微彩吧官网首页| www.949554.com-盈彩网是正规的吗| www.rs29.com-彩票app破解方法| www.025401.com-北京快乐彩8| www.554407.com-个性体彩彩票宣传语| www.954273.com-时时彩宝典苹果老版| www.n26.bid-欧洲彩票大奖号码| www.0055.cm-哪种彩票简单开奖快| www.057101.com-福彩宣城快三| www.221467.com-彩票软件破解下载| www.539393.com-时时彩有追杀模式吗| www.884820.com-亿彩堂app下载| www.43216.com-彩经网吉林快三| www.072119.com-广东好彩一最新开奖| www.572038.com-竞彩倍投最稳的买法| www.800188.cc-有没有彩票qq群| www.684696.com-网上投资彩票| www.771462.com-吉林快三预测13号| www.18733.com-彩票33安全吗| www.729529.com-包头市彩票站点大全| www.15vx.com-体育彩票多项经营| www.584976.com-天天买足彩容易| www.717945.com-彩票平台对刷| www.855220.com-快三宜昌计算器| www.kq06.com-福利彩票字谜图迷| www.78418.com-七星彩专家杀号定胆| www.211835.com-优信大发快三app| www.739234.com-红彩网分分快三| www.528322.com-怎么破时时彩的规律| www.58zl.com-苹果炫彩动态壁纸| www.157166.com-易彩票app合法吗| www.311770.com-五福彩票是黑平台吗| www.0632.date-时时彩号码筛选软件| www.2227.me-微彩论坛排列三五| www.027797.com-玩彩票输光-| www.53058.com-福彩举报电话| www.188615.com-快三平台登录网址| www.715933.com-彩票包括哪些种类| www.949337.com-k彩娱乐手机版| www.ca87.com-湖北福彩快三开奖| www.70of.com-爱心彩app邀请码| www.597915.com-离我最近的福彩站点| www.119379.com-5分钟一期的传统彩| www.833066.com-77时时彩app| www.85zv.com-好好彩网-| www.7337.cm-彩虹六号–1ms| www.56876.cc-福彩3d唐龙说彩| www.036116.com-彩票看走势图| www.291330.com-快三有啥规律| www.488195.com-聚象彩是假的吗| www.13923.com-竞彩网是不是真的| www.206777.com-人人爱彩票下载安装| www.445500.com-竞彩篮球即时比分网| www.602738.com-体育福彩票开奖结果| 天天中彩www.792088.com| www.09hy.com-亿博彩票app下载| www.631.website777彩票网-| www.600068.com-打彩票的教学| www.760202.com-七乐彩奖金中奖分配| www.cai9982.com苏州快三开奖查询| www.511248.com-带彩虹有内涵的网名| www.672121.com-旧版全民彩票| www.5098.vip-取个好听的彩票群名| www.35342.com-静海福彩中心| www.016338.com-彩票有k线吗| www.128242.com-亿彩彩票平台登录| www.0560.cn-福彩大家乐第九季| www.57888.cc-网络彩票怎么骗人| www.130933.com-彩礼2019-| www.272700.cc-邀请玩彩票是骗局吗| www.652706.com-重庆20分彩-| www.er8.cc-快三托胆-| www.8056.vip-创意水彩展-| www.72174.com-966好彩票-| www.314039.com-体彩兑奖流程| www.551448.com-彩票cp544cc| www.858067.com-百博网投海南七星彩| www.2ae.cc-彩霸王心水论坛| www.555544.com-贵州福彩站-| www.913151.com-胜负彩彩客网| www.tz36.com-猜一种体彩名词| www.147.in-彩虹谷门票-| www.20740.com-竞彩足球进球数购买| www.130425.com-福彩2元刮刮乐下载| www.591254.com-邯郸彩礼最贵的地方| www.769392.com-好彩香烟新加坡版本| www.955622.com-彩票里面屠龙啥意思| www.95io.com-浙江彩友多-| www.011146.com-搜狐网彩票版| www.442050.com-旺彩双色球怎么购彩| www.684808.com-彩票代投知乎| www.807391.com-梦见彩票开奖号码| www.cu15.com-私彩平台都有哪些| www.4886.vip-福建体彩票官方网站| www.36651.cc-3d彩报蓝精灵晚报| www.007911.com-网易网彩票-| www.281996.com-七乐彩杀22码| www.499748.com-时时彩群主会判刑吗| www.595200.com-双彩论坛的双彩图| www.700753.com-南宁彩票诈骗案例| www.917186.com-风景彩铅画教程| OK彩票www.ok95.com| www.062245.com-欢迎光临台湾福彩| www.378077.com-美女索20万彩礼| www.571382.com-体彩数字规律推算| www.672063.com-机乐型彩票-| www.813995.com-新爱彩乐下载| www.av52.com-彩票有多少种玩法| www.zx23.com-东方亮彩怎么样| www.992.online-彩票游戏是赌博吗| www.001678.com-多彩彩票软件| www.131209.com-安阳县结婚彩礼多少| www.278080.com-五分快三彩票怎么玩| www.531558.com-中三千万的彩票反目| www.672307.com-全民彩彩票是真的吗| www.784011.com-网络彩票何时开售| www.871374.com-赢彩彩票靠谱吗| www.nn80.com-红彩会骗局-| www.15ky.com-彩礼100万的有吗| www.7523.pw-彩运宝体彩店| www.090028.com-十一彩票-| www.233741.com-上海快三遗漏| www.340567.com-诚信彩票网抢红包| www.504408.com-幸運快三-| www.594554.com-好彩客v111网| www.667549.com-彩票得主中奖秘诀| www.738323.com-彩票朋友圈软文| www.817322.com-v8彩票手机下载| www.893933.com-福彩3d中奖扣税吗| www.950632.com-乐彩网手机论坛| www.996588.com-黑龙江体彩网站| www.cp2222.com-百盈快三怎么买稳赢| www.oh21.com-皇都彩票平台|