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.ky54.com-上海福彩快三遗漏| www.082337.com-官方手机购彩客户端| www.9968.net-七彩号码开奖号码| www.69896.cc-彩票中奖如何兑奖| www.629066.com-新会员布衣彩吧图库| www.467720.com-九号彩票安装| www.051305.com-彩票大数据分析系统| www.976266.com-彩礼官司需要的证据| www.hb37.com-大发快三破解器助手| www.962604.com-京东彩票网址| 彩票5www.550436.com| www.kr87.com-湖北快三遗漏值统计| www.763334.com-福彩六十一-| www.996786.com-无锡福彩网-| www.jv66.com-彩神大发网址| www.920016.com-大奖快三在哪里查| www.993719.com-竞彩单关查询| www.io87.com-竞彩足球投注| www.298057.com-人人红彩票登录不上| www.107339.com-500彩票开挂软件| www.137555.com-中国体彩报电子报| www.250411.com-中彩彩票可靠吗| www.797508.com-1998彩票-| www.922826.com-香港管家彩图| www.997835.com-七星彩酷浪最新彩版| www.576735.com-如何与网友交流彩票| www.504233.com-奔驰彩票网投客户端| www.73978.com-中国体彩幸运之门| www.81op.com-宜春体育彩票| www.2683.vip-6288彩票官方| www.81284.com-福彩昨晚出什么号码| www.032660.com-七星彩机选一注| www.129727.com-南国特区彩票| www.233497.com-彩票天天乐平台| www.674922.com-澳洲彩票大奖| www.772548.com-中华娱乐彩票app| www.893565.com-乐彩网官方下载| www.968748.com-微信代购彩票| www.510210.com-福利彩票站利润| www.590176.com-唯彩看球竞彩| www.664701.com-油性彩铅画入门教程| www.751773.com-中国福彩彩票开奖| www.813987.com-华亿彩票-| www.149956.com-期期中彩票合法吗| www.53249.com-时时彩前三组六杀号| www.018039.com-七乐彩走势图综合版| www.093308.com-彩色混凝土路面图片| www.166901.com-江苏快三玩法| www.251195.com-彩8-| www.324747.com-排三遗漏统计双彩网| www.395341.com-博一吧免费彩金| www.495529.com-彩漂液伤衣服吗| www.565457.com-时时彩代打-| www.5236.cm-返水派彩怎么算的| www.06975.com-手机上买福利彩票| www.46977.com-好彩2复式表| www.89455.com-新启旺彩票网址| www.114117.com-香港快三有哪些| www.838458.com-手机买快三能赢吗| www.954423.com-众博彩票的网址| www.587978.com-乐优炫彩官方| www.739870.com-华彩双色球-| www.874820.com-7k官方彩票下载| www.972174.com-体育彩票官方软件| www.ez54.com-正规手机彩票平台| www.1on.com-五行预测彩票秘法| www.521.tm-分分彩输了-| www.8659.org-体彩排列三开奖信息| www.026099.com-淘宝在哪买彩票| www.137204.com-彩针冰淇淋-| www.316432.com-网络彩票快三骗局| www.442787.com-篮彩足彩-| www.576240.com-网上买体彩靠谱吗| www.751784.com-中彩网讨论-| www.909096.com-大发快三稳赢的口诀| JJ彩票www.11310.cc| www.mb46.com-足球彩票外围| www.411899.cc-手机怎么查彩票开奖| www.560022.com-三d双彩论坛专区| www.668785.com-老熊说彩专家| www.786725.com-福彩跟单-| www.932361.com-淘宝商城三彩| www.cai011.com-江苏快三开奖结果| www.b87.com-时时彩前三走势| www.26055.com-体育彩票足球五串一| www.087988.com-网络私彩被判刑| www.354402.com-福利彩票中奖亿| www.862322.com-彩票88倍-| www.8wt.com-博众彩票全系列| www.5075.cn-足彩平台均被禁| www.105422.com-时时彩小助手软件| www.355066.com-彩赢家彩票分析师| www.721310.com-体彩单场胜负开奖| www.960449.com-好彩票注册送38元| www.w77.top-如何看懂是足彩让球| www.4767.me-鸳鸯彩票-| www.024583.com-福利彩票自助机加盟| www.243583.com-体彩网球探即时比分| www.614587.com-三彩正品羽绒服| www.924773.com-澳大利亚高频彩票| www.l18.top-彩神通官网-| www.48582.com-彩票批发多少钱一张| www.144860.com-360福彩-| www.365035.com-彩神今日3d预测| www.756492.com-彩票中奖票号| www.cp5590.com-北京快三开奖结| www.15253.com-温州体彩阳光征召| www.506206.com-8亿彩靠谱吗| www.869201.com-体彩18147-| www.kq4.com-安徽快三那一段| www.53xn.com-福利彩票双色球谜语| www.066535.com-900彩票违法吗| www.916035.com-怎样开福彩投注站| www.ii03.com-福彩中国龙888| www.4900.in-彩票688网-| www.97262.com-爱彩竞猜-| www.653759.com-澳门彩票可以买吗| www.bq61.com-彩71是什么-| www.9371.online王素英控制彩票| www.538983.com-教玩时时彩必赢钱| www.785048.com-七星彩号码预测推荐| www.cp097.com-江西快三跨度走势图| www.91gf.cc-万福彩票是黑网吗| www.034476.com-怎么找租用彩票平台| www.968448.com-彩神网网址是什么| www.ua48.com-彩票龙是什么| www.0289.live-买高频彩高手| www.513316.com-大星彩票下载| www.55173.cc-台湾时时彩(国办)| www.8982.site-中国竟彩网首页官网| www.187508.com-时时彩首页-| www.98vx.com-广西快三计划网站| www.8965.wang-中金计划彩票| www.100854.com-手机福利彩票怎么买| www.72747.com-竞彩足球让胜让平| www.694793.com-举报运盛彩票| www.nq85.com-甘肃省体彩助手| www.13706.com-重庆实时彩开奖| www.618986.com-打彩票什么到底意思| www.tr15.com-香港供彩社区| www.017210.com-彩票店一般几点关门| www.769785.com-好彩店官网-| www.123619.com-运彩网-| www.378272.com-幸运彩乐园网址| www.658199.com-金祥彩票登录| www.14as.com-宣城体彩中心主任| www.2494.cc-特区开心七星彩论坛| www.333214.com-彩友网官网-| www.689007.com-手机上购买福利彩票| www.82ij.com-怎么买彩票怎样选号| www.114130.com-福彩3d组选跨度表| www.289216.com-彩川ひなのiv| www.711326.com-山东经广播天天福彩| www.101530.com-19031体彩开奖| www.372644.com-求一外围竞彩网| www.205282.com-天天彩选四开奖号| www.075130.com-梦想彩票手机版下载| www.062301.com-福彩三百期走势图| www.957019.com-派彩洗面奶-| www.23386.com-时时彩人工五星计划| www.nd29.com-安徽快三中奖助手| www.53528.cc-grt彩票-| www.34dc.com-福彩3d开奖号查询| www.374062.com-大星大星彩票走势图|