QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery bootstrap顶部的响应式网页导航菜单代码

原创商用 jQuery bootstrap顶部的响应式网页导航菜单代码

jQuery基于bootstrap.css制作黑色网站顶部固定的响应式导航菜单,鼠标悬停显示下拉二级菜单。跟随屏幕浏览器大小自适应变化。适用于各大企业网站类型响应式导航布局样式代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="skin/css/font-awesome.css" media="screen" />
<link rel="stylesheet" type="text/css" href="skin/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="skin/css/dh.css" media="screen" />

2、head引入js文件

<script type="text/javascript" src="skin/js/jquery.min.js"></script>

3、body引入HTML代码

<div id="container">

	<header class="clearfix" id="header-sec">

		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

			<div class="top-line">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-sm-9 topbar-left">
							<ul class="info-list">
								<li class="tb-adword"> <i class="fa fa-anchor"></i> <span>厂家直销,玩具批发,加盟招商第一品牌</span> </li>
								<li class="tb-phone"> <i class="fa fa-phone"></i> 服务热线: <span>400-001-0000</span> </li>
								<li class="tb-email"> <i class="fa fa-envelope-o"></i> 电子邮箱: <span>admin@qq.com</span> </li>
							</ul>
						</div>
						<div class="col-md-4 col-sm-3 topbar-right">
							<ul class="social-icons">
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-weibo"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-tencent-weibo"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-qq"></i></a>
								</li>
								<li>
									<a href="javascript:;" target="_blank"><i class="fa fa-shopping-cart"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="container">
				<div class="navbar-header">
					<a class="navbar-toggle collapsed mmenu-btn" href="#mmenu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
					<a class="navbar-brand" href="javascript:;"> <img src="skin/images/logo.png" alt="" class="logo" /> <img src="skin/images/logo-m.png" alt="" class="logo-m" /> </a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right" id="navigation">
						<li class="Lev1">
							<a href="#" class='menu1 active'>网站首页 </a>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">关于我们
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">公司简介</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">品牌起源</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">公司相册</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">产品系列
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">二通道/上下型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">三通道/转弯型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">四通道/动作型</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">X-SERIES系列</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">定制案例
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">新闻资讯
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">产品原理
							</a>

						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">招商加盟
								<i class="fa fa-caret-down"></i></a>
							<ul class="drop-down sub-menu2">

								<li class="Lev2">
									<a href="#" class="menu2">加盟细则</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">加盟流程</a>
								</li>

								<li class="Lev2">
									<a href="#" class="menu2">回报优势</a>
								</li>

							</ul>
						</li>
						<li class="Lev1">
							<a href="#" class="menu1 ">联系我们
							</a>

						</li>
						<li class="search nav-search">
							<a href="javascript:;" class="open-search"><i class="fa fa-search"></i></a>
							<form class="form-search" id="searchform" name="formsearch" action="javascript:;">
								<input type="hidden" name="kwtype" value="0" />
								<input type="search" value="" name="q" class="search-input" placeholder="输入关键字" />
								<button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
							</form>
						</li>
					</ul>
				</div>
			</div>

		</nav>

	</header>

</div>

<div style="height:2000px;"></div>
<!--可以删除-->

<script type="text/javascript" src="skin/js/script.js"></script>

<nav id="mmenu" class="noDis">
	<div class="mmDiv">
		<div class="MMhead">
			<a href="javascript:" class="closemenu noblock">X</a>
			<a href="javascript:;" target="_blank" class="noblock"><i class="fa fa-weibo"></i></a>
			<a href="javascript:;" target="_blank" class="noblock"><i class="fa fa-tencent-weibo"></i></a>
			<!--<a href="javascript:;" target="_blank" class="noblock">English</a>-->
		</div>
		<div class="mm-search">
			<form class="mm-search-form" name="formsearch" action="javascript:;">
				<input type="hidden" name="kwtype" value="0" />
				<input type="text" autocomplete="off" value="" name="q" class="side-mm-keyword" placeholder="输入关键字..." />
			</form>
		</div>
		<ul>
			<li class="m-Lev1 m-nav_0">
				<a href="#">网站首页</a>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">关于我们</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">公司简介</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">品牌起源</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">公司相册</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">产品系列</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">二通道/上下型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">三通道/转弯型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">四通道/动作型</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">X-SERIES系列</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">定制案例</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">新闻资讯</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">产品原理</a>

			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="javascript:;" class="m-menu1">招商加盟</a>
				<ul class="m-submenu">

					<li class="Lev2">
						<a href="#" class="m-menu2">加盟细则</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">加盟流程</a>
					</li>

					<li class="Lev2">
						<a href="#" class="m-menu2">回报优势</a>
					</li>

				</ul>
			</li>
			<li class="m-Lev1 m-nav_4">
				<a href="#" class="m-menu1">联系我们</a>

			</li>
		</ul>
	</div>
</nav>

<link type="text/css" rel="stylesheet" href="skin/css/jquery.mmenu.all.css" />

<script type="text/javascript" src="skin/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		var mmenu = $('nav#mmenu').mmenu({
			slidingSubmenus: true,
			classes: 'mm-white', //mm-fullscreen mm-light
			extensions: ["theme-white"],
			offCanvas: {
				position: "right", //left, top, right, bottom
				zposition: "front" //back, front,next
				//modal		: true
			},
			searchfield: false,
			counters: false,
			//navbars		: {
			//content : [ "prev", "title", "next" ]
			//},
			navbar: {
				title: "网站导航"
			},
			header: {
				add: true,
				update: true,
				title: "网站导航"
			}
		});
		$(".closemenu").click(function() {
			var mmenuAPI = $("#mmenu").data("mmenu");
			mmenuAPI.close();
		});
	});
</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
购彩堂 www.1380.vip-奔驰彩票我的账户| www.176029.com-苏州福彩快三开奖| 大赢家彩票网www.178952.com| www.03227.com-全民福彩骗局28| www.407859.com-体育七星彩的开奖| www.328012.com-彩吧2电脑版本| www.412988.com-赛马排位表及派彩| www.89358.cc-会员登录–顶级彩票| www.072931.com-彩票833-| www.189492.com-大发快三走势图连线| www.278629.com-五福彩票苹果版下载| www.377773.cc-福彩投注站几点开门| www.517661.com-福彩双色球六个红球| www.289245.com-贵州快三三不同全选| www.7ko.com-送彩金赛车平台| www.1576.top-彩宝彩票吧-| www.16839.cc-福彩双色球谜语总汇| www.85054.com-福利彩票站对联| www.101192.com-一分快三开奖软件| www.156703.com-体育彩票大乐透兑奖| www.268650.com-彩经网3d试机号| www.375038.com-福利彩票160| www.743803.com-9万彩票平台助手| www.850938.com-时时彩规则时间| www.718392.com-聚财彩票源码| www.801953.com-彩票用什么数学| www.919756.com-环彩网-| 天玺彩票www.296380.com| www.510886.com-彩虹谷好玩吗| www.159965.com-易彩堂彩票主页| www.356160.com-中国体彩属于企业| www.984642.com-彩八彩票是正规的吗| www.610097.com-为什么有人买彩票| www.221671.com-足球彩票四大欧赔| www.965980.com-大发快三网投彩票| www.ba75.com-河北体彩快3走势图| www.d68.top-779彩票代理| www.049.me-新加坡大彩怎么玩| www.637578.com-5分钟快三计划表| www.051667.com-福彩3d三天计划| www.172835.com-吉林快三开奖号码| www.462815.com-福彩3d预测天吉网| www.601426.com-美的彩票是真是假| www.005347.com-彩票砍龙概率| www.564311.com-彩福快三是官方的吗| www.2898.pw-竞彩论坛官网| www.304122.com-江苏快三走-| www.501383.com-周易彩票预测法| www.910040.com-高频彩联盟开奖结果| www.je16.com-网易竞彩是不是骗局| www.52vp.com-彩票o2o平台网址| www.3085.biz-全国彩票弃奖榜| www.r38.top-开彩妆加盟店| www.3679.xyz-彩票开奖彩票| www.387262.com-手机全面钢化膜有彩| www.651700.com-联运彩票幸运28| www.723263.com-旭辉研彩软件购买| www.8083.loan-百度快彩-| www.197878.com-中国彩票开奖走势图| www.cai5666.com河南快三视频直播| www.oe24.com-彩票送彩金38元p| www.461625.com-彩票是怎么做代理的| www.452665.com-彩吧图一继第五版| www.704618.com-中彩网彩票官方网| www.93wb.com-北京基诺彩开奖结果| www.687.net-时时彩最新开奖软件| www.39968.com-体育彩票投注站地址| www.033954.com-陆金彩票预测| www.587681.com-彩票开奖七乐彩查询| www.627046.com-二十选五福彩| www.788155.com-360胜负彩-| www.910853.com-彩票排列五开奖直播| www.cp9648.com-中彩网计划可靠吗| www.yh70.com-淘宝还可以买彩票吗| www.187210.com-时时彩趋势图app| www.253474.com-福建省福彩快3| www.325901.com-排列3彩经网走势图| www.ac71.com-体彩在线-| www.596292.com-网络彩票被骗报警| www.51495.com-双色球中彩网首页| www.453855.com-体彩双色球玩法介绍| www.580348.com-彩票站几点关门| www.19193.com-福彩3d天牛图库| www.035318.com-彩票电视软件| www.736899.com-众购彩票网官方网| www.820722.com-彩钢瓦搭建视频| www.886972.com-男网友叫我买彩票| www.954932.com-相亲彩票诈骗套路| 云博彩票www.09991.cc| www.wo47.com-快彩快3助手| www.16dh.com-中国体彩票中奖结果| www.79yq.com-福彩3d一点通图| www.fx8.com-福彩快3网-| www.400519.com-快彩彩票网-| www.771112.com-盛大乐彩app| www.891033.com-至尊彩首页-| www.on0.com-福利彩票快三| www.099414.com-利彩票3d开奖公告| www.393809.com-高哲色彩头像| www.484826.com-国彩技术-| www.597487.com-吉祥彩票网是真的吗| www.771153.com-657彩票com-| 酷彩网www.89939.cc| www.wx76.com-旧版彩经网走势| www.0098.live-彩票店红火的名字| www.qm10.com-一分快彩走势| www.98hj.com-炫彩陀螺下载| www.07246.com-福彩双色球专业版| www.397936.com-怀孕七星彩号码| www.055322.com-彩票双色球成语| www.827.online-彩票直播怎么吸引人| www.015753.com-三亚七星彩投注网站| www.489185.com-22元彩票网-| www.887635.com-11选5购彩教材| www.316308.com-竞彩店申请-| www.050935.com-彩79官网下载| www.282732.com-老师指导买彩票骗局| www.1904.net-多彩贵州风值得看吗| www.7007.cn-体彩猜球规则| www.4945.cm-迷彩兔网站-| www.138780.com-下载鸿彩-| www.074735.com-彩富网免资料大全香| www.893396.cc-爱彩乐开奖走势图| www.285678.com-网上北京快三怎么玩| www.65678.cc-江苏快三选号图| www.254532.com-好彩投体育彩票| www.538848.com-时时福彩官方网站| www.050229.com-黑彩骗局-| www.yj6.com-大发时时彩规律| www.c02.me-七星彩万能码分布图| www.333777.cc-体彩大乐透怎样选号| www.796454.com-彩票驿站快3| www.901816.com-貴州福彩下载| www.bl75.com-彩神软件-| www.nm13.com-足彩胜负平专家分析| www.36wh.com-万人彩彩票-| www.95219.com-国货彩妆品牌| www.099.live-聚彩论坛万人社区| www.7417.vip-沈阳竞彩店-| www.41586.com-福利彩票破解| www.4454.vip-必发彩票软件app| www.388744.com-福彩3d组六码遗漏| www.799967.com-33cc彩票网站| www.cai8080.com吉林快三值和走势图| www.407945.com-众信彩票网-| www.512852.com-吉林快三黑彩赔率| www.571635.com-彩票软件违法| www.622459.com-双色球福彩开奖| www.687010.com-网址特彩吧与你同行| www.80362.com-易迅彩票可以买吗| www.123706.com-彩票老师骗局| www.476143.com-福彩3d今晚推荐号| www.34854.com-今天3d彩报图库| www.319639.com-彩之网彩票交流社区| www.389538.com-六助彩票手机论坛| www.500083.cc-345彩-| www.607832.com-重庆市体彩网| www.785342.com-金巴黎彩票合法| www.83356.com-彩票统计分析方法| www.6508.cn-想开个彩票平台| www.00961.com-彩吧论坛牛材网图库| www.395320.com-全天彩是什么| www.639480.com-体彩门店装修效果图| www.711288.com-彩票平台提现被锁|