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天

知道了
亚洲28 www.28295.com-常州福彩-| www.779685.com-福彩3d贴吧平台| www.892345.cc-好彩vipapp| www.984787.com-鼎盛彩票计划网| www.dh37.com-湖北快三开奖预测| www.05qt.com-更多精彩后边| www.394442.com-彩虹网秒赞平台| www.3301.pw-彩票制表软件| www.398766.com-彩运来官网登录下载| www.2413.cc-新盈彩下载-| www.088930.com-找快吉林快三| www.586656.com-凤凰彩票彩种| www.858291.com-即时开彩结果| www.063408.com-篮球彩票规则视频| www.790111.cc-西宁福彩双色球字迷| www.485428.com-大发彩票ap平台| www.696946.com-体彩大乐透官网下载| www.810332.com-彩票cp36可靠吗| www.949684.com-福彩三d44期| www.990031.com-彩票站出兑转让| www.km96.com-广州快三查询| www.382112.com-彩票一天下-| www.451472.com-重庆时彩跟买| www.606677.com-彩票微信群群主号| www.712772.com-美人鱼彩票是什么| www.7664.cc-3d福彩标志-| www.526581.com-多宝彩票手机版下载| www.265721.com-彩票诈骗案成功告破| www.154291.com-足球竞彩如何玩| www.329682.com-彩巴图库55125| www.509303.com-东方亮彩东莞| www.24958.com-初学者买什么彩铅| www.097017.com-彩票哪个奖金最高| www.271323.com-亚太好彩爆珠| www.093779.com-网上赌彩票-| www.bs57.com-中国福彩快三软件| www.474810.com-长江彩票app| www.569621.com-山东快三开奖福彩| www.673602.com-古建彩绘教学| www.780516.com-ip代玩彩票兼职| www.907106.com-富彩网是正规网站么| 体彩网www.3890l.com| www.p10.shop-彩票翻身-| www.272932.com-双彩论坛网-| www.949173.com-五福彩下载-| www.48jf.com-天际彩票是骗局吗| www.xl07.com-f彩网真的吗| www.92gz.com-体彩列三开奖| www.3566.org-赠送彩金的棋牌游戏| www.09994.cc-别人推同乐彩彩票| www.89750.com-买彩票是什么梗| www.rs.com-快三客是真的吗| www.894402.com-信彩计划-| www.402.in-最专业彩票软件网站| www.630580.com-竞彩足球名报分析| www.790378.com-快三对子最多开几期| www.537.cm-时时彩50本挂机| www.6110.in-竞彩亚盘怎么玩| www.31vu.com-彩票星期日能够买吗| www.a24.tv-吉林快三跨度5遗漏| www.98ow.com-黑彩受骗-| www.1794.vip-七星够力彩奖表| www.697287.com-七星彩没有规律我吗| www.808280.com-竞彩足球专家分析| www.98244.com-时时彩全天精准计划| www.cai3374.com内蒙快三中奖| www.25408.com-合肥市体彩兑奖地址| www.023712.com-福利彩票中奖技巧| www.sh05.com-彩乐乐网可靠吗| www.yp53.com-彩票排行-| www.837313.cc-好聚彩代理-| www.973164.com-彩虹授权官网| www.em67.com-人人快三登陆| www.28du.com-491·cc彩票网| www.1502.pw-彩虹屁夸夸群| www.ta6.com-职业彩民心得| www.088693.com-福彩快3有几年了| www.88as.com-东方彩与大发| www.772669.com-签到送418彩金| www.902563.com-彩票机-| www.ew24.com-最新时时彩助手| www.22356.cc-足彩预测分析| www.120629.com-福彩甘肃快三今天的| www.242598.com-168j彩票-| www.358423.com-新宝彩票官网登录| www.483902.com-花生彩票可靠吗| www.623065.com-彩票天天开奖| www.768794.com-彩票中了大奖怎么领| www.880932.com-凤凰彩票兼职| www.972885.com-网彩违法-| www.eg87.com-高频彩彩票-| www.o74.xyz-3d彩票怎么看| www.87iy.com-体彩如何买-| www.63060.com-手机qq彩票-| www.557334.com-简单水彩风景画| www.625717.cc-高兴彩票官网app| www.689933.com-5分彩计划平台| www.892972.com-彩票缩水过滤| www.810827.com-福彩3d真实的谎言| www.tt35.cc-售彩-| www.23989.com-彩神的网址是多少| www.86lb.com-华宇时时彩平台代理| www.82330.com-彩票与你同行行| www.vq54.com-河南省幸运彩走势| www.20fm.com-订制彩票表格| www.69611.com-网上彩票能买吗| www.577857.com-今天彩票是多少号| www.150278.com-期期中彩票软件| www.ja3.cc-内蒙古福彩快三官网| www.007537.com-今日体彩-| www.100731.com-本期七星彩开奖结果| www.197229.com-乐彩赢靠谱不| www.443421.com-幸运28彩票官网| www.1488.date-时时彩怎么做计划书| www.01932.com-旺彩大乐透专家预测| www.11317.cc-纵横3d彩票一一| www.58756.com-今日福彩杀一码| www.041054.com-江南彩姐的彩票专栏| www.468861.com-1份彩-| www.5318.cm-后二杀3码分分彩| www.361747.com-唤醒幻想吧全彩福利| www.629916.com-3d福彩直播-| www.740955.com-网络博彩推广话术| www.775365.cc-下裁投彩网-| www.517671.com-大胜彩票安卓最新版| www.231821.com-北京昨天快三走势图| www.305056.com-oe彩票投注平台| www.376372.com-安徽体彩中奖| www.477226.com-农村医药报一新粤彩| www.554924.com-腾讯出售华彩控股| www.606618.com-长沙体彩杯击剑黑| www.664256.com-下载天津爱彩乐网站| www.731037.com-推广彩票平台犯法吗| www.794803.com-多彩秒速时时彩开| www.863992.com-vip123彩票-| www.910418.com-乐彩网电脑下载| www.960600.com-极速赛车彩票代理| www.998460.com-大小单双彩票官网| www.wz6.com-福彩3d论坛专区| www.mq77.com-江苏福彩快三是什么| www.g26.cc-3d彩票狂想谜语| www.962970.com-彩色混凝土地面价格| 金牌彩票www.919586.com| www.qu19.com-福彩案的处理结果| www.450821.com-七星彩16组头尾| www.558989.com-307彩票-| www.gr21.com-下载彩6彩票| www.d74.club-彩票论坛大全白菜| www.586380.com-澳门电子送彩金| www.660038.com-彩票3阳光探码图| www.770750.com-七彩国际影城影讯| www.825826.com-宁夏福彩中奖号码| www.881218.com-八八彩票在哪注册| www.939940.com-123彩票合法吗| 众发彩票www.676zf.com| www.252084.com-如何在中彩网买彩票| www.032627.com-赛马赛果及派彩| www.46145.com-彩神uv打印机深圳| www.cai5025.com福彩快三助手| www.ja66.com-中国足彩网电脑版| www.807339.com-网上买彩票正规吗| www.883404.com-pc高频彩票-| www.958301.com-体彩七星彩下期预测| www.np06.com-彩票分析选号器|