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.137.website彩虹屁怎么用| www.7981.top-博彩业合法吗| www.41712.com-分分中彩票官网| www.83706.com-小县城彩票站能| www.029222.com-手机彩票软件害人| www.110026.com-王牌彩票是什么| www.179691.com-福彩安徽快三下载| www.242989.com-官方彩票投注平台| www.310669.com-今天甘肃快三推存号| www.373270.com-万博彩票咋样| www.460613.com-重庆彩票发行中心| www.539707.com-苹果版彩票计划软件| www.645755.com-新星彩手机版网址| www.723285.com-常州福彩网-| www.800212.com-彩票大数据运算公式| www.869301.com-破译彩票所用公式| www.928567.com-福彩3d解密-| www.978134.com-小草彩钢围挡| www.ha6.com-彩老头予互测| www.ol98.com-世界杯彩票去哪买| www.u50.top-新万能彩吧-| www.96881.com-彩票主任的悔过| www.gq59.com-彩77下载-| www.65dr.com-评论说彩19026| www.880112.com-快三怎样才能赚钱| 500彩票www.50077c.com| www.76ua.com-福彩f开奖号码| www.8698.cn-全民爱彩票下载安装| www.111646.com-福彩帮投-| www.509234.com-七星彩19024期| 亿彩彩票www.yi654.com| 天天彩票www.209881.com| www.853026.com-快三高手投注技巧| www.71vw.com-怎样看彩票走趋势| www.5928.biz-体彩张驰个人资料| www.34422.cc-上海福利彩票站| www.99452.com-江苏体彩中奖规则| www.106850.com-博大彩票软件平台| www.218550.com-彩票推广话术| www.357022.com-云彩票店-| www.163480.com-中彩网平台兼职赚钱| www.958831.com-19年彩票开售时间| www.x31.net-蚂蚁彩票app下载| www.726400.com-广东没有网售彩票的| www.0602.vip-我要中彩票下载安装| www.582386.com-江苏福彩3d快三| www.104378.com-宝乐彩票可信吗| www.425444.com-强强彩票软件| www.592129.com-炫彩粒子怎么弄字| www.719172.com-写彩虹的诗-| www.922272.com-约彩365中了5万| www.021229.com-亚博彩票合法吗| www.330215.com-七天彩票网可信吗| www.441196.com-体彩竞彩混合过关| www.592444.com-荣耀彩票正规吗| www.551354.com-谁有q彩链接| www.19689.com-今天彩票开机号查询| www.527612.com-时时彩和值尾数杀法| www.458000.com-福利彩票2018| www.kr91.com-福彩开奖精彩十分| www.2343.vip-手机重庆时时彩软件| www.305398.com-福利彩票34期| www.j23.cn-广西中奖彩票被调| www.5804.com-云顶国际博彩下载| www.840030.com-南国彩票开奖结果| www.217631.com-五星彩开奖号码| www.527134.com-澳门皇冠彩票| www.778644.com-彩经网老板走势图| www.993944.com-河北快三出球顺序| www.wc77.com-上海快三登录| www.743917.com-中彩双色球预测擂台| www.890234.com-大盛游戏彩票网站| www.3712.wang-天天红单彩票正规吗| www.865695.com-体彩19032-| www.ju77.com-吉林福利彩票网| www.036656.com-彩票11选五平台| www.948441.com-体育彩票公益金用途| www.ul7.cc-褔彩体彩开奖结果| www.42jo.com-唯彩会彩票观察| www.661170.com-128福彩网-| 吉利彩票www.66376d.com| www.19fv.com-彩票能不能折叠| www.my49.com-7070彩票苹果版| www.079599.com-在哪里买快三| www.601438.com-新浪爱彩购彩大厅| www.386129.com-江苏体彩7位| www.291553.com-时时彩单双技巧规律| www.849640.com-腾讯分分彩无挂计划| www.039901.com-排三走势图乐彩网| www.369478.com-福建体彩彩民论| www.31129.com-包头彩票中奖| www.49pr.com-七星彩18080| www.60vb.com-福彩大盘娱乐平台| www.855556.cc-福彩奖金计算器| www.970492.com-重庆快三是什么彩票| www.69512.com-八马彩票aqq| www.460010.com-炫彩曲棍球下载| www.yj25.com-正规网络彩票平台| www.1500.me-高级彩虹屁文案| www.566987.com-建彩票平台-| www.93397.cc-山东真诀彩吧图库| www.523568.com-金口诀测彩纳数法| www.130915.com-中华购彩网app| www.00434.com-南方福彩下载| www.379078.com-快三和值有哪些技巧| www.9980.in-快三追和值计算器| www.049315.com-福彩排列五开奖结果| www.770712.com-重庆时时彩赢钱玩法| www.2067.me-旺彩3d胆码-| www.432611.com-竞彩最专业的app| 全民乐彩票www.2934c.com| www.157.red-雨后彩虹个性繁体字| www.74.cc-网络彩票提现不了| www.905235.com-伯爵彩票app下载| www.374196.com-湖北体育彩票大奖| www.3988.mobi-不给彩礼的男方父母| www.550989.com-彩票合买的好处| www.77vw.com-美国有啥彩票| www.270158.com-132彩票官方软件| www.91358.com-手机炫彩灯-| www.627780.com-3d乐彩论坛专| www.019141.com-利彩首页-| www.621840.com-福彩社区论坛| www.4511.vip-中国足彩结果查询| www.83zt.com-中国13彩-| www.175271.com-福彩快三代理| www.cx88.com-神彩网站-| www.317596.com-职业彩民亏损| www.272695.com-快三定位-| www.99198.cc-智胜彩票新网站| www.345896.com-彩友吧双色球会| www.8745.top-明发彩票安卓软件| www.069256.com-百万彩票是骗局吗| www.194645.com-福彩好运3-| www.322433.com-竞彩8串8-| www.755712.com-福彩3d幸运鑫推荐| www.84iw.com-8848彩票大厅| www.078277.com-福彩8首页-| www.kh56.com-江苏快三倍投5千倍| www.54308.com-时时彩刷漏洞真的吗| www.667981.com-福利彩票买哪个| www.789976.com-中好彩2是多少钱| www.881547.com-辉煌彩是正规彩店吗| www.0411.la-福彩中奖记录| www.26836.cc-七星彩是否有规律| www.97387.com-足球彩票害死多少人| www.do58.com-哪些省有快三| www.1101.live-上海体育彩票| www.799602.com-大乐走势图新浪爱彩| www.17781.cc-竞彩app靠谱吗| www.1033.cn-神彩网高手论坛| www.621096.com-彩之家彩票下载安装| www.720058.com-手彩-| www.209391.com-韩国快三开奖图| www.1810.pw-乐彩论坛福彩| www.68971.cc-尊彩网是做什么的| www.620111.cc-永盛彩票网安卓版| www.86463.com-台湾宝岛快三开奖| www.953214.com-福彩快-| www.069977.com-彩神l软件-| www.308157.com-福彩8软件安全吗| www.867742.com-开心七星彩网| www.951029.com-立彩助手评价| www.85mx.com-足彩什么是拉力|