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.8739.top-彩票软件万能大马彩| www.33387.com-肖立刚快三投注技巧| www.500072.cc-全彩本子里番大全| www.188652.com-快三屠龙什么意思| www.401343.com-七星彩走势表| www.5187.pink-天津彩票大乐透中奖| www.22038.cc-烟台市福彩兑奖中心| www.735856.com-彩乐园下载安装| www.853139.com-福利彩票数字范围| www.935038.com-彩票手机版下载| www.404043.com-彩铅金鱼的入门画法| www.237050.com-竞彩投注平台app| www.374422.com-山东彩票手机投注版| www.527372.com-时时彩怎么对压互补| www.983429.com-贵州彩票17中奖| www.137829.com-尊彩网-| www.111835.com-最好彩票平台有哪些| www.259221.com-竞彩庄家-| www.344515.com-如何代理彩票app| www.422808.com-500彩票分析软件| www.4115.vip-七星彩小规律| www.819519.com-所有彩票计划| www.3077.site-七星彩番外沈难| www.525585.com-精准时时彩计划带人| www.mw63.com-彩票88下载-| www.865444.com-彩票预-| www.839896.com-什么叫责任彩票建设| www.697863.com-全民平台彩票可靠吗| www.905373.com-91彩票倒闭了吗| www.226467.com-王者彩票平台靠谱吗| www.783009.com-福运来彩票坑玩家吗| www.867770.com-七星彩现场开奖直播| www.25wx.com-时时彩后一稳赚方法| www.44930.com-3亿福彩-| www.704228.com-彩票256官方下载| www.393973.com-福彩3d顺子号| www.614665.com-彩票预测网易| www.735104.com-米多彩票-| www.833968.com-高赔率彩票平台| www.963484.com-简单好看彩铅画星空| www.xf36.com-七彩视界官网下载| www.953159.com-用手机买彩票安全吗| www.132077.com-河南濮阳各地彩礼| www.281588.com-彩之家平台是真的吗| www.386173.com-彩票123ios-| www.145598.com-体彩p3今天开奖号| www.692302.com-彩票完整话术| www.797107.com-不能网上买彩票了吗| www.878491.com-五福彩彩票app| www.947305.com-鬼六口诀彩吧图库| 奔驰彩票www.29178d.com| 全民汇彩票www.52303z.com| www.8179.org-七乐彩13期-| www.494127.com-彩票自选-| www.974341.com-102彩票-| www.594973.com-好彩赢三张下载| www.948181.com-排列三众彩网杀码| 日彩网www.rcw8811.com| www.166832.com-福彩快三官网| www.779544.com-七星体彩开奖表| www.311662.com-福彩三d中奖号码| www.395549.com-体彩星期四开什么| www.517455.com-彩票最大中奖金额| www.682702.com-时时中彩票登录平台| www.772890.com-元角分厘毫模式彩票| www.499.cn-全国福利彩票微信群| www.41610.com-3d彩票迷图-| www.854679.com-时时彩作弊方法| www.929456.com-七星彩在哪领奖| www.982592.com-绑卡送彩金的彩票| www.bx24.com-湖北老快三走势图| www.873754.com-下载最新彩38| www.988194.com-彩票精准分析软件| www.031185.com-手机福利彩票真的吗| www.74ou.com-利奥彩票注册| www.015454.com-7星彩近300期| www.122206.com-福利彩票专家预测| www.50347.com-彩八仙手机版ios| www.495326.com-彩漂泡衣服时间太长| www.522995.com-时时彩计划在线预测| www.599247.com-彩票买什么号中奖| www.580863.com-河北快三骗局| www.362892.com-七星彩数据分析| www.947975.com-四川体育彩票金七乐| 9号彩票www.80767h.com| www.r12.top-广西福利彩开奖结果| www.468969.com-3d乐彩网摘首页| www.781041.com-江西快三的平台| 500彩票www.324377.com| www.cai890.cc-宁夏快三开奖结果| www.tv66.com-时时彩高手-| www.261941.com-彩票走势图新浪爱彩| www.725750.com-青海快三走势| www.867098.com-金钱豹彩票-| www.934611.com-福彩今天奖号| www.982015.com-贵州省体彩开奖中心| www.pt98.com-98098d彩票网| www.53ec.com-登陆信彩-| www.358661.com-下载23彩票app| www.579915.com-七星彩最新番外十| www.680668.com-宁夏体育彩票中心| www.789222.cc-彩妆系列-| www.879740.com-精准团队彩票计划| www.974315.com-五福彩分分时时彩| www.cc39.cc-黑彩庄家怎么定罪| www.114674.com-彩圣福彩3d今日字| www.583027.com-体彩排列三有规律吗| www.661241.com-彩票中奖指南最新版| www.0988.top-彩票客服干嘛的| www.073198.com-广东彩票中心官网| www.00879.com-福彩两天计划必出| www.vb84.com-3d彩吧图库丹东| www.105535.com-正规彩票助赢下载| www.807207.com-温州体育彩票店转让| www.898327.com-福利彩票扫码兑奖| www.627921.com-大发彩票是不是诈骗| www.9378.in-7k彩-| www.93eo.com-彩色胶片发明时间| www.5446.cn-宁夏竞彩快三查询| www.zq51.com-彩吧彩报四十期| www.112993.com-博友彩五分快三兼职| www.202550.com-贵州体彩网一官方网| www.284162.com-国彩8-| www.374844.com-五分⑥和彩平台| www.512997.com-运彩app-| www.665015.com-中国福彩乐透型| www.822899.com-排列三山东体彩论坛| www.912171.com-体彩不准用87| www.978920.com-微信买彩票骗局| www.77023.com-彩票开奖走势图3| www.022946.com-幸运怎么提现彩票| www.206214.com-80彩票刷流水| www.335342.com-体彩官网服务好| www.761164.com-体彩销售点-| www.006842.com-安徽体彩报-| www.51947.cc-体彩5d中奖-| www.555480.com-七乐彩三区走势图| www.267322.com-河南快三计划软件| www.717967.com-正版管家婆彩图| www.779993.com-瑞彩网开挂-| www.837053.com-足球竞彩一定牛下载| www.889550.com-双彩票双色球走势图| www.947815.com-安微省福彩发行中心| www.984018.com-福彩体彩开将结果| www.cai3488.com精彩十分开奖走势图| www.jb82.com-福彩中心主任| www.496.cx-体育彩票哪年开始的| www.131851.com-古巴彩礼-| www.245335.com-大型彩票网投平台| www.468640.com-新博瑞彩票下载安装| www.668177.com-cc彩票网址-| www.205.com-计划彩票精准平台| www.83313.com-彩票计划免费app| www.358834.com-彩票一般是几点买| www.544321.com-破解快三-| www.883276.com-有人说投彩代表什么| www.93rc.com-儿童彩色画大全| www.165952.com-彩票快3-| www.961479.com-大奖彩票平台可靠吗| www.wi21.com-七星彩小说-| www.850729.com-中国体彩几点停售| www.8923.biz-亚博科技互联网彩票| www.382939.com-彩昫香江项目| www.883413.com-湖北快三开奖记录|