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.811854.com-双彩乡斋堂庙| www.935150.com-彩之网首页-| 中彩网www.61233n.com| www.kf35.com-双色球黄小仙众彩网| www.y85.com-足球彩票奖金计算器| www.72ih.com-大彩鲸11选5助手| www.1885.me-广西体彩兑奖方式| www.8271.xyz-福彩每期销售额| www.37973.com-赢家彩票主页| www.91178.com-日软红好彩-| www.068576.com-大乐透彩乐乐走势图| www.148299.com-合法的网上彩票平台| www.366577.com-爱好48色彩铅色卡| www.482825.com-5188彩票登录| www.572636.com-上户彩-| www.655696.com-彩票单式生成| www.809589.com-打彩票的软件排行| www.882463.com-英国皇家5分彩结果| www.997858.com-上彩票2626cc| www.ab03.com-老快三开奖结果查询| www.un80.com-彩票大发快三| www.15pj.cc-彩票开奖体彩| www.734.tv-时时彩五星组合规则| www.5582.vip-幸运飞艇官网彩票| www.14434.com-体育彩票过年放假吗| www.61987.cc-彩票有几种系统| www.059294.com-温州快三结果| www.149978.com-期期中彩票app| www.248898.com-江苏快三走势图查询| www.333288.com-竞彩扣税吗-| www.418517.com-中博彩票平台贴吧| www.527157.com-天天精选竞彩| www.654087.com-金龙彩票官方版下载| www.749099.com-手机彩票去哪里买| www.824542.com-聚丰彩票下载| www.901230.com-福彩3d独胆胆码| www.964035.com-彩吧图第三版答案| 幸运众彩www.108065.com| www.jo78.com-王者彩票安全吗| www.l47.me-河北福彩3d藏机图| www.46uo.com-彩票店官方旗舰店| www.961.date-彩云国物语第三季| www.9239.online江苏快3乐彩站| www.51845.com-大发快三有没有外挂| www.99137.com-老杨说彩的文章| www.071566.com-注册送白菜的彩票网| www.139448.com-彩38.com-| www.218893.com-快三二不同复式技巧| www.294844.com-注册送彩票-| www.367587.com-彩票上的编码| www.484574.com-福清彩票-| www.566341.com-宏发彩票官网| www.639841.com-东方亮彩死人了| www.820222.com-农村天价彩礼的原因| www.892371.com-彩票开奖360安全| www.958747.com-网络彩票赌博报警| 500彩票www.50080g.com| www.fh67.com-注册送28彩票| www.xr23.com-彩票杂选号-| www.20ic.com-高频彩官方开奖| www.4502.cn-彩票的利润有多大| www.00722.cc-彩名堂旧版本| www.61787.com-七星彩最快开奖软件| www.022428.com-买彩票的搞笑句子| www.098405.com-中彩股份宁夏快3| www.167511.com-江苏快三骗局曝光| www.276398.com-湖北快三怎么追豹子| www.365258.com-香港彩票报刊大全| www.456510.com-欢乐彩票提现| www.550613.com-大乐透头奖彩票图片| www.657410.com-牛蛀彩票-| www.733959.com-济南快三-| www.799505.com-开发一个彩票app| www.875057.com-恒博彩票下载安装| www.978651.com-福利彩票摇奖机假的| www.gl02.com-众彩app下载| www.yf89.cc-福利彩票店几点开门| www.20vh.com-有选一个号的彩票吗| www.526.tv-时时彩龙虎和怎么出| www.4322.xyz-彩鑫网-| www.9631.cn-最像米彩的图片| www.63136.com-七乐彩走势图2元网| www.022787.com-黑彩庄家挣钱吗| www.096995.com-江西省福彩中心地址| www.165057.com-彩71安卓-| www.271883.com-一定牛彩票停售| www.357720.com-彩票实战手册内容| www.441685.com-邯郸体彩加盟| www.531422.com-彩客网旧版软件下载| www.637505.com-福彩公益金分配比例| www.724062.com-彩票快三计划| www.797366.com-98彩票骗局的案例| www.872601.com-湖南体彩报-| www.965294.com-辽宁体彩十一选5| 500彩票www.341977.com| www.gv81.com-新彩票-| www.xn88.com-中福快三一分钟平台| www.16pj.cc-玩彩票输了100万| www.763.cm-时时彩刷流水犯法吗| www.4678.cc-彩票有多少人买| www.9796.me-因网赌高频彩输死了| www.63358.cc-足彩19039预测| www.021274.com-金藏彩群专栏| www.090975.com-广西体彩兑奖地址| www.156282.com-重庆实时彩开奖记录| www.261801.com-腾讯快三开奖现场| www.348618.com-宝彩网-| www.421133.com-鸿博股份互联网彩票| www.518836.com-中国彩票巨奖排行榜| www.586303.com-老虎机送免费彩金| www.657407.com-安卓牛彩app下载| www.838697.com-彩票齐鲁风采双色球| www.905965.com-浙江之间福彩网| www.965964.com-福彩快3贴吧论坛| 500万彩票www.35155g.com| www.eh97.com-福建福彩兑奖| www.um27.com-彩宝彩票官网安卓| www.03lv.com-美东2分彩是真的不| www.69no.com-彩虹六号地图小技巧| www.0734.la-网上七星购彩靠谱吗| www.9922.vip-百福利彩票开奖结果| www.51681.com-竞彩计算器足球| www.92434.com-卓高和立彩佳哪个好| www.046424.com-盈彩网骗局-| www.141558.com-重庆时时彩诈骗| www.212995.com-篮球彩票app| www.278110.com-快三输的倾家荡产| www.377780.com-拿了彩礼不给嫁妆| www.493444.com-668彩票官网下载| www.562098.com-全民彩票苹果版| www.626002.com-五分彩介绍-| www.693416.com-手机买彩票的网址| www.766630.com-购买网络彩票违法吗| www.892907.com-500彩苹果下载| www.947848.com-福彩刮刮乐字母代码| www.985923.com-彩票骗人-| 乐赢家彩票www.918356a.com| www.ic21.com-金利彩票平台| www.xo40.com-福利彩票投注站| www.12do.com-合肥福彩转让信息| www.73lj.com-快三彩票心得| www.0650.org-福彩双色球复式查询| www.9574.vip-彩票起名字-| www.44741.com-福建体彩兑奖在哪里| www.85806.com-5504彩票网站| www.030403.com-购彩app下载| www.099817.com-78彩店app-| www.155175.com-足彩哪种玩法最佳| www.274628.com-35彩票app-| www.352233.com-完美彩票官网下載| www.416955.com-中体彩唯一官方网站| www.508026.com-唐龙彩票-| www.571583.com-中国竞彩篮球| www.632200.com-玩网彩输了钱怎么办| www.691756.com-76c彩票合法吗| www.761453.com-好彩妹照片-| www.885594.com-利赢国际彩票| www.959673.com-诈骗网站雅彩彩票| www.997381.com-登录牛彩纽约| www.cp0698.com-一分快三破解器下载| www.jq13.com-快三有赢钱的吗| www.yg87.com-彩38彩票注册平台| www.10pf.cc-黑彩代理返点设置| www.67nr.com-彩票基本走势大全|