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.16191.cc-竞彩足球过关计器| www.568261.com-正规彩票赚钱项目| www.332795.com-京彩彩票网安全吗| www.608002.com-爱彩乐咋看-| www.557480.com-儿童简单水彩画图片| www.559155.com-安徽省彩票开奖情况| www.994916.com-网上买时时彩平台| www.13lx.com-体彩陕西十一选五开| www.063389.com-十大私彩排行| www.653429.com-玖亿彩票是真的吗| www.607516.com-人人彩票开奖| www.932545.com-重庆快三多久一次| www.670525.com-新浪彩票查询| www.965086.com-彩票过年停售时间| www.657040.com-彩贝游戏的兑换码| www.475678.com-福彩3d杀号两元网| www.38no.com-结婚彩礼多少合适| www.su6.com-重庆彩个位万能码| www.131411.com-彩礼吉利数-| www.90es.com-玩网上博彩犯法吗| www.52262.cc-数字新浪彩票网首页| www.502383.com-kk彩票网址-| www.v31.com-3d神彩涂2版| www.993687.com-足彩胜乎负十四场| www.529659.com-天齐网彩-| www.511109.com-彩虹周杰伦听后感| www.783402.com-七乐彩幸运选号| www.091030.cc-正规彩票店卖假彩票| www.369406.com-彩友网时时彩积分| www.770009.com-55彩票网页版本| www.915098.com-义乌体彩网官网首页| www.4199.top-美国七彩产业集团| www.411221.com-彩色纸箱印刷厂| www.895611.com-9999pp彩票-| www.34ib.com-摇摇乐彩票-| www.137065.com-七彩科技会员中心| www.92ir.com-竞彩4串56-| www.5628.xyz-彩虹六号国服要钱吗| www.88594.com-218永信彩票| www.739022.com-中国彩票假-| www.qk65.com-精彩彩票app下载| www.790769.com-彩票精英资料大全| www.vu4.com-三分快三最新开奖号| www.973565.com-彩虹宝宝中文版全集| www.314467.com-万达大玩家彩票| www.6530.org-鑫彩国际游戏| www.345054.com-天天有彩票棋牌| www.784883.com-七星彩今天开奖| www.958787.com-乐彩客彩票客户端| www.p00.xyz-哪类彩票是9位数| www.336113.com-体彩所有玩法| www.846016.com-狗万app足彩下载| www.327613.com-七星彩走试图带连线| www.48314.com-买足球竞彩的软件| www.067945.com-吉林快三算账软件| www.290833.com-内蒙古体彩网大乐透| www.958612.com-今晚福彩开奖视频| www.678509.com-吉林快三快赢网| www.3717.cm-乐盈彩票下载| www.286098.com-360购彩走势图| www.857888.cc-进彩票店怎么买彩票| www.4687.biz-梦见中彩票买车| www.115801.com-彩虹周杰伦2007| www.804272.com-彩票站点能买世界杯| www.73aa.com-彩票世界怎么下载| www.45620.com-重庆市时彩开奖结果| www.330222.cc-湖北体彩排3走势图| www.984597.com-彩虹8平台能赚钱吗| www.511605.com-上海体育彩票投注站| www.2mc.cc-身边真有中彩票的人| www.55612.cc-三分时彩官网| www.88822.com-1彩娱乐-| www.130897.com-重庆时时彩骗局曝光| www.789722.com-微信好友拉我玩竞彩| www.jq04.com-分分彩输了十万| www.30lj.com-福彩昨天出奖号| www.158476.com-体育彩票加盟云彩店| www.965015.com-微彩票app-| www.127403.com-彩客竞彩让球胜平负| www.718291.com-老鼠报彩图宝典| www.90ky.com-小米手机隐藏彩蛋| www.399568.com-彩票分析新版| www.539461.com-网上购彩网-| www.32656.com-江苏体彩几点开奖| www.71fz.com-vr娱乐彩票-| www.21049.com-竞彩预测分析| www.363185.com-羽泉彩虹歌曲mv| www.539032.com-乐盈彩安卓-| www.996909.com-仙彩竞彩app| www.jc13.com-中国体育彩足彩开票| www.4724.vip-七星彩奖图片大全| www.387297.com-趣发彩票app| www.13499.com-新浪中国竞彩对阵| www.149062.com-下载彩乐彩票网| www.824827.com-郑州福利彩票兑奖点| www.cp5357.com-北京福彩官网| www.21212.com-赢发彩票可信吗| www.820403.com-早上几点开快三| www.8051.net-创意水彩画作品| www.263308.com-体彩双双字谜| www.705028.com-福彩3d哪里下载| www.890.cc-老彩民买吗赢钱方法| www.22873.cc-体彩快报有七星彩| www.724770.com-买彩票是不是投资| www.66325.cc-118彩票网正规吗| www.331052.com-彩票棋牌游戏| www.967196.com-即时开彩下载app| www.7170.vip-808福彩下载安装| www.94917.com-彩票系统维护要多久| www.505537.com-百姓彩票网投是多少| www.cai5252.com安徽快三基本形态| www.64188.cc-外围竞彩篮球| www.266249.com-河北省福彩兑奖地址| www.452132.com-幸运中彩票助手软件| www.ml15.com-吉林快三选号技巧| www.1179.in-体育彩票入门知识| www.44568.com-福建福利彩票网15| www.057888.cc-福彩三d无名图| www.mp45.com-彩78app-| www.106041.com-234彩票网-| www.492007.com-玖玖彩票网登入| www.922597.com-红旗彩票彩种| www.6934.biz-五分赛车彩票如何买| www.024514.com-财富彩票app下载| www.350018.com-大发时时彩方法| www.713999.com-数字型彩票分析方法| www.th05.com-彩票十一选五玩法| www.33608.com-新手如何玩彩票| www.360954.com-吉林快三半顺| www.759152.com-满堂彩彩票注册| www.by88.com-福利彩票查询今天| www.2459.com-国模雨晴拍的彩票| www.031051.com-奔驰彩票是真是假| www.562959.com-爱米彩的网站| www.692937.com-竞彩已完场比分结果| www.jf65.com-广西派彩电子走势图| www.35095.com-金彩网挣钱是真的么| www.110012.com-海南七星彩杀号定胆| www.367932.com-简单的入门水彩画| www.675226.com-财政部调整竞彩| www.998937.com-幸运彩乐园下载| www.5555.com-彩票查询3d试机号| www.27189.com-彩吧图迷第三版| www.97531.com-竞彩足球彩票有假吗| www.346967.com-彩票国际信誉大平台| www.662025.com-体彩竞彩大奖| www.914911.com-天天彩富网后一定胆| 688彩票www.050.la| www.8315.loan-中大彩彩票-| www.46003.com-安傲褔彩15选5| www.165011.com-中彩在线贺文| www.550182.com-6678彩票主页| www.727317.com-快3福彩开奖号| www.970474.com-广西快三时间开奖| www.98uu.com-南宁彩民中500万| www.3703.org-休彩排三走势图2元| www.19513.com-天津时时彩彩经网| www.88603.com-66网赌彩票-| www.034008.com-博彩程序源码| www.246890.com-基诺彩票开奖查询| www.346969.com-神彩网址-| www.441163.com-中国体育彩票杯| www.666005.com-彩虹精化股票分析| www.811157.com-彩票的中奖概率是|