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.9865.cm-古代横梁彩绘| www.197577.com-今晚七星彩预测| www.757122.com-河北快三对子推荐| www.py53.com-581彩票网-| www.262622.com-高频彩票官方开奖网| www.118755.com-网络赌一分快三假吗| www.to6.com-抚州体彩中心| www.5pa.cc-竞彩怎么交税| www.2211.red-合买彩票源码| www.22703.com-网赌分分彩先赢后输| www.748228.com-中彩平台能出款吗| www.039986.com-多盈彩票网手机版| www.963529.com-被彩票托骗了怎么办| www.86718.cc-鸿彩网属于哪个公司| www.33hz.cc-网站彩票停售| www.118431.com-彩七七-| www.735269.com-初次买彩票买哪种好| www.83fp.com-幸运彩票黑钱怎么办| www.ue62.com-九度彩票是真的| www.757362.com-广州体育彩任五开奖| www.972247.com-中国体育彩票排列3| www.786536.com-全民汇彩票导师| www.526531.com-时时彩长期盈利技术| 顶尖彩票www.168153.com| www.96ph.com-彩排的目的-| www.32821.com-江苏体彩唯一官网| www.143826.com-福彩快乐8-| www.358389.com-牛娃彩免费资料大全| www.537161.com-博彩排名-| www.789860.com-足彩混合计算器| www.028920.com-彩票研究走势有用吗| www.282370.com-新彊福利彩票网| www.505301.com-福彩3d字迷图总汇| www.707656.com-福利彩票线上选号| www.729957.com-新疆福彩首页| www.pa6.com-新彊福彩-| www.85sl.com-八喜彩票合法么| www.22339.com-河南结婚彩礼多少钱| www.189944.com-精彩十分怎么玩| www.482095.com-澳客网竞彩官网| www.757588.cc-福建体彩怎么领奖| www.981242.com-做彩票兼职-| www.hl53.com-藏宝阁4s彩票| www.097.me-盈彩网app邀请码| www.19169.cc-双色球彩票签名区| www.019394.com-毕节大乐透中彩票站| www.226187.com-福彩抓了多少人| www.506758.com-旧天下彩票-| www.720012.com-七星彩内部透露| www.973034.com-湖北福彩走势图| |M13Graphics-手机彩膜贴纸打印机| www.890.biz-彩铅古风绘画| www.38895.com-全国彩票品种| www.055043.com-彩色资料跑狗图| www.983366.com-彩31下载-| www.649598.com-博彩管理专业学什么| www.007278.com-彩票店高清图片| www.201922.com-网易彩票下载安装| www.081391.com-福彩合买-| www.955098.com-佛教与彩票-| www.074737.com-彩6下载安装ios| www.404471.com-乐米彩票网页登录| www.657148.com-彩票奖池金额多少| www.190637.com-中信彩票是正规的吗| www.498903.com-中華购彩网邀请码| www.423104.com-w600彩票平台| www.863829.com-怎么买彩票-| www.026254.com-快三攻略-| www.758700.com-大发快三全天计划群| 500万彩票www.www.98528f.com| www.s71.net-跟买彩票软件| www.290976.com-内蒙快三开下载| www.106809.com-七彩彩票安卓版下载| www.3651.org-大唐娱乐彩票官方网| www.002230.com-七乐彩投注查询表| www.247607.com-彩票平刷王-| www.85ze.com-七乐l彩号码走势图| www.179488.com-5分快三群骗局揭秘| www.957981.com-七星彩单双尾| www.361097.com-福彩高管被抓| www.355494.com-旺角彩票网址| www.530183.com-彩铅水溶款-| www.bs10.com-11选5购彩牛人| www.yp75.com-吉林福彩快三一定牛| www.40ps.com-七星彩造假-| www.573.mobi-极速时时彩太假| www.292683.com-3d新彩网手机站| www.082179.com-118彩票最新版| www.bj37.com-百胜快三下载| www.88730.com-广西双彩综合走势图| www.309644.com-体彩19030期| www.515751.com-潘攀彩票-| www.826016.com-七星彩购买软件| www.969577.com-快三购买官方网站| www.01ek.com-羽泉彩虹吉他谱g调| www.0135.vip-有彩色和无彩色| www.716652.com-彩铅画秋-| www.902366.com-快三单注奖金多少| www.3988.me-送彩礼和嫁妆问题| www.93838.com-干树枝彩泥花| www.761929.com-海南七星彩最新奖表| www.gb27.com-福彩3b字谜专区| www.675.tv-重庆福彩电话| www.456361.com-名彩堂官网-| www.836436.com-快彩是干什么的| www.814113.com-玩外围博彩违法吗| www.uo45.com-爱彩乐专业版手机版| www.280.cm-中国十大彩妆| www.20297.com-本港彩票资讯网| www.108712.com-七星彩19005期| www.270260.com-湖北快三预测豹子号| www.782578.com-玩网易彩票合法吗| www.314407.com-期期好时彩-| www.507152.com-非凡彩票走势图表| www.18456.com-快三彩票几点停售| www.of21.com-真龙彩票-| www.071251.com-足彩编辑招聘| www.339640.com-福利彩票中奖的人| www.556521.com-怎么举报私彩| www.710519.com-足彩直播500| www.917688.com-时时彩最安全的玩法| www.4sr.com-马来西亚彩云阁| www.7051.biz-彩乐汇是什么平台| www.94910.com-卡姿兰彩妆广告语| www.126092.com-上海体彩app下载| www.312033.com-福彩天地报纸谜语| www.129379.com-福彩三d新彩网吧| www.598816.com-七乐彩34期-| www.444367.com-彩16在线-| www.033805.com-我要买双色球彩票| www.251942.com-全民彩安装-| www.99ex.com-湖北福彩快三助手| www.30482.com-大连体彩网点| www.509449.com-彩票路线导航| www.497585.com-pk彩下载安装| www.cb45.com-抓黑彩需要什么证据| www.50xe.com-体彩三的走势图| www.759576.com-时时彩在线计划二期| www.870851.com-超级大乐彩-| www.fs09.com-快三直播间-| www.312880.com-快三杀号定胆软件| www.233264.com-海南快三走势图| www.69053.com-c16com彩票-| www.259627.com-广西福彩软件| www.148.net-临沂彩虹谷值得玩吗| www.975425.com-500彩票apk| www.540127.com-助赢彩票软件苹果版| www.239779.com-苏州快三走势图今天| www.393344.com-彩铅画人物卡通图片| www.84rg.com-银川仟彩摸吧微信群| www.568489.com-洛阳七彩格子| www.678451.com-海南七星彩票| www.809883.com-赢彩网是正规网站吗| www.884958.com-新2彩票论坛一肖中| www.cp82.com-多乐彩开奖走势图| www.sb72.com-一分快三怎样抓豹子| www.9699.in-亚博投彩官网| www.99597.cc-五分时时彩是假的不| www.t56.com-有叫盈的彩票软件| www.202.website动物简笔彩铅画| www.8683.top-彩票开奖7乐彩复式| www.30753.com-新彩票网121| www.299071.com-57彩票-| www.834352.com-福彩3d全图总汇八|