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天

知道了
9彩注册 www.491946.com-威发彩票兼职| www.612835.com-旺旺彩票怎么样| www.678714.com-米兜彩票公司| www.750468.com-九哥彩票-| www.821829.com-聚彩彩票赢了能提现| www.887315.com-芒果彩票是不是骗局| www.980983.com-七彩的寓意-| www.cp5728.com-安徽福彩兑奖地址| www.oo93.com-彩票正确的倍投方法| www.26cw.com-非法发行彩票| www.90ma.com-w600彩票网-| www.865247.com-下彩彩票网站| www.022794.com-福利彩彩世界app| www.642488.com-乐天彩票平台注册| www.2752.wang-福利彩票倍数001| www.181.red-彩票余数技巧| www.5756.biz-浙江福彩大奖| www.23123.cc-买福利彩票的软件| www.151617.com-77彩票骗局-| www.670484.com-福彩3d冷号排名| www.01id.com-雨后彩虹是什么原理| www.1965.cc-梦见买彩票没中| www.022427.com-买彩票的诗句| www.830935.com-5颗星娱乐平台彩票| www.678314.com-旺彩走势图下载安装| www.939887.com-彩票平台哪个正规| www.00mq.com-银猫彩票-| www.614321.com-新加坡4d彩票开奖| www.731322.com-完美彩票网站| www.815975.com-网络博彩报警有用吗| www.917880.com-赢私彩几十万| www.04fc.com-谜彩天地高清图| www.8710.com-体彩今晚-| www.237962.com-下栽宁夏快三走势图| www.803525.com-乐彩彩票充值骗局| www.03876.com-大家不要买彩票了| www.278592.com-吉首市快三秒| www.389309.com-杨哥说彩-| www.73yo.com-中华公益福彩开机号| www.221777.com-彩票开奖有作弊器| www.18871.cc-988彩票app-| www.252983.com-山东好彩快三| www.92328.com-足彩混合过关玩法表| www.983521.com-彩399-| www.9ve.com-福彩3d断组规律| www.540751.com-彩票帮助赢软件| www.623477.com-鼎顺彩票com| www.687328.com-陕西省体育彩票中心| www.768990.com-3d选号彩报汇总| www.843636.com-彩票监管案例| www.912391.com-可靠的购彩app| www.974219.com-彩铅画百合花一枝花| www.cai910.com-体彩网-| www.qv08.com-旧重庆时时开彩结果| www.32uh.com-南宁体育彩票站| www.000734.com-竞彩篮球有哪些比赛| www.60057.cc-河南福彩幸运| www.103924.com-彩票快三辅助器| www.006728.com-彩界联盟app下载| www.411181.com-彩色铅笔画猫| www.529223.com-热门彩票开奖网站| www.123300.com-山东体彩网官方首页| www.169652.com-一分快三计划| 凤凰彩票www.66652c.com| www.036840.com-全民彩官网下载安装| www.664620.com-彩民之家网址| www.554828.com-快三最长的龙有多长| www.355849.com-4月9日河北快三| www.447362.com-彩票三d预测专家| www.382303.com-下载智慧彩快3| www.497407.com-台州体彩11选5| www.98658.cc-美国一分彩怎么开奖| www.677541.com-下载章鱼竞彩| www.753688.com-qq彩色昵称-| www.258908.com-足球体彩计算器| www.325822.com-星彩论坛3d-| www.386537.com-四川体彩中心招聘| www.498177.com-彩票如何避税| www.567978.com-做彩票代购合法吗| www.629821.com-彩票2元网在线投注| www.691617.com-足彩竞猜凯利方差| www.761078.com-男女结婚彩礼钱| www.605568.com-吉祥彩票正规网站| www.680031.com-9号彩票-| www.753646.com-558彩票网-| www.827326.com-福利三分彩开奖网站| www.892007.com-3d乐彩网-| www.954477.com-天下彩牛蛙四不像| 双龙娱乐www.slyl1.com| www.an63.com-贵州福彩中心主任| www.886385.com-赛车时时彩计划软件| www.525289.com-如何查看福利彩票| www.646178.com-2468天天好彩| www.717668.com-福彩3d彩搜网| www.815790.com-昨天彩票是什么意思| www.917252.com-网络彩票成瘾的危害| www.mj44.com-好彩投网赌-| www.o55.space-买东西送彩票违法吗| www.53328.cc-时时彩最新冷热统计| www.113199.com-买彩票危险吗| www.365331.cc-广东体彩具体网点| www.501675.com-体彩刮刮乐字母代码| www.566726.com-棋牌彩票平台招代理| www.657097.com-中奖彩票号码骗局| www.735132.com-快乐彩票网址是什么| www.838735.com-心理五快三良| www.898080.com-彩票代理拉人| www.962741.com-今日彩圣3d字谜| 500彩票www.500109.com| www.yv10.com-神圣彩票平台靠谱吗| www.773630.com-托班彩虹伞亲子游戏| www.862544.com-今晚彩票开奖号| www.930253.com-体彩竞彩兑奖期限| www.oc67.com-足彩让球胜平负| www.004693.com-彩乐网开奖-| www.7590.vip-下载22彩票-| www.639334.com-大吉彩票下载安装| www.731340.com-彩票2元网走势图表| www.813494.com-福利彩票3d新彩吧| www.892426.com-12快乐彩开奘结果| www.972816.com-七彩铃兰-| www.dv41.com-聚宝彩票手机版下载| www.909100.com-大发快三稳赢诀窍| www.971597.com-彩88彩票-| www.k47.cc-重庆时时彩五星计划| www.525631.com-极速时时彩计划网址| www.012132.com-七星彩廉江好彩哥| www.993719.com-竞彩单关查询| www.od58.com-新亞彩票网-| www.558908.cc-彩虹屁文案优美| www.59625.cc-手机彩票幸运28| www.v24.com-怎么p彩票中奖| www.2151.win-中国有哪些彩票| www.481037.com-香港精准彩霸王开奖| www.618875.com-足彩19063-| www.748666.com-一分赛车彩票天天输| www.863812.com-吹吹七星彩交流专区| www.961974.com-贵州省体彩管理中心| www.si.com-快三是什么软件| www.41ao.com-体彩票中奖-| www.1146.vip-晨兴彩票正规吗| www.22715.com-够力七星彩安装80| www.74776.cc-七色彩开奖结果规则| www.032731.com-派彩走势图下载| www.7448.in-体彩投注站去哪申请| www.028409.com-博瑞彩票是真是假| www.155433.com-下载玩彩票-| www.252151.com-微彩论坛-| www.339585.com-九五彩票公司| www.iw69.com-体彩足球竞彩| www.013627.com-玩五分彩有规律么| www.q99.me-彩票报纸电子版| www.48yn.com-七彩杯成绩查询| www.889.bid-排列3技术型彩民| www.323089.com-凤凰彩票提现限制| www.343233.com-体彩时时内蒙| www.99725.cc-香港福利彩票| www.081311.com-728彩票手机版| www.576735.com-如何与网友交流彩票| www.139401.com-彩35下载手机版| www.fn46.com-福建体育彩票官网| www.21744.com-彩票套现怎么算| www.906315.com-陕西的彩票种类| www.972460.com-优彩彩票安卓版下载|