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天

知道了
1分快三 www.103774.com-彩票争霸靠谱吗| www.3986.net-快5彩票合法吗| www.534590.com-福彩开奖频道| www.180111.com-六开彩开奖今天| www.811345.com-彩蛋是什么意思| www.49733.com-体育彩票跨度多少| www.tm96.com-福彩3d马后炮| www.6863.cc-体彩舟山飞鱼直播| www.439833.com-彩票争霸大发时时彩| www.512793.com-王者彩票助手| www.613539.com-qq群彩票机器人| www.cp3878.com-快频彩湖北快三| www.541896.com-足彩雪缘园-| www.3221.cm-世界杯足球竞彩| www.ly2.cc-快三咋算奖金| 爱购彩票www.igcp3.com| www.jv93.com-七星彩复式胆拖| www.404355.com-体育彩票61玩法| www.550471.com-乐发平台彩票| www.4580.net-百度足彩俱乐部| www.21333.com-谁有七天彩邀请码| www.68161.cc-竞技体育彩票知识| www.05gp.com-渐变花朵彩铅片| www.95vx.com-香港赢彩门户| www.189646.com-河南481彩票| www.253.me-双彩球下期蓝球预测| www.8744.loan-彩票平台哪个计划稳| www.086332.com-自助彩票机授权| www.854211.com-苹果pp彩票app| www.965611.com-博亚彩票公司合法吗| www.cp851.com-共赢彩票官网| www.qv81.com-河北福彩3d开奖号| www.49un.com-竞彩14场预测分析| www.806996.com-七号彩票邀请码| www.890101.com-百富博彩论坛| www.975930.com-息县彩礼-| www.110583.com-彩九的软件下载| www.978831.com-贵州好彩香烟| www.2017.cn-和彩日式-| www.19033.com-足彩胜负平对阵表| www.71822.com-掌中宝app彩猫| www.060699.com-红宇体彩店app| www.028264.com-牛彩一句定三码汇总| www.261236.com-足彩任九-| www.389797.com-御彩轩客服-| www.559946.com-白菜网址送彩金大全| www.650702.com-打地鼠游戏教案彩虹| www.230041.com-幸运时时彩开奖记录| www.793122.com-捡彩票中奖不协商| www.870161.com-分分彩计划软件大全| www.949298.com-中彩那天教案| www.999373.com-好彩自然来类似的| www.fn40.com-顶呱刮彩票官网| www.xx87.com-688彩票合法吗| www.408012.com-玩七星彩会不会犯法| www.858074.com-爱淘彩-| www.940552.com-金福彩票网站登录| www.999648.com-分分彩号码怎么算| www.ha21.com-彩票66-| www.54hx.com-贵州彩民8000万| www.2996.cc-彩票一等奖是多少钱| www.510245.com-哪个平台可以买体彩| www.lf00.com-505彩票是骗局吗| www.726617.com-好彩票苹果手机咋下| www.240339.com-大赢发彩票-| www.365495.cc-香港即時開彩| www.64567.com-济南彩色包装纸箱| www.585035.com-0567好彩网页版| www.89zh.com-什么牌子的彩漂好用| www.9050.org-怎么买cba彩票| www.68477.cc-上海11选5爱彩人| www.031287.com-4630彩票-| www.304839.com-七星彩历史开奖表| www.438146.com-新狼彩票网-| www.640050.com-安卓222彩票| www.332992.com-分分彩app-| www.411582.com-下载彩视最新版本| www.520709.com-胜负彩14场比分| www.588426.com-彩票之家官方邀请码| www.62362.cc-全民福彩网站网址| www.8705.vip-快频彩票官网通告| www.888696.com-下载新版网易彩票| www.835916.com-中彩那天课后反思| www.910688.com-福彩快三计算软件| 易盈彩票www.7793c.com| www.27902.com-体彩足彩规则| www.81478.com-澳洲3分彩正规吗| www.zl28.cc-彩神有效邀请码| www.311080.com-中彩网香港-| www.575152.com-福利彩票三加零| www.708111.cc-破解博彩漏洞| www.281308.com-网彩不害怕报警吗| www.420266.com-中国大乐头彩票| www.653595.com-分彩票-| www.197.hk-多盈彩手机版登录| www.3743.org-体育彩开奖直播现场| www.32bi.com-江西11选5啊彩网| www.27194.com-安卓版1彩票| www.302557.com-308彩票苹果| www.441175.com-体彩竞彩足球群| www.556984.com-网上买彩票是真的吗| www.630307.com-浙江体彩飞鱼分析| www.709044.com-分分彩组三组六规律| www.776102.com-福建快三助手| www.69746.com-吉林快三全能下载| www.381148.com-深圳体育彩票中奖| www.396232.com-博友彩网址-| www.508239.com-神奇彩票-| www.391975.com-如何玩好5分快三| www.499498.com-九天国际彩票平台| www.035048.com-优惠大的彩票平台| www.489194.com-国家禁止网售彩票| www.524782.com-8彩首页-| www.239652.com-贵州快三选五一定牛| www.527662.com-彩合网933288| www.656876.com-竞彩技巧大全| www.159888.com-七星彩高清早版版| www.39.cc-2月26日湖北快三| www.0706.org-香港赛马排位及派彩| www.3827.top-奥客竞彩网彩票| www.31189.com-彩票中奖采访| www.71650.com-银海彩票工作室3d| www.018307.com-傲赢彩票app下载| www.568541.com-体彩篮琪儿短租| www.634378.com-跑马福彩-| www.uy68.com-福彩3d新彩吧字谜| www.385479.com-天津彩票5000万| www.482802.com-湖北省体彩11选五| www.544658.com-天天竞彩-| www.55233.cc-彩票送彩金排行| www.8553.cc-彩票研究专业| www.367900.com-刚力彩芽男-| www.576222.com-彩票的基础知识| www.342.xyz-128彩下载app| www.951325.com-彩票赢钱秘诀| 博乐彩票www.35918h.com| www.698098.com-k彩平台是合法的吗| www.842877.com-微博怎么买足彩| www.902074.com-福彩勇士争先推荐| www.954431.com-3d彩经网专家杀号| 网易彩票www.26163q.com| www.848983.com-专业时时彩软件| www.936870.com-溢彩飞扬-| www.982528.com-旧版时时彩宝典下载| www.jy1.com-一分快三计划免费版| www.oy58.com-宁夏福彩网-| www.x91.club-网络购彩500| www.65vz.com-宝乐彩app下载| www.1266.win-七星彩开奖查询下| www.8179.wang-各种釉彩大瓶的感想| www.158416.com-罗马彩票官方网站| www.941285.com-彩票规则玩法大乐透| www.980371.com-下载山东十一选体彩| www.w19.top-体育彩票买法规则| www.41qc.com-七彩球灯笼-| www.98lm.cc-怎样玩黑彩能挣钱| www.2100.org-彩虹1号无人机| www.1010.net-周四开啥彩票| www.7179.cn-500博彩官网| www.161138.com-北京福彩中心新地址| www.22ly.com-qq彩网站-| www.799.win-这附近有彩票店吗| www.32156.cc-玩彩长期赢钱技巧| www.894247.com-c9彩票app下载|