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.9598.site-彩票昵称取什么名字| www.3364.cn-开黑彩判刑几年| www.941525.com-世界平台彩票| www.nm4.com-五分快三走势图大全| www.189598.com-甘肃体彩11选5| www.344184.com-彩神软件合法吗| www.506158.com-彩票33官网注册| www.613826.com-调整高频快开彩票| www.8875.win-红旗彩票怎么下注| www.969542.com-彩票追号一停就出来| www.ix31.com-江苏e球彩官网| www.08ot.com-福建彩票摇奖机| www.582132.com-彩879彩票怎么样| www.514664.com-国内彩妆品牌大全| www.637806.com-上海市体彩中心官网| www.783460.com-广西快三豹子遗漏| www.48uq.com-大乐透彩乐乐网杀号| www.1389.net-手绘水彩花卉图片| www.8020.cc-十字彩票怎么下载| www.181327.com-青海快三预测| www.338532.com-6十i体育彩票给果| www.465062.com-pp彩票真能赚钱吗| www.567682.com-3d图谜总汇全牛彩| www.666898.com-时时彩龙虎长龙记录| www.766937.com-中国福利彩奖结果| www.41214.com-彩票网投大全| www.036342.com-晓风彩票官网| www.344592.com-彩票平台直招总代理| www.455594.com-区块彩票系统| www.67kc.com-附近的彩票站在哪里| www.260975.com-一分快三和值技巧| www.338296.com-彩票积分兑换| www.420323.com-9亿彩票的计划网| www.523548.com-网上玩福彩网犯法吗| www.46616.com-七乐彩复试计算器| www.277357.com-全国快三开奖公告| www.034288.com-七乐彩那天有| www.171256.com-河北快三智能推荐号| www.308529.com-青岛体育彩票投注站| www.473727.com-下载即时开彩| www.960495.com-大乐透3亿彩票照片| 易彩集团www.25688n.com| www.060318.com-极速快三正规的吗| www.73961.cc-彩票号码预测代码| www.497735.com-牛彩官网下载| www.328609.com-七星彩开奖直播视频| www.601855.com-掌上彩票app官网| www.m85.org-最大的黑彩平台| www.631888.com-七彩图-| www.771931.com-盈盛现金时时彩| www.891136.com-红彩会-| www.969019.com-天天彩票是诈骗吗| www.bd66.cc-安徵快三走势图| www.048869.com-河北省快三吧| www.287235.com-安徽快三50-| www.453448.com-熊猫良浜彩浜| www.623375.com-福彩天齐网字谜总汇| www.762519.com-5k彩票会员登录| www.435678.com-遵义有几处卖彩票| www.561508.com-快三规律怎么看| www.650603.com-61彩票怎么看| www.728549.com-足彩007-| www.810712.com-点击进入更多精彩| www.886988.com-微信骗你买彩票| www.953493.com-马来西亚彩票| 中国福利彩票www.6364b.com| www.er98.com-有预测快三的软件吗| www.234016.com-68彩票下载-| www.768926.com-今晚3d东盛彩报| www.750049.com-中彩彩票怎么注册| www.4019.cc-sb是什么博彩| www.884099.com-黑彩票店-| www.973104.com-风彩网app下载| www.b79.loan-抚州人喜欢玩彩票吗| www.45nh.com-彩虹网络电视台| www.079692.com-55彩票网官方网站| www.019713.com-uu彩票购彩大厅| www.230376.com-[星彩3d论坛| www.587444.com-奇门遁甲预测彩票| www.662447.com-乐玩彩票提款| www.959677.com-3号彩票3h-| 网易彩票www.36788w.com| www.181372.com-安徵省快三开奖| www.871675.com-牛娃彩图库资料| www.285.date-七星彩三定位多少钱| www.360938.com-福利彩票摇奖机下载| www.dt70.com-幸运快三是真的吗| www.06016.com-人人彩票中奖福地| www.62895.cc-福彩快3网官网| www.ea81.com-必发彩票幸运农场| www.yu26.com-鉴别釉上彩釉中彩| www.500006.com-枫亭时时彩案件| www.213274.com-彩神通金码-| www.318211.com-博彩堂-| www.467228.com-上海福利彩票七乐彩| www.575416.com-久久彩票下载地址| www.675355.com-兴化彩票-| www.660393.com-腾讯体育ai彩| www.220321.com-百乐彩app下载| 500彩票www.652188.com| www.ob67.com-海南彩票论坛| www.05gk.com-福彩广播开奖| www.557051.com-水彩画图片-| www.663860.com-聚鑫乐彩啥东西| www.742277.com-网投彩票排行| www.810188.com-平特精版料彩图| www.893391.com-彩票中奖计算| www.975647.com-云彩在线彩票合法性| www.es4.com-幸运快三下载| www.zb61.com-3分快三精准计划| www.60ib.com-银彩娱乐客户端| www.613254.com-彩票程序开发课程| www.723011.cc-168彩下载app| www.811107.com-91彩站竞彩之家| www.01310.com-国彩彩票免费下载| www.683486.com-体彩义乌-| www.762638.com-2分时时彩计划| www.442200.com-分分彩定位胆规律| www.526366.com-足彩进球总数窍门| www.613637.com-代买彩票骗局| www.676746.com-新浪七星彩走势图表| www.739013.com-彩票3d有假吗| www.794794.com-正规彩票官网官网娱| www.854240.com-多彩网app客服| www.900217.com-江苏体育彩票| www.953354.com-马来西亚大马彩| www.990214.com-彩票77提现可靠吗| www.lv86.com-彩票稳赚不赔的平台| www.q09.cn-利盈彩票-| www.45dq.com-快3彩票魔图| www.544.bid-贵州十一选5爱彩乐| www.4477.cc-彩虹六号高手技巧| www.01283.com-足球500竞彩| www.005494.com-518彩票网址导航| www.006741.com-福彩任选三-| www.665838.com-七星彩中奖地查询| www.130817.com-河南的彩礼钱| www.053120.com-95彩提不了现| www.655935.com-体彩排列三3码遗漏| www.431022.com-齐鲁风彩票双色球| www.977164.com-濮阳因彩礼死人| www.132281.com-濮阳彩礼规定| www.732865.com-江苏体彩即开| www.806809.com-香港合法彩票| www.876214.com-福彩排五走势图| www.942664.com-众彩易购是真实的吗| www.997499.com-职业时时彩玩家绝招| www.kx6.com-我要看安徽快三| www.ni17.com-竞彩交易量唯彩看球| www.37pj.com-聚鑫彩票骗人| www.396508.com-星期四开奖的体彩| www.511144.com-刘畊宏彩虹天堂歌词| www.598390.com-七星彩19023期| www.987130.com-福星快三-| www.661972.com-彩票平台怎么赚流水| www.759908.com-福彩3d和值余0| www.816381.com-时时彩是不是赌博| www.879535.com-大智慧彩票平台| www.947205.com-福彩三天计划论坛| www.994901.com-好彩网字谜-| www.sz13.com-体彩7星彩几点开奖| www.09az.cc-福彩3d期藏机图| www.74yi.com-体彩怎么看中奖方式| www.30244.com-重庆时彩结果|