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.325395.com-七星彩彩头尾预测| www.256168.com-手机购彩下载| www.399395.com-体彩p3试机号码| www.550570.com-竞彩篮球比分大小球| www.787567.com-竞彩篮球怎么买| www.878076.com-内蒙快三彩工推荐号| www.963470.com-彩铅画花教程| www.cp7595.com-保定快三开奖走势图| www.197809.com-乐彩3d论坛网| www.128734.com-卓易彩票app下载| www.gc40.com-ag刮刮彩-| www.331229.com-彩66-| www.439785.com-百宝电子走是图彩票| www.713608.com-全民赢彩票提现不了| www.828053.com-老彩民软件下载| www.961496.com-彩票秘籍书全套| www.5ok.com-竞彩足球税怎么算| www.0432.in-爱购彩登录-| www.302779.com-308彩票手机版| www.244593.com-安徽快三投注网| www.74pt.com-万豪彩票是真的吗| www.680081.com-二元彩票网-| www.040070.com-如何彩票开奖查询| www.868325.com-七星彩大中小走势图| www.997197.com-3d走势图88爱彩| www.of96.com-中彩网体彩走势图| www.563766.com-四场进球彩对阵单| www.929102.com-盈盈彩合法吗| www.pj65.cc-极速彩六下载| www.792901.com-郑州福彩中心| www.d81.cc-彩z网-| www.xa22.cc-福彩网购是真的假的| www.9136.loan-四川体彩金七乐技巧| www.508930.com-彩民村新之家| www.567684.com-66cp彩票-| www.1904.vip-快三实时开奖| www.cai2424.com湖北今天快三| www.639047.com-体彩七星彩奖金分配| www.51609.com-网彩计划骗局| www.109005.com-金利彩票被骗的人| www.683185.com-致富彩是不是骗局| www.8778.in-激光透视彩票| www.29745.com-云彩厅真的假的| www.254345.com-王牌彩票平台| www.331393.com-两元彩票网-| www.430079.com-彩虹网秒赞-| www.1910.me-3d福彩组选精选| www.115283.com-体彩新票运-| www.50556.com-七星彩湛江彩版网| www.761394.com-好彩妹是什么意思| www.cp590.com-江苏快三官网下载| www.44xn.com-探探网友叫我买彩票| www.gq17.com-生产彩色纸箱设备| www.294228.com-福彩快三最大遗漏| www.yq11.cc-吉林快三开奖视频| www.76155.cc-彩票折了还能兑奖吗| www.41qw.com-冠军彩票手机版下载| www.391418.com-鸿运3分彩开奖| www.858050.com-应该取消中国的彩票| www.982652.com-彩5下载-| www.4002.org-奥门彩票-| www.092199.com-松原快三走势图| www.346302.com-90彩票com-| www.549725.com-网上可以买足彩么| www.709173.com-1305彩票被骗| www.481559.com-微发彩票-| www.601448.com-香港十分彩走势图| www.708411.com-佰万彩票app下载| www.808003.com-福利彩票下载载| www.894761.com-彩票试机号今天全国| www.mu63.com-彩票天天中彩软件| www.681434.com-重庆实时彩分析软件| www.437868.com-网络彩票重启时间| www.562876.com-中福快三吧-| www.698001.com-腾讯时时彩规则介绍| www.890034.com-花生彩票软件是真吗| www.y68.org-福利彩世界是真的吗| www.720881.com-彩票有4个数字的吗| www.dm73.com-快三一个号码怎么组| www.97xu.com-网恋博彩套路| www.129723.com-四川体彩金七乐官网| www.834168.com-500彩票网登录网| www.974598.com-新星彩贵宾中彩网| www.fl84.com-足彩500比分| www.858.live-时时彩8计划网| www.176376.com-下载内蒙古福彩快三| www.224360.com-快三中奖概率怎么算| www.313390.com-快三和值全买的比例| www.395099.com-彩虹正版授权查询| www.621165.com-佰盈彩票网站| www.80591.com-什么是视频彩票| www.440717.com-失信人员中彩票| www.867947.com-七星彩资料-| www.u40.com-风皇彩票下载| www.230441.com-重庆时时彩诈骗案件| www.cp2088.com-安徽福彩快三遗漏号| www.or28.com-优彩彩票手机版| www.587822.com-c8万彩吧下载l| www.846152.com-乐乐彩票可以挣钱| www.293200.com-河南体彩481技巧| www.412022.com-彩票复制-| www.955648.com-环彩彩票网手机登录| www.81172.com-双数开彩什么意思| www.062407.com-pk拾赢彩王免费| www.05030.com-娱乐时时彩-| www.658843.com-体彩p3杀码最好| www.745985.com-五福彩app下载| www.817033.com-娱乐扑克彩票机保单| www.888117.cc-94彩票下载-| www.949836.com-百宝彩视登录不上| 彩皇网www.62500.cc| www.73525.cc-彩票代购平台合法吗| www.703369.com-彩票小狂人-| www.812061.com-福彩各种书籍| www.883827.com-博瑞彩票是否合法| www.952691.com-顺丰丰彩中奖几率| 500彩票网www.61655m.com| www.650632.com-小班彩虹伞教案反思| www.749033.com-凤凰乐彩下载| www.696110.com-雪缘园足彩-| www.773680.com-乐透福彩3d软件| www.849008.com-足彩六场半胜负开奖| www.945633.com-福建体育彩票开奖| 辉煌彩票www.2875z.com| www.905821.com-快赢彩票app下载| www.960134.com-东方太阳彩票| www.999902.cc-笫一彩票01cc| www.af20.com-今天五星彩开奖号码| www.8351.org-小辣椒七星彩下载| www.z64.net-足彩卖料微信团队| www.488669.com-福彩彩票害人| www.909758.com-网上五分彩彩合法吗| www.981407.com-竞彩推荐唯彩看球| www.uc.com-彩票合法吗-| www.sq69.com-小鹿重庆时时彩| www.32hx.com-金钱豹时时彩网址| www.84ku.com-多彩网靠谱吗| www.608595.com-香港赛马三重彩公式| www.176229.com-快三必中技巧方法| www.896533.com-博彩推广怎么做| www.999927.cc-彩民村三肖-| www.24xj.com-体彩排列3专家预测| www.335882.com-今晚七彩码开奖| www.0122.tv-春秋彩票是黑平台| www.30jg.com-c58彩票网网址| www.0635.com-胜负彩比分开奖| www.76699.com-福利彩票安装下载| www.044127.com-致富彩哪里可以下载| www.155830.com-重庆时时彩技术| www.395789.com-当天彩票开奖| www.33527.cc-福彩双色球图库| www.552046.com-2019彩票破解术| www.1025.tv-在线购买大乐透彩票| www.95tn.com-晓晓彩票-| www.32391.com-彩色压模地坪厂家| www.99632.cc-足彩310报纸咋订| www.152890.com-海口七星彩彩版| www.185058.com-彩民彩票app| www.356024.com-中国彩票头奖排名| www.ga38.com-福彩宗旨有没有赈灾| www.3482.vip-福彩双色球派奖9亿| www.765035.com-彩票平台网站搭建| www.194684.com-福彩快三能赚钱吗| www.4295.biz-尼彩手机的骗局|