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.364913.com-聚财彩票是不是真的| www.1348.vip-快彩调整-| www.181987.com-快三客下载软件| www.43572.com-怎么找人玩彩票| www.42fb.com-苹果版唯彩会| www.947340.com-彩票外挂软件下载| www.479187.com-七星彩差分-| www.650768.com-陈流水彩-| www.53226.cc-时时彩后一技巧| www.6469.vip-彩票刷流水话术| www.29366.cc-广东省彩票领奖地址| www.948392.com-现任福彩主任是谁| www.048181.com-贵阳11选五爱彩乐| www.72343.com-大奔驰彩票官网| www.749779.com-天天爱彩票几天开| 网易彩票www.077wy.com| www.5885.cn-体彩三句话更新| www.mw21.com-分分中彩-| www.109511.com-2044彩票下载| www.453446.com-福彩3d彩神通| www.170207.com-贵州快三走势图今天| www.189101.com-内蒙古快三今天| www.11je.com-体彩和值最大遗漏值| www.786835.com-永利彩票是黑彩吗| www.67895.cc-重庆时时彩黑客名单| www.335229.com-江苏快三二不同推荐| www.525783.com-体彩兑奖时间| www.071176.com-体育彩票店过户| www.295279.com-吉林快三返奖规则| www.889914.com-篮球竞彩推荐| www.zt46.com-网上重庆彩是骗局么| www.565731.com-易彩娱乐平台怎么样| www.01626.cc-售彩app官网注册| www.069116.com-幸运快三技巧顺口溜| www.365238.cc-体彩周四彩票开什么| www.650.me-辉煌彩票内部| www.062523.com-彩神争霸有风险吗| www.lk03.com-豪彩app网站| www.027689.com-彩友多合法吗| www.172721.com-福彩3d过滤器| www.371157.com-246彩票-| www.558404.com-中学生彩铅绘画作品| www.699734.com-足彩资讯平台| www.839754.com-足彩预测18132| www.096128.com-双色球中彩网一擂台| www.251705.com-旺彩超级大乐透软件| www.455525.com-微彩娱乐平台可靠吗| www.627372.com-今日快三号码推荐| www.795321.com-彩票公式规律走势图| www.921757.com-七乐彩今天开奖号码| 55彩票www.755670.com| www.a01.org-东方一分彩app| www.373.me-彩票投注平台导航| www.9032.com-百度博彩-| www.78035.com-竞彩单场比分奖金| www.111296.com-彩吧图库总汇大全| www.305066.com-浙江体彩十一选5| www.979059.com-体彩26期开奖结果| www.40uf.com-七星彩是搞诈骗的吗| www.058889.com-福彩神牛-| www.31440.com-老梁说彩票有声| www.92017.com-丰彩代理-| www.103140.com-体彩大乐透领奖期限| www.202723.com-贵州福彩快三玩法| www.441403.com-彩钢瓦房子如何隔热| www.js76.cc-5分彩官网计划| www.bj86.com-合肥快三开奖走势图| www.xd05.com-618彩票网-| www.f32.loan-海南七星彩论坛头尾| www.277817.com-福彩预测图-| www.638172.com-足彩哲学密码| www.766922.com-3b彩报图库-| www.856028.com-安徽快三数据专家| www.630848.com-海南飞鱼彩票代理| www.055052.com-5分快3彩票-| www.143291.com-彩虹8官网-| www.233014.com-新浪足彩胜负彩预测| www.uo61.com-澳门快三官方网站| www.b32.club-彩票可以赚钱吗| www.9968.in-好运快三游戏下载| www.133367.com-彩钢瓦凹槽-| www.279397.com-福建体育彩票走势图| www.486582.com-今日竞彩单关赛事| www.678915.com-麒麟彩票软件下载| www.826229.com-澳客竞彩彩票app| www.56zs.com-今日体彩p3报纸| www.9999.mobi-彩色压模地面| www.85538.cc-福彩3d计划app| www.200051.cc-福彩3d开奖奖号| www.1921.org-时时彩三星定胆技术| www.665587.com-星空彩票网站| www.768331.com-爱彩乐邀请码| www.892019.com-快乐彩五行排除法| www.982747.com-快三和值9的号码| www.if37.com-在微信上怎么买彩票| www.ks39.com-快3彩票送彩金| www.8ku.cc-大乐透彩票开奖等级| www.35it.com-周三福彩开什么| www.5752.org-幸运彩票能相信吗| www.17807.com-足彩赌博会有赢吗| www.305408.com-福利彩票35期开奖| 天天彩票www.ttcp88.co| www.013417.com-福利快三手机版下载| www.134012.cc-安微快三一定牛| www.0213.vip-评论赢彩票-| www.09508.com-新彩票安卓下载| www.41021.com-中彩社区-| www.005665.com-福彩五星通走势图| www.833591.com-体彩开奖结果新浪| www.910985.com-渐江快三开奖| www.974879.com-234彩票软件下载| www.cp3008.com-酷发财彩票计划| www.kb49.com-3cp彩票平台| www.e95.cn-体彩金7乐走势图| www.22ru.com-彩乐园ll官网| www.3535.in-登录福彩诈骗| www.73123.com-彩票二维码群| www.000051.com-亿游彩票网-| www.102914.com-k彩_彩民-| www.078059.com-众赢国际彩票有托吗| www.203278.com-中彩票故事-| www.290045.com-在线购彩-| www.398333.com-2628彩票平台| www.3010.in-体彩排列预测结果| www.432232.com-567彩-| www.658487.com-中英彩票app| www.801921.com-青岛快三查询| www.894824.com-福彩二分快三| www.962822.com-银河彩票平台| 亚洲www.938901.com| www.525696.com-重庆市彩开奖时间| www.690901.com-新疆时彩票开奖查旬| www.772845.com-爱尚彩彩票正规吗| www.863030.com-时时彩挂机软件开发| www.931977.com-彩票数字最大到多少| www.995447.com-足彩直播360| www.af10.com-体彩开奖结果是| www.52714.cc-苹果系统彩票app| www.069601.com-亚彩会登陆最新版| www.746908.com-505购彩网-| www.832727.com-七彩图画-| www.913620.com-快三能提现吗| www.973352.com-冰彩虹-| www.rj1.com-福彩三d走势2元网| www.1ki.com-彩票3d三毛图库| www.75er.com-多彩娱乐用户登录| www.5483.xyz-3地报纸丹东彩报| www.wm18.cc-彩8下载app-| www.25pv.com-福彩八卦-| www.86sf.com-大乐彩预测-| www.190788.com-手机玩快三咋玩| www.261982.com-龙8彩票-| www.318256.com-创意水彩画作品欣赏| www.365976.cc-新手彩铅用什么牌子| www.795163.com-手机快三哪个平台好| www.687103.com-湖南省体彩中心位置| www.760877.com-彩礼钱是什么意思| www.821875.com-大连市福彩中心| www.880204.com-喜乐彩票app| www.952842.com-3d旺彩预测-| www.993636.com-足彩开奖一般在几点| www.cp3317.com-一分快三是真的吗| www.mn02.com-彩票娱乐排行榜| www.j12.com-福利彩票3d九宫图|