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天

知道了
彩票123现在叫什么名字 www.077227.com-彩色复印机多少钱| www.ro77.com-那大哪里有七星彩票| www.672332.com-福彩三d之家首页| www.773907.com-时时彩盘子怎么做| www.859936.com-五体彩5d走势| www.937697.com-云彩厅-| 购彩在线www.66332l.com| www.9535.online四位数字是什么彩票| www.385582.com-彩票平台负盈利代理| www.600989.com-体彩可以买多期吗| www.684511.com-五分快三人工计划网| www.853608.com-天津新宇彩板怎么样| www.467668.com-开福利彩票店利润| www.620113.com-在国外中了彩票| www.747407.com-红8彩票-| www.829108.com-别人梦见自己中彩票| www.909856.com-五分快3是什么彩票| www.971649.com-融彩网下载-| www.122272.com-福彩流水单是真的吗| www.lw96.com-福建省福彩快3| www.342589.com-西安天彩粮可靠吗| www.520648.com-凤凰彩票2320| www.666508.com-万达彩票是真的假的| www.82tf.com-福彩3绝密算法| www.645102.com-皇室彩票下载| www.434577.com-体彩金孔雀中奖率| www.552577.com-彩票分析师培训| www.657370.com-中彩网3d论坛!| www.646477.com-竞彩欧赔技巧| www.932008.com-最新双色球维彩视频| www.74vk.com-世界各国基诺彩票| www.4476.vip-彩虹岛高手视频| www.681379.com-彩票应不应该买| www.623035.com-红牛彩票网站| www.695138.com-310足球竞彩推荐| www.771384.com-澳门五分彩官方首页| www.861932.com-体育彩票店的图片| www.250059.com-冀彩宝网上能买了吗| www.865125.com-下彩彩票电脑版| www.117721.com-博通彩票网站| www.422300.cc-中国移动彩铃官网| www.587355.com-昨晚彩票开奖结果是| www.1986.pro-智慧彩票ios| www.585679.com-安徽快三走势图新浪| www.121454.com-qq群彩票是真的吗| www.833839.com-福利彩票在线直播| www.j30.me-七乐彩预测专家杀号| www.64602.com-重庆时时彩怎么玩| www.955442.com-彩票改单数据库| 福彩www.16878f.com| www.045896.com-下载彩83平台| www.9403.cc-港彩神算高手坛| www.tz11.com-彩票名言-| www.54pd.com-彩票一般买几个数字| www.941897.com-腾讯分分彩开奖查询| www.393232.com-长春开彩票站| www.562831.com-福彩刮奖图案| www.652056.com-福彩开奖时间3d| www.9901.loan-竞彩新规定50倍| www.65tr.com-沈阳市福彩中心地址| www.224778.com-发彩网下载-| www.308023.com-万能大发快三辅助器| www.378040.com-蒙自体彩竞彩转让| www.530054.com-彩神争覇app| www.809175.com-彩客网网页版| www.269537.com-彩名堂4.0版本| www.506519.com-彩天地app下载| www.618366.com-陕西体彩11选五| www.691925.com-双色球彩乐乐幸运| www.769288.com-足彩258下载| www.833005.com-彩票3d开机号| www.893106.com-彩万宝软件-| www.956707.com-方便查彩票的app| 网易彩票www.074wy.com| www.309350.com-手机买彩票十一选五| www.03408.com-赛车在线彩票真的吗| www.907028.com-国家福利彩票快乐8| www.980596.com-牛彩彩票怎么登录| www.kc38.com-香港168彩票网站| www.78839.com-百度快乐彩走势图| www.062433.com-快三玩法表格图片| www.151082.com-彩票开奖公告结果| www.232906.com-好彩堂网站-| www.318554.com-大乐透幸运之彩| www.414807.com-时彩怎么看走势| www.1913.com-福彩三d杀号定胆| www.03958.com-彩网时时彩-| www.59336.cc-彩铅星空的画法图解| www.024651.com-福彩积分兑换礼品| www.628528.com-全部彩票软件| www.710895.com-刷彩员兼职是真的吗| www.799335.com-福彩一体机-| www.888753.com-体彩金7乐玩法规则| www.970994.com-福彩开奖号今天的| www.cm23.com-山东彩票十一选五| www.169652.com-一分快三计划| www.262685.com-吉林省福彩电话号码| www.352295.com-青蛙彩票怎么下载| www.48081.com-彩之家怎么注册| www.77786.com-网络非凡彩票骗局| www.23767.com-彩票店几点停止出票| www.394246.com-星期五开奖彩种| www.511773.com-彩客网公司-| www.570661.com-七彩云浏览器app| www.637431.com-爱彩乐3d-| www.706954.com-彩客彩票客户端| www.781504.com-马来西亚福利合乐彩| www.857065.com-彩运通炸金花| www.914984.com-排列五星彩开奖结果| www.972816.com-七彩铃兰-| 大赢家彩票www.399049.com| www.853398.com-诚信彩票-| www.907749.com-智能选彩票-| www.979364.com-美国好彩香烟图片| www.fv68.com-时时彩骗局举报方法| www.yv84.com-云南福彩中心白云路| www.29ww.com-画风景画彩铅画| www.0593.site-中国足彩馆踩踏天下| www.432909.com-买国家彩票赚钱| www.004252.com-博彩黑粉-| www.921721.com-神彩软件是真的假的| www.990542.com-韩国彩票lotto| www.as43.com-福彩基诺奖励规则| www.ro41.com-彩之源彩票注册| www.3jm.cc-热购彩票是真是假| www.77ja.com-微信群里刷彩票| www.1185.pw-彩票是怎么开出来的| www.037055.com-手机购彩助手| www.118594.com-彩七七下载安装| www.020801.com-杭州福彩中心| www.9170.org-3d家彩开奖-| www.668416.com-福彩图谜图库总汇| www.88372.cc-喝彩的解释-| www.164944.com-安徽体彩领奖中心| www.60488.cc-重庆1.5分彩| www.485602.com-易彩赚钱-| www.ab51.com-上海快三三同号推测| www.13sk.com-福彩今天开机号| www.4263.cc-三思彩玄机-| www.24117.com-彩票包括哪些种类| www.037920.com-免费彩票组合软件| www.823588.com-彩涂钢板几把硬度| www.902479.com-鸿运党和彩-| www.960117.com-彩票平台推荐一下| 福利彩票www.8039l.com| www.dh21.com-彩票达人是正规的吗| www.tg57.com-彩票和值怎么研究| www.09vd.com-乐彩票-| www.66us.com-彩票开奖结果今天晚| www.870.pw-彩票数学公式方法| www.39ca.com-秘鲁彩虹山的形成| www.0919.in-能合买的彩票的网站| www.944622.com-乐世彩票-| www.89el.com-竞彩体育篮球比分| www.549707.com-体彩足彩怎么买| www.554765.com-天龙八部3勾天彩| www.00726.com-上海福彩网选三| www.60137.com-体彩大乐透开奖结另| www.027951.com-女孩子玩福彩骗局| www.391146.com-众和彩票骗局| www.508732.com-自己开个网站博彩| www.589618.com-七星彩个位十位数| www.312431.com-7乐彩推荐号码| www.131845.com-全国结婚彩礼价格表|