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.5224.vip-海南体彩七星彩预测| www.844080.com-福彩变为国企会怎样| www.6478.vip-彩86-| www.004647.com-山东福彩双色球开奖| www.7763.pw-足彩单场玩法规则| www.235341.com-齐鲁彩票开奖号码| www.568095.com-七彩影城爱建店影讯| www.73zg.com-福彩排五开奖公告| www.870234.com-三分钟时彩下载| www.993668.com-送彩金的打鱼| www.ud18.com-昨天彩票开奖号码| www.033468.com-快三怎么砍龙顺龙| www.123814.com-网上投资彩票靠谱吗| www.175372.com-福建快三专家推荐号| www.287833.com-彩票合买大厅| www.fc97.com-彩票害人-| www.j38.top-今天七星彩开奖直播| www.598428.com-七星彩19015| www.060194.com-彩世界app下载| www.157601.com-足彩冷门买法| www.877238.com-七乐彩何明专家预测| www.961867.com-四川省彩票-| 亚洲彩www.68568a.com| www.913365.com-大乐透彩神通软件| www.kw51.com-福彩有几个号码| www.151448.com-快三大全下载| www.511541.com-彩之星彩票网| www.716088.com-大发彩票可信吗| www.77596.cc-彩票谜语怎么看| www.46799.cc-彩票站能挣多少钱| www.1947.cc-福彩3d图谜第五版| www.8322.pw-福彩网怎么注册账号| www.746.com-幸运彩票腾讯五分彩| www.8023.com-小班彩虹伞具体教案| www.90ln.com-利记博彩公司网址| www.271785.com-南粤风采好彩1结果| www.394781.com-福彩每天开奖信息| www.31951.com-福彩快乐十二玩法| www.510296.com-广武彩虹谷-| www.639642.com-支付宝彩票兑换次数| www.718262.com-彩运8是骗人的吗| www.792908.com-蚂蚁积分换彩票没了| www.872009.com-彩票行家开奖直播| www.947960.com-3d众彩网专家预测| 网易彩票www.07163o.com| www.11479.com-足彩14场奖金查询| www.020706.com-七乐彩走势图中彩网| www.427205.com-福彩双色球应用| www.81840.com-时时彩冷热号规律| www.281787.com-福彩双色球领奖地址| www.369496.com-合肥体育彩票店妙招| www.gc9.com-彩票的规律-| www.1351.top-七星彩彩票开奖规定| www.589404.com-河南快三均值| www.954741.com-凤凰彩票能破解吗| www.152984.com-分分彩后一稳赚技巧| www.377206.com-腾讯75秒彩走势图| www.492220.com-重庆彩万位在线计划| www.592243.com-彩虹七号游戏视频| www.710017.com-谁知道亿彩彩票网站| www.794219.com-国家反对赌博开体彩| www.872209.com-826购彩网-| www.972420.com-彩铅入门人物画| www.cp038.com-谁有可靠的彩票平台| www.678516.com-江苏福彩网论坛| www.ui01.com-福利彩票主任被查| www.180056.com-手机快三投注合法吗| www.281236.com-五星彩是正规的吗| www.9006.tv-248彩票数字彩购| www.67hk.com-福彩二十选八的玩法| www.6686.cm-新赢彩app下载| www.091114.com-网易彩票不能买| www.0551.live-山东真诀福彩第三版| www.07741.com-中彩那天板书设计| www.69371.com-大乐透彩票多久过期| www.730607.com-玩彩技巧的-| www.727632.com-福利彩是真的吗| www.229257.com-广西快三赔率图| www.193137.com-吉林快三和值走| www.316616.com-300w彩票网平台| www.028535.com-博友彩平台app| www.119573.com-51彩票软件-| www.265793.com-虚拟足球e球彩规律| www.372770.com-胜负彩二等奖| www.496733.com-国际彩票是什么| www.582716.com-贷款买彩票怎么制止| www.678550.com-彩之网页面-| www.776711.com-陕西福彩快乐十| www.107228.com-彩票店网上接单| www.306802.com-锋彩直播-| www.022487.com-福利彩票开奖规律| www.731465.com-5258彩票兼职| www.827227.com-富豪彩票-| www.935312.com-大牌彩票ios| www.985284.com-中国足球竞彩计算网| www.cp82.com-福利彩票十一选五| www.wp07.com-手机看彩票走势图| www.22pd.com-去彩票门店怎么足彩| www.0913.bid-体彩三d四机号| www.511269.com-带彩虹的微信昵称| www.458003.com-彩票0369-| www.007.link-高频彩出号秘诀| www.36396.cc-福利彩票有哪些号码| www.883236.com-代打彩票资金别人给| www.852078.com-500购彩网安全吗| www.74ly.com-快三平台流水| www.4336.cn-异地彩票中奖| www.24547.com-敂力七星彩奖表| www.69846.com-彩票中奖如何领取| www.81kp.com-建德体彩网点申请| www.863618.com-彩票竞猜夹娃娃能| www.466559.com-彩票软件大全ios| www.515432.com-七星彩去哪里买| www.632224.com-融彩网平台怎么样| www.710010.com-福彩摇一摇-| www.323652.com-彩票最快开奖是哪种| www.13735.com-二分时时彩计划| www.3961.biz-ck彩客网怎么赚钱| www.709766.com-充钱带玩彩票骗局| www.799267.com-奔驰网上博彩| www.871291.com-开奖快的彩票软件| www.931903.com-中彩票图片恶搞图| www.984448.com-福彩3+d走试图| www.cp0528.com-安徽省快三跨度| www.jc82.com-双色球彩票选号软件| www.xb39.com-快彩王合法吗| www.882764.com-基诺彩票怎样中奖高| www.954903.com-彩票093官方网站| 500彩票www.652331.com| www.2628.cm-彩票数字没有零吗| www.889390.com-网易博彩app| www.974761.com-最新彩市新闻| www.cai780.com-福彩五分快三是什么| www.ha93.com-518彩票网正规吗| www.ve24.com-河南省体彩兑奖中心| www.531367.com-玩网络时时彩违法吗| www.946868.cc-上海彩钢复合板机| www.cp8687.com-购彩-| www.123249.com-乐乐彩票开奖| www.076656.com-安激快三遗漏数据| www.280537.com-彩票福彩3d-| www.4976.vip-香港最近赛马派彩| www.00148.com-国彩彩娃-| www.u26.site-彩票支票到账| www.4930.net-倍率高彩票平台| www.7475.net-体彩店有销售任务吗| www.2226.me-昆明七彩云南房价| www.8183.net-高频彩包括什么彩| 500彩票网www.922069.com| www.ja4.com-快三大小计划网站| www.690616.com-足彩19045佬牛| www.9677.me-彩票新规影响生活| www.80yt.com-元气骑士狼人买彩票| www.378597.com-彩票中心领奖流程| www.198313.com-内蒙快三最大遗漏期| www.136020.com-体彩河南游泳| www.181066.com-河南福彩快3走势图| www.46667.cc-三彩夏装新款| www.958194.com-青海体育彩票官网| www.tf5.com-安徽快3爱彩乐网| www.4769.vip-龙腾彩票-| www.340575.com-体彩排三试机号今天| www.85365.cc-十四场胜负彩欧赔| www.233124.com-体彩北单实体店|