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.7622.cm-免费下载新浪爱彩| www.99347.com-竞彩258合法吗| www.ib47.com-安徽省体彩兑奖地址| www.502992.com-泰彩彩票-| www.879530.com-重庆时时彩封盘几点| www.972184.com-彩票最快开奖网址| www.cp6736.com-福彩快三官网直营| www.563062.com-电话购彩票怎么买| www.678777.com-福彩店能赚钱吗| www.280488.com-足彩竞猜网-| www.398882.com-福彩3d通下载| www.525806.com-马莉萍经营福彩| www.618452.com-大乐透福彩还是体彩| www.726465.com-175000乐彩网| www.20557.com-重庆实时彩官网| www.602063.com-中彩票不给钱| www.585394.com-彩票站前景怎么样| 幸运彩票网www.33598l.com| www.008034.com-大发彩票软件| www.156424.com-好彩堂经典三肖| www.59217.cc-福彩3d选号规律| www.500835.com-动物彩色画-| www.39892.com-蚂蚁巴士彩票破解| www.610456.com-万博彩票好不好| www.713409.com-东莞彩票中大奖新闻| www.443601.com-心脏彩超讲解| PK彩票www.8499k.com| www.55900.com-网上怎么买快3彩票| www.894646.com-高频彩票投注方式| www.sr24.com-足球体彩玩法介绍| www.23zk.com-乐乐彩足球推介| www.1954.me-99彩彩吧-| www.662357.com-幸运28彩票计划网| www.327327.com-这期彩票中奖号码| www.469928.com-福彩动物总动员任三| www.590993.com-唯彩看球双色球杀号| www.709345.com-网上带领买彩票| www.800007.com-上海彩票有哪些| www.894825.com-二分快三开奖| www.985036.com-福利彩票真有人中吗| www.pn56.com-湖北快三260计划| www.92dj.cc-车彩是怎么玩的| www.wl15.com-彩票走势如何分析| www.197277.com-乐彩网的骗局| www.209278.com-网络快三代理| www.316959.com-七七彩票怎么玩| www.398458.com-体彩彩票可以退吗| www.686125.com-pc28彩-| www.830800.com-粉毒跟彩毒的区别| www.br70.com-彩票走势图分析软件| www.480929.com-和彩云自动上传| www.240878.com-天天彩票助手官方| www.251397.com-安徽福彩3d快3| www.vn65.com-快三平台骗人| www.381825.com-彩票3个亿是哪里的| www.073919.com-金彩网是合法的吗| www.021357.com-福彩快乐十分开| www.144540.com-彩票充100送30| www.312508.com-七乐彩直播开奖| www.758183.com-跟着计划员买彩票| www.832076.com-093彩票苹果下载| www.899866.com-体彩申请书范文| www.971924.com-乐彩网3d免费预测| 亿万彩票www.456586.com| www.5rq.com-英国彩票税收| www.806899.com-澳门官方彩票投注网| www.901158.com-中国体彩报体彩赢刊| www.30qs.com-足球彩票的兑奖| www.73622.cc-海南彩资料-| www.856248.com-苏州体彩网点申请| www.802579.com-彩198app-| www.915880.com-9万彩票官网下载| www.992282.com-新疆喜乐彩怎么玩| www.ro22.com-七星彩票下载安装| www.w01.org-0567好彩群-| www.931.hk-7星彩北京大奖| www.29257.cc-彩运网-| www.862721.com-我的彩票在哪里| www.sb79.com-快三限号是什么意思| www.51zm.cc-玛雅彩票游戏网址| www.999961.com-10分彩是真的假的| www.tp20.com-彩票算号器app| www.2564.xyz-吉林快三共几期| www.26261.com-彩票的种类有哪些| www.59ng.com-福彩专业版连线走势| www.980181.com-彩票cp121-| www.n36.club-彩票123官网下载| www.382755.com-幸运彩大发快三| www.130394.com-花式快三教学视频| www.929141.com-安徽福彩中彩网| www.355771.com-竞彩中奖交多少税| www.842185.com-那种彩票正规| www.85611.cc-彩世界源码-| www.061736.com-彩客竞彩票官网| www.190202.com-一分钟快三大小技巧| www.302886.com-彩虹重机-| www.396363.com-竞彩单场返奖率| www.539583.com-釉上彩瓷器碗| www.670637.com-内蒙古彩票中奖| www.132786.com-足彩术语-| www.507835.com-传奇彩平台-| www.960097.com-酷彩吧买彩票安全吗| www.493.bid-彩票产品的定义| www.009164.com-福体彩藏机图谜字谜| www.o83.net-公司要求平分彩票| www.209992.com-彩票合买网站| www.951415.com-彩票信誉平台推荐| www.19830.com-易彩堂邀请码大全| www.1135.pw-足球竞彩基础知识| www.57005.cc-宜春体彩中心地址| www.288362.com-湖北快三和值| www.585032.com-好彩运官网下载| www.781674.com-福彩快三新规| www.cg7.cc-中原彩票的官方| www.412353.com-彩钢扣板门头效果图| www.947062.com-北京朝阳彩票| www.uk31.com-大赢家彩票是官网嘛| www.836520.com-七乐彩矩阵缩水| www.825505.com-怎么戒掉买彩票| www.0334.xyz-儿歌彩虹的约定简谱| www.491365.com-彩虹鱼绘本-| www.900041.com-福彩申请电话号码| www.83873.cc-代理彩票站多少钱| www.261685.com-彩金彩票-| www.463520.com-95彩票技巧-| www.661463.com-日本年末彩票开奖| www.849225.com-竞彩预测法-| www.956081.com-万豪彩票没有苹果版| www.kj1.com-湖北福彩开奖公告| www.586230.com-福彩七乐彩杀号公式| www.118054.com-体彩杀码-| www.a12.net-买彩票app下载| 大玩家彩票www.545669.com| www.73.win-彩票不让提现怎么办| www.2381.cm-愚人节彩票中奖| 易彩网www.12455m.com| www.779134.com-哪种彩票有漏洞| www.400146.com-澳门哪里可以买彩票| www.882223.com-狂三本子全彩下载| www.at2.cc-河北快三怎么玩| www.755693.com-湖北快三投注平台| www.83336.com-非你莫属彩票哥视频| www.623120.com-手机统一彩票| www.257744.com-老版乐米彩票| www.794537.com-重庆时乐彩开奖号码| www.317970.com-所有彩种计划| www.964350.com-七星彩二等奖怎么看| www.480669.com-移动彩印怎么设置| www.91057.com-福彩软件哪个安全| www.560189.com-体育彩票三d试机号| www.852995.com-中国体彩直播开奖| www.94965.com-深圳彩妆美甲学校| 网易彩票www.www.9356f.com| www.635586.com-七彩阳光动作视频| www.732306.com-政府控制莆田彩礼| www.257533.com-江苏快三爱彩乐| www.980216.com-竞彩胜平负比分直播| www.122069.com-新浪足球胜负彩| www.269679.com-9彩计划pc-| www.67318.cc-江苏彩票在哪里兑奖| www.868.red-彩铅画教程书| www.49yn.com-全国福彩中心下载| www.6998.hk-七彩麻将-| www.739445.com-9688彩票-|