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天

知道了
百盈PK10 www.512007.com-彩铅简化-| www.hh81.cc-49c彩票登陆| www.051853.com-9万彩票app-| www.9076.top-今天七星彩开奖结| www.047275.com-淘彩app下载| www.249828.com-棒棒彩票app| www.404439.com-鸿运彩票兼职| www.554141.com-彩视制作收费吗| www.275493.com-极速时时彩开奖查询| www.494266.com-下载足球竞彩彩票| www.689925.com-赢钱彩网站-| www.871920.com-新彩网首页-| www.bu19.com-五省快三-| www.81lr.com-彩神通开奖结果| www.162470.com-江苏e球彩结果| www.335002.com-福彩汇总预测| www.557082.com-简单水彩花卉图片| www.707057.com-快三单双大小| www.892600.com-喜盈门彩票vip| www.cai8008.com网上快三怎么玩稳赚| www.391475.com-艾彩原味踩踏其它| www.0704.cm-福利彩票申请书样本| www.029127.com-彩票对压怎么玩| www.523971.com-老翁识彩专家专栏| www.1908.shop-福利彩票机器| www.9814.vip-新加坡大彩号码查询| www.75068.com-中国体彩种类| www.079948.com-欧洲彩票中奖交税| www.88321.com-龙之彩彩票开户| www.567659.com-七彩山鸡养殖成本| www.684695.com-新浪网彩票开奖信息| www.fp31.com-uu直播彩票-| www.1911.tv-福彩快三中奖牛人| 中彩网www.6611b.cc| www.97ik.com-博彩王秘旨-| www.17627.cc-体彩足彩竞猜结果| www.044458.com-足彩让球怎么算的| www.190848.com-湖北福彩快3玩法| www.351313.cc-彩神五星独胆软件| www.837693.com-重庆时时彩的套路| www.21nb.com-职业彩票人的收入| www.365337.cc-彩票限号能出吗| www.956211.com-彩票的危害性| www.40785.com-20号彩票-| 体彩网www.3890f.com| www.w50.online-彩之道福彩3d| www.088401.com-彩吧彩票是真的吗| www.952028.com-503彩票-| www.bg55.com-电竞博彩app| www.04216.com-竞彩微信-| www.093799.com-官方高频彩都有哪些| www.7173.loan-通博搏彩-| www.359594.com-七彩祥云来娶我原句| www.2288.biz-做彩票的领先团队| www.67813.com-公务员允许买彩票吗| www.174417.com-湖北精彩十分开奖| www.448113.com-七星彩什么开奖| www.097753.com-福彩转让信息| www.329959.com-时时彩坑人吗| www.632681.com-6188彩票破解器| www.900977.com-今日福彩3d老汉图| www.q04.net-3d彩票有几种玩法| www.50tq.com-免费彩票工具| www.2628.com-最近彩票大奖得主| www.025392.com-多彩网是真的吗| www.544908.com-粤淘彩票邀请码| www.000865.com-360足球竟彩比分| www.853968.com-多彩网app-| www.826064.com-今日彩票中奖号码是| www.rf94.com-168彩票合法吗| www.3315.in-彩色简笔画大全| www.58676.com-彩报网资料-| www.335900.com-湖北快三未出号码| www.671738.com-竞彩足球混合胜平负| www.998631.com-香港快三是官方的吗| www.328896.com-糖果派对送彩金图片| www.61hn.com-7意彩app下载| www.687741.com-彩02彩票apk| www.965065.com-辽宁12选5乐彩网| www.236400.cc-福彩官网手机客户端| www.482868.com-福彩3d表图-| www.620151.com-美国加州彩-| www.861910.com-彩票店装饰图片| www.374748.com-彩福珠宝怎么样| www.498869.com-购彩网app邀请码| www.574968.com-博彩投注平台出租| www.652286.com-福彩是星期几开奖| www.312365.cc-体彩快三玩法| www.563303.com-彩赢娱乐是骗局吗| www.959124.com-彩票99官方下载| www.c3.org-幸运快三网址| www.rs50.com-559彩票公司| www.11197.cc-竞彩之王足彩博客| www.93313.cc-8k彩票主页下栽| www.80zu.com-福利彩票投注站好吗| www.963791.com-彩75彩票-| www.po24.com-湖北快三遗漏号码| www.37844.com-c8万彩吧cn买马| www.027760.com-093彩票怎么样| www.142502.com-彩八彩票是真是假| www.2005.in-乐彩二进制杀二码| www.9359.biz-tt彩票真假-| www.38744.com-福彩3d绘图-| www.78230.com-体彩开奖19033| www.223988.com-中国体彩网唯一官网| www.c70.cn-百宝彩票官网下载| www.2618.cc-廿肃快三-| www.53239.cc-时时彩人工计划稳定| www.015842.com-七星彩中奖有顺序吗| www.117897.com-彩富足彩网-| www.095939.com-彩客竞猜彩票| www.356236.com-好运来分分彩软件| www.3420.xyz-66好彩分分彩| www.958722.com-快三技巧基本公式| www.159065.com-福利彩票机选摇一摇| www.261703.com-竞彩让球-| www.871891.com-江苏利彩开奖结果| www.88pk.cc-网上私彩怎么赚钱的| www.57vz.com-彩票课文分段| www.qr09.com-福彩发行宗旨| www.573622.com-彩票反水4%的平台| www.378127.com-体彩序列号-| www.960174.com-彩摘牛摘网-| www.830599.com-快乐彩网站-| www.968478.com-77彩票靠谱吗| www.99842.com-甘肃体彩排列5开奖| www.104813.com-牛人彩票-| www.738916.com-天津体彩官网| www.qe34.com-好彩爆珠口味| www.2699.pw-牛蛙彩app下载| www.9287.vip-乐彩写真机好吗| www.025239.com-既开型彩票-| www.153325.com-福彩的玩法介绍| www.271639.com-500彩票极速快3| www.370125.com-彩38全套源码| www.501709.com-怎么选数学关于彩票| www.ye05.com-传统足彩开奖结果| www.143577.com-彩运开心聊下载| www.385930.com-166彩票-| www.526059.com-辉煌彩票下载安装| www.lo15.com-安卓彩票软件| www.12ed.com-九八彩票最新网站| www.4719.net-体彩大乐透可以网购| www.210327.com-瑞彩祥云app官方| www.326246.com-七星彩专家选号汇总| www.023843.com-彩票五行属水| www.178836.com-福彩中心主任泄密| www.261500.com-易彩乐-| www.374376.com-五子彩球手机下载| www.531994.com-彩之王是什么花| www.616787.com-亚彩会登陆最新版本| www.718766.com-彩虹的句子短唯美| www.851021.com-财神时时彩综合工具| www.is79.com-体育彩票兑奖期限| www.34qy.com-彩界传奇毒胆| www.2664.com-好的手机彩票app| www.5755.cc-体彩七位数几点停售| www.u89.net-彩吧图库一版一彩| www.33775.cc-五分快三单双大小| www.95017.com-刷福彩流水单是什么| www.129213.com-安徽快三号码统计表| www.319068.com-河南福彩跑马怎么玩| www.22927.com-手机购大乐透彩票| www.995264.com-英国五分彩开奖记录|