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.129708.com-复式彩票中奖计算器| www.01934.com-问题彩民怎么办| www.400203.com-福利彩票手下载| www.175692.com-一分快三助手| www.998879.com-美国快开彩票| www.67886.cc-彩票平台怎么举报| www.107398.com-500彩票辅助投| www.04269.com-国内合法彩票| www.122719.com-彩神网2-| www.015829.com-七星彩怎么买| www.35317.com-彩神争霸500官方| www.kp71.com-新浪彩票官网首页| www.997425.com-彩八彩票苹果版下载| www.270128.com-132彩票手机版| www.576954.com-彩票中奖宁波| www.804979.com-手机竞彩app| www.914971.com-凤彩网安全么| 亿彩彩票www.588yc.com| www.778105.com-福彩游戏规则| www.886502.com-官方购彩网站| www.999536.com-福彩开奖排列七结果| www.hw33.com-浙江体育彩票大乐透| www.04cr.com-油性玫瑰彩铅画教程| www.5178.in-中国福利彩票七彩乐| www.77655.com-彩票顾客显示屏| www.di28.com-vr3分彩开奖结果| www.171069.com-今天福彩出奖结果| www.022934.com-体彩各种玩法介绍| www.fx21.com-彩票群取名-| www.890539.com-福建坤彩邓玉红| www.983133.com-彩之家下载苹果版| www.cm39.com-福利彩票快三的玩法| www.70362.com-七天彩彩票-| www.103038.com-时时彩平台计划| www.210851.com-快三开奖预提前漏洞| www.388344.com-华彩银行-| 手机购彩www.sjgc9.com| www.7320.vip-彩虹电量-| www.012612.com-七星彩大师定头尾| www.68711.cc-中国福彩图库| www.098859.com-电脑彩正版藏宝图| www.257208.com-彩票兼职代玩| www.356590.com-年会彩票-| www.515244.com-七星彩南国彩票社区| www.22pb.com-彩票站可以追号吗| www.888.red-彩99苹果版-| www.046898.com-657彩票网官网| www.636381.com-彩虹挂在天上像什么| www.533550.com-买什么彩票简单一点| www.89095.com-澳门博彩足球比分| www.985623.com-竞彩单场推荐周六| www.lm61.com-中彩网官方网址| www.750452.com-豪彩投计划-| www.iv94.com-竞彩投注平台app| www.rq88.cc-网上七星彩去哪买| www.83zr.com-c48彩票网登录| www.137692.com-体彩大乐透直播| www.34221.com-上海福彩免费下载| www.871722.com-万乐彩智能投注软件| www.062438.com-排列5彩票开奖结果| www.011698.com-昨天3d出什么彩票| www.616131.com-彩票输了好多钱想死| www.328583.com-吉利快三开奖结果| www.71em.com-广东福彩3d开奖| www.828276.com-大乐透复式彩票机选| www.bd97.com-一分快三押大小技巧| www.n11.cm-彩票的创始人| www.535395.com-上海买彩票一夜暴富| www.740053.com-澳门彩票网-| www.921968.com-高频彩前三组绝技| www.aa00.cc-福彩61开奖结果| www.403055.com-038彩票最新彩娱| www.575769.com-v8彩票平台可靠吗| www.756229.com-甘肃福彩.快三| www.919541.com-彩票app可以租吗| www.ak68.com-福彩3d试机号查询| www.9429.com-福彩3d应用公式| www.003.bid-乐彩网大乐透净版| www.355975.com-彩gg腾讯分分彩| www.24152.com-快三平台怎么做| www.88202.cc-投诉app彩票网站| www.i28.org-258彩票app-| www.312564.com-快发彩票靠谱吗| www.683000.com-电话购彩票-| www.756623.com-全民中彩恢复了没| www.811403.com-阳光开奖中国福彩网| www.871932.com-安卓版彩票缩水| www.979743.com-玩赚彩票软件可信吗| www.cp926.com-今天快三结果图湖北| www.811792.com-p3试机号码彩宝| www.879605.com-体育彩票开奖直播| www.945176.com-体彩论坛三句话| www.985819.com-福彩3天中图库杀码| www.cp896.cc-必中快三计划破解版| www.119675.com-山东福利彩票app| www.980807.com-附近有福利彩票店吗| www.82jx.com-九江市体彩中心地址| www.1771.top-彩票打流水什么意思| www.8352.cn-福彩幸运二-| www.617966.com-人人彩票怎么打不开| www.404515.com-福建省体育彩票36| www.285976.com-亚洲彩票安全吗| www.364358.com-体彩世界杯购买| www.302833.com-49·cc彩票-| www.631708.com-玩时时彩有没有赢的| www.732357.com-河南焦作市结婚彩礼| www.837461.com-竞彩单关开奖结果| 网易彩票www.36788b.com| www.ip54.com-烟台福彩中心官网| www.366570.com-彩铅叠色变深技巧| www.p33.top-网上怎样买体育彩票| www.am59.cc-七乐彩走势图表| www.806780.com-体彩彩票开什么| www.933185.com-蓝月亮天天开彩| www.aq97.cc-贵州体育彩兑奖址| www.it04.com-网易彩票头条首页| www.9be.com-强力球彩票历史| www.187706.com-时时彩五星大底思路| www.108708.com-七星彩是否中奖查询| www.540052.com-古风彩铅手绘| www.634004.com-七彩嘟嘟珠心算| www.730290.com-呼市福彩彩票中心| www.796234.com-盈彩国际-| www.636543.com-中国彩虹5无人机| www.823687.com-36o彩票首页| www.806784.com-废彩票纸有什么用| www.2068.vip-彩神走势回血技巧| www.cp3806.com-极速快三计划网| www.646989.com-福彩任选5-| www.827273.com-体彩p3预测分析| www.904096.com-鸿运彩票平台怎么样| www.964115.com-七星彩在线模拟选号| www.op1.com-江苏快三精准预测| www.sk68.com-凤凰平台时时彩奖金| www.12lw.com-新浪爱彩足球胜负彩| www.94yo.com-打击快三私彩| www.2267.cc-福彩中心领导| www.847191.com-福彩pc28-| www.0560.pw-福彩大家乐官网| www.67.cm-3d今天报纸彩图版| www.007644.com-湖北体彩电话号码| www.075064.com-下彩网_网上安全| www.132562.com-18071期足彩| www.199463.com-彩票开奖预测今天| www.259094.cc-中国足球彩票玩法| www.332841.com-陕西十分彩-| www.000248.com-云南时时彩开奖码| www.80480.com-银行买彩票大案| www.205523.cc-快三360-| www.328555.com-福彩天吉预测分析区| www.393305.com-体彩中四个红球| www.662429.com-七星彩每天几点停售| www.17657.com-505彩票兼职| www.5800.org-足彩6场过3关| www.e76.org-彩78彩票-| www.21995.com-558赢彩手机版| www.64433.cc-皇冠足彩跟单软件| www.386744.com-老时时彩360开| www.508375.com-彩票行家玄机幽默| www.569939.com-七彩捞腌菜下载网址| www.631885.com-七彩欢乐世界门票| www.976566.com-结婚彩礼价目表| www.ez47.com-彩票更多开奖| www.123790.com-优乐彩敢玩吗|