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.188694.com-快三中几个有钱| www.533750.com-福彩怎么算中奖金额| www.60004.com-红牛彩票合法吗| www.ce65.com-快三会不会赔| www.32nh.com-彩票中奖谁先知道| www.1728.vip-彩工网崔晓龙| www.9217.cc-彩票天天乐怎么样| www.171225.com-福建快三基本走势图| www.085049.com-6188彩票苹果版| www.548342.com-三分快三单双预测| www.84ug.com-当前体彩的发展瓶颈| www.wy81.com-福彩八卦图速查表| www.01303.com-中国足彩比分完整| www.9905.tv-澳洲3分彩官网| www.61850.com-彩票注册金-| www.936667.com-陕西福彩自助终端| www.860595.com-快三每天开奖时间| www.026093.com-彩票代玩人员| www.187565.com-孙老师买彩票诀窍| www.305339.com-2005七星彩开奖| www.66948.cc-福彩冯亚平-| www.40vx.com-没有七星彩买| www.879759.com-体彩实体店何去何从| www.500172.com-078彩票赢钱了| www.615898.com-吉林快三定胆| www.720540.com-七星彩星座幸运选号| www.897776.com-多彩贵州风门票| 博乐彩票www.35918x.com| www.04494.cc-福彩3d图库迷总汇| www.4558.in-c99彩票网官方网| www.6787.top-2串1竞彩足彩推荐| www.v75.com-福彩店名-| www.630560.com-玩彩乐客户端下载| www.871311.com-现在哪个网买彩票| www.286963.com-福彩扫码兑奖| www.05810.com-买彩票怎么推广| www.01qv.com-彩虹六号名字| www.772939.com-微信申请彩金| www.862746.com-19050期胜负彩| www.938458.com-福建体彩交流群| www.990424.com-彩票几位数字| www.by68.com-快彩网app下载| www.uz00.com-河南彩票网官网| www.13eq.com-河北快三有几个号码| www.123698.com-排列三乐彩网首页| www.gd51.com-彩票大奖真实经历| www.680825.com-彩票上瘾能戒掉吗| www.836775.com-福彩双色球22选5| www.966080.com-快三儿-| www.ho9.com-快三爱彩乐官网| www.k68.me-上海快三手机版| www.406.tv-旺彩预测11选5| www.002283.com-海南七星彩四码定位| www.054567.com-中国福利彩种| www.80xz.com-梦见彩票中二等| www.066959.com-手机博彩软件免费| www.272527.com-上海快三最新版本| www.91691.com-联盟抽到炫彩皮肤| www.621327.com-红旗娱乐彩票平台| www.692332.com-合买彩票下载| www.772891.com-棋牌彩金论坛| 500彩票www.534077.com| www.99zd.com-天天好彩二四六资料| www.369042.com-彩票体彩排列三| www.542960.cc-体彩排五专家推荐| www.966853.com-甘肃快三预测推荐号| 吉彩www.303853.com| www.2289.org-今天的彩民乐图文版| www.70496.com-3d彩票怎么看中奖| www.6703.com-新彩计划下载| www.63353.com-五分时时彩计划版| www.779333.com-正规的彩票软件下载| www.br67.com-五分快三计划网址| www.342211.com-彩溢会馆-| www.507219.com-在百度怎么买彩票| www.581806.com-天天乐彩票是骗局吗| www.689018.com-晓艳七乐彩推荐| www.763996.com-看彩神客专家专栏| www.bh23.com-福彩快乐彩规律| www.805599.com-福彩双色球几种玩法| www.2507.org-中福彩票手机版| www.64641.com-腾讯一分彩稳赚技巧| www.783708.com-七乐彩号码分布图| www.894352.com-520快三可靠吗| www.961625.com-哪个网站买彩票合法| www.cp1.me-贵州中一等奖彩票| www.sw45.com-六星彩开什么马| www.17er.com-竞彩猫骗子-| www.0999.cc-彩票长龙统计网| www.8200.vip-安徽快三几点开始| www.39987.com-彩90.cm彩票| www.082283.com-118彩票被黑| www.175793.com-手机购彩软件| www.777.link-微乐彩平台-| www.7573.top-彩彩虫官方免费下载| www.33108.cc-今天彩票中奖号码| www.010816.com-今天的彩票号码是| www.215209.com-深圳福利彩票彩种| www.306773.com-jxc68吉祥彩票| www.374122.com-体彩快报1月26日| www.302048.com-大乐透杀号凤彩网| www.363865.com-彩虹七色分别是什么| www.440295.com-排三跨度振幅彩宝贝| www.529387.com-直彩app-| www.587411.com-福彩3d返奖情况| www.646689.com-数字彩app-| www.365739.cc-新手彩铅画教程| www.478213.com-综艺集团福彩| www.394518.com-分分彩是全国开奖么| www.506539.com-福彩3d杀码彩宝贝| www.564068.com-福彩机器人在哪里买| www.619098.com-体育彩票在线购买| www.674498.com-淮安彩票店转让信息| www.733569.com-福州市体彩中心| www.791431.com-3d福彩图谜字迷| www.852632.com-下载多彩宝app| www.900894.com-时时彩倍投不怕连挂| www.954871.com-500竞彩足球网| www.994495.com-好彩客官网首页| www.mb02.com-彩之源彩票平台| www.218978.com-80彩票骗局揭秘| www.8294.xyz-彩票幸运六点半| www.72305.com-金牛彩票线路导航| www.67.cm-3d今天报纸彩图版| www.93cp.com-2345网购彩票| www.65696.cc-快三对子最多开几期| www.132844.com-宝马彩票平台官网| www.228553.com-河南彩礼超过两万| www.4060.cc-七星彩总部-| www.225224.com-彩票下载-| www.46576.com-吉林时时彩彩票空| www.835499.com-中彩那天课件| www.949198.com-正版电脑彩八肖图报| 500彩票www.342177.com| www.ib68.com-合肥市体彩兑奖中心| www.04gk.com-新起点彩票是骗局| www.516473.com-中发彩票是什么意思| www.812260.com-福彩3d经验-| www.913188.com-彩票账号怎么注册| www.990321.com-福利彩票多少个数字| www.ip07.com-河北省福利彩票快3| www.m51.com-买彩票需要什么手续| www.63nh.com-乐彩彩票网站| www.835977.com-顺丰丰彩是干什么的| www.5441.vip-福彩3b开奖号码| www.11736.com-大连体彩机转让信息| www.48124.com-彩票买法-| www.4707.net-有钱人买彩票| www.11032.cc-手机如何买足球彩票| www.94jv.com-博亚彩票手机版| www.lc46.com-手机彩票505| www.120266.com-久久发彩客官方网站| www.827371.com-中国彩票官方网站| www.890159.com-cba体育彩票| www.555540.com-福福建今日快三| www.616803.com-体彩排列三直选| www.925323.com-ba彩票平台-| www.cx7.com-福彩理念-| www.nl29.com-365福彩-| www.7kj.com-体彩送彩票-| www.1888.vip-多彩贵州-| www.340136.com-登录九州彩票网站| www.359234.com-福彩兑奖期限是多久| www.006854.cc-彩票任选3投注|