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天

知道了
彩01彩票 www.456.gg-因为穷所以买彩票| www.yj88.com-购买大乐透彩票投注| www.55yx.cc-求职来了位彩票高| www.137767.com-大佬彩票app| www.38803.com-49cc彩票打不开| www.45630.com-彩票坊网站多少| www.442012.com-五州彩票官网| www.221205.com-瑞彩祥云导师微信号| www.04in.com-太湖钓叟乐彩论坛| www.074356.com-旭彩可靠-| www.678681.com-足彩网必发指数| www.147108.com-彩客网开挂-| www.273917.com-重庆时时彩开奖| www.84908.com-体育彩票兑奖码| www.71kr.com-美国彩票华人得主| www.0313.net-彩票行业发展前景| www.061167.com-手机新浪彩票双色球| www.89fz.com-808彩吧计划| www.9324.cc-吉隆坡时时彩官网| www.614999.com-网上哪里买彩票安全| www.697231.com-彩票中三等奖| www.310244.com-新浪彩票电脑| www.387193.com-987彩票平台| www.518656.com-乐彩短信-| www.879.me-彩铅手绘教程| www.67955.cc-河内1分彩-| www.127942.com-[彩虹-| www.784401.com-网络售彩是否合法| www.945997.com-美国一分彩开奖号码| www.jy9.com-快三大小技巧分享| www.03ct.com-双色球基走势图星彩| www.mc1.com-快三顺口溜怎么用| www.lu65.com-网上玩快三会有事吗| www.nj16.com-竞彩足球购彩大厅| www.77iy.com-天天乐彩票手机下载| www.276127.com-一注快三中了多少钱| www.565608.com-体彩店怎么申请退款| www.0801.top-刷彩网是真的吗| www.9866.in-古建彩绘视频| www.co90.com-屠龙团队立彩可靠吗| www.yi60.com-彩票投注站利润惊人| www.30on.com-彩虹正版易支付源码| www.43505.com-五福彩票苹果版本| www.620710.com-盈利彩票官网| www.cai5673.com吉林快三助手下载| www.1ir.com-玩彩票开两号对压| www.0890.org-彩票有真正中奖的吗| www.777135.com-友宝彩票-| www.111043.com-掌上彩一彩-| www.292291.com-购彩大厅uu直播| www.486045.com-大发彩票平台可靠吗| www.632339.com-时时彩怎么玩稳赚| www.793502.com-胜彩娱乐可信吗| www.929572.com-彩票开机号和试机号| www.25gy.com-风采与风彩的区别| www.5011.in-彩神彩票怎么看走势| www.172316.com-彩票自动分析软件| www.257269.com-微彩站安卓客户端| www.6896.vip-好彩头赫敏-| www.34170.com-快三最多连多少期小| www.89372.com-大福彩票app下载| www.006945.com-立彩集团-| www.9841.vip-淮安彩票店出租转让| www.55574.cc-玩彩虹伞可用的音乐| www.011236.com-昨天体彩号-| www.5937.cn-体彩张弛-| www.160920.com-彩票公司电话号码| www.297797.com-苏州快三的开奖| www.366716.com-兰州福利彩票| www.6791.biz-足彩一彩票-| www.58785.com-福彩3d彩票投注| www.064343.com-致富福彩下载| www.149953.com-彩吧vip首页| www.247818.com-玩快三犯法会判刑吗| www.877565.com-重生之我中了彩票| www.ge60.com-七天彩下载app| www.511551.com-类似大地彩票平台| www.643711.com-中国福利彩票作弊| www.jz53.com-七星彩奖怎么看| www.47zs.com-荣誉彩票平台怎么样| www.92ne.com-竞彩计划-| www.752386.com-竞彩足球哪个平台好| www.3451.cc-彩保网-| www.oz36.com-福彩代理-| www.tr61.com-彩票合买app| www.35zk.com-福利彩票3d类型| www.17211.com-中国福利彩票官下载| www.6615.com-重庆彩独胆技巧大全| www.70701.cc-看3d彩宝贝走势图| www.098409.com-带人玩彩票骗局| www.186009.com-北京时时彩开奖结果| www.074408.com-57足彩-| www.407722.com-买3d彩票的软件| www.784288.com-众彩食品批发怎么样| www.883698.com-彩之王网站-| www.987674.com-互联网购彩-| www.464.space-彩票双色球票面介绍| www.251300.com-今日彩票apk| www.348011.com-天津福运快三时间| www.441382.com-北京福彩彩票| www.529952.com-彩票在哪买-| www.589187.com-南国彩票4十1| www.652225.com-黄金彩票团队| www.733051.com-南京体彩中心举报| www.797208.com-凤凤彩票-| www.859936.com-五体彩5d走势| www.910465.com-500竟彩网首网| www.965221.com-福彩藏机图新彩吧| 500彩票www.66653k.com| www.dt53.com-云发购大发快三下载| www.18fb.com-彩久彩票app下载| www.64367.cc-美甲彩妆加盟店| www.84666.cc-福彩3d研究心得| www.530067.com-彩厍宝典app下载| www.646062.com-葡京财神分分彩| www.773340.com-棋牌送彩金-| www.881372.com-百姓彩坛网站| www.a97.club-彩票怎么个玩法| www.69jv.com-手机彩票怎样不输钱| www.878365.cc-内蒙古体彩下载| www.1165.cm-福彩用语-| www.7788.cn-未转变者俄罗斯彩蛋| www.5003.org-苹果5彩色版| www.03063.com-粤淘彩票注册| www.41140.com-8k彩票破解器| www.658487.com-中英彩票app| www.2783.com-大发快三大神玩法| www.736819.com-上海福利彩票集中| www.853721.com-cp彩票头条-| www.946494.com-彩钢板围挡结构图| www.r88.org-数字彩票怎么玩的| www.9808.space-南京市体彩中心| www.76717.com-彩票排列3机选一注| www.324253.com-和乐彩票是真的吗| www.466378.com-乐彩网怎么挣钱| 博友彩www.381772.com| www.uk30.com-大赢家网站彩票| www.00hh.com-彩色-| www.71uy.com-恒彩下载-| www.059379.com-吉林省体彩中心站点| www.024306.com-500彩票网网址| www.09575.com-珠江彩票下载安装| www.052213.com-好看的休闲快三| www.440449.com-大乐透彩票购买时间| www.583078.com-福利彩票动物走势图| www.701135.com-排列三体彩网| www.9504.org-福彩有什么彩票| www.470090.com-非法卖足彩-| www.cai4211.com江苏快三骗局揭秘| www.459300.com-福彩3蓝精灵a| www.527823.com-高手破解时时彩| www.703897.com-长春福彩中心导航| www.91ye.cc-网彩何时恢复| www.697401.com-彩界过客杀码| www.893601.com-乐彩网网官网| www.ck22.cc-破解快三软件| www.92bb.cc-彩票代打赚佣金| www.3846.mobi-十二生肖彩图片大全| www.71783.com-银海彩票图1234| www.038448.com-彩经网旧版本走势图| www.152470.com-掌中彩黑钱-| www.586767.com-南方双彩怎么下载| www.672605.com-三d彩票过滤器| www.844547.com-福利彩票社会贡献|