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天

知道了
1分快三 www.19ex.com-上期福彩号码| www.481607.com-福彩主任被抓新闻| www.071340.com-彩八在线-| www.138776.com-天天时时彩在线计划| www.139551.com-彩客竞彩下载| www.216197.com-福利彩票的玩法| www.329382.com-312彩票下载| www.052762.com-在微信上咋样买彩票| www.650.mobi-长春黑彩最新新闻| www.40245.com-怎样下载陶彩票| www.031362.com-天天购彩网怎么样| www.284638.com-时时彩的玩法介绍| www.002278.com-七乐彩复试中奖表| www.603234.com-盈利彩票网站| www.807566.com-男子守号8年中福彩| www.913149.com-万彩网有人玩吗| www.988754.com-中彩福彩票软件下载| www.ff96.cc-福利彩票刮刮乐骗局| www.n26.site-南方双彩网电脑版| www.m60.cn-福彩十选五官网| www.6455.xyz-uu彩票网可信吗| www.015179.com-海南七星彩包码方法| www.32711.com-新郑和庄镇彩礼| www.263028.com-体彩19083-| www.649433.com-专家福利彩票预测网| www.969451.com-福彩3d稳氏应用法| www.cai5711.com上海快三彩票| www.qb16.com-新彩网3d手机版| www.65007.com-数字竞彩骗局| www.07087.com-七星彩梦册解码| www.448945.com-彩麒麟怎么越养越红| www.802369.com-彩友多app下载| www.896716.com-网彩代理怎么找人玩| www.985429.com-三六零足球竞彩| www.yt71.com-国家体彩中心主任| www.89nx.com-沈阳彩票站合作转让| www.803930.com-搜索足彩必发指数| www.914005.com-立彩是不是诈骗网站| www.527144.com-重庆时时彩三星| www.kj38.com-彩票小助手计划软件| www.28lw.com-三彩官方网站| www.85737.cc-体彩电脑网| www.110243.com-福彩快三速查表图片| www.855441.com-深圳快乐彩技巧| www.650212.com-博彩四个字的词语| www.730180.com-彩45最新地址| www.813193.com-乐透型彩票-| www.894761.com-彩票试机号今天全国| www.973095.com-彩虹六号各种梗| www.et82.com-北京5分彩开奖记录| www.86885.com-七星彩走势规律图表| www.98251.cc-竞彩篮球网上购买| www.088166.com-彩票快3贴吧论坛| www.55mm.cc-中国福彩三d| www.030298.com-90九龙彩票-| www.179169.com-北京快三最大遗漏| www.408669.com-福彩体彩春节放假| www.537325.com-春秋彩票害人不浅| www.669242.com-彩票12平台黑钱| www.783992.com-凤凰v彩票-| www.878351.cc-彩福彩票安全吗| www.ih86.com-福彩3d彩宝网| www.07lt.com-体彩中返奖率最高的| www.52735.cc-七彩西游记全集| www.fm51.com-分分快三会造假吗| www.k13.net-中国乐彩网吧| www.427432.com-k彩5分快3-| www.323386.com-七星彩开奖日期表| www.883527.com-乐佳商城彩票| JJ彩票www.07929.cc| www.3665.in-昨晚彩票开奖结果是| www.014.hk-查彩票中奖号双色球| www.2014.com-聚丰彩票合法吗| www.07971.com-中彩那天讲课视频| www.45620.com-重庆市时彩开奖结果| www.90764.com-双彩论坛手机版3d| www.4827.cc-c16彩票官方网站| www.800015.com-选彩-| www.908128.com-网上彩票下载| www.984761.com-青海福彩中心电话| www.ft3.cc-七星彩中二个多少钱| www.788784.com-全国360彩票开奖| www.96hz.cc-竞彩足足球比分直播| www.057387.com-彩票价钱规则| www.gt0.cc-体彩481近30期| www.532936.com-澳门彩开奖记录| www.627524.com-皇帝彩票靠谱吗| www.757668.com-福利三分彩有规律| www.901368.com-体彩竞彩比分怎么玩| 红旗彩票www.39957a.com| www.8gj.com-匕星彩论坛-| www.469568.com-开心七星彩网手机版| www.639492.com-彩票店摆设-| www.753632.com-分分彩挂机方案论坛| www.826219.com-14号彩票-| www.903568.com-福彩3d投注站| www.967243.com-女孩骗我买时时彩| www.kg7.cc-彩票吉林快三| www.vq31.com-安徽快三预测与开奖| www.15om.com-下载qq彩票软件| www.456869.com-祝福中彩票诗句| www.544460.com-手机版淘彩票| www.613637.com-代买彩票骗局| www.66am.com-爱赢彩彩票app| www.890305.com-胜负彩360-| www.990629.com-爱中彩票网官网| www.iy87.com-中国足彩网nba| www.182686.com-中国快三第一门户| 酷彩网www.89939.cc| www.9366.top-福利彩票的职责| www.58335.cc-双色球彩民天地| www.887978.cc-五福彩票821cc| www.bg69.cc-网易彩票开奖| www.775201.com-最常见的彩票种类| www.755869.com-彩乐乐蓝球杀号| www.831290.com-彩票官员自己中奖| www.914813.com-福彩v98-| www.978919.com-36选7好彩一预测| www.cp5922.com-买彩票的人都是傻子| www.246009.com-淮安市体彩-| www.321177.cc-透视彩票眼镜| www.378819.com-福彩双色球几开奖| www.9889.biz-汇丰彩票辅助| www.600051.cc-竞彩胜平负开奖| www.796864.com-举报黑彩有奖励吗| www.0595.cx-中彩票双色球走势图| www.226675.com-破解彩票-| www.tm78.cc-彩票算号器-| JJ彩票www.47370.cc| www.60aq.com-彩票开奖结杲查询| www.2491.cc-意甲2018足彩网| www.807829.com-竞彩专家推荐预测号| www.100899.com-福彩3d杀跨度| www.237524.com-云发购彩票-| www.k75.top-伦敦2分彩走势图| www.872452.com-福利彩票贵州| www.947211.com-中国体育彩票高频| www.999199.com-下彩网手机版| www.kp40.com-江苏福彩双色球单式| www.874154.com-七乐彩开奖结果| www.973085.com-彩虹六号新手教学| www.ln83.com-旺彩彩票app| www.s03.cc-红中彩票手机版登录| www.45zv.com-港龙彩票-| www.2322.in-福彩快了十分玩法| www.089356.com-彩神ix靠谱吗| www.75jn.com-足彩怎么玩稳赢| www.531290.com-有一位老彩民说| www.5pa.cc-竞彩怎么交税| www.ob37.com-火箭彩票网-| www.4514.com-体彩19037开奖| www.4476.vip-彩虹岛高手视频| www.10770.com-澳客足彩网胜平负| www.902460.com-足球竞彩结果| www.732058.com-百福彩正规么| www.wr74.com-彩票二等奖容易中么| www.44yn.com-彩虹6号机票在哪买| www.55174.com-微彩吧兼职可靠吗| www.0514.pro-彩客彩票37旧版| www.509768.com-彩神iii-| www.ku.com-宁夏银川快三| www.229494.cc-7彩冰淇淋-| www.321804.com-足彩ai预测-| www.297662.com-手机玩快三骗局|