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.4779.cn-彩票破了-| www.42220.cc-彩72彩票-| www.97898.com-彩票性缘第二书包| www.074455.com-新快三开奖结果查询| www.151084.com-福彩三d于海滨视频| www.358439.com-怎么建立时时彩网站| www.455096.com-皇冠彩票十年品牌| www.553100.cc-体育彩票排五| www.660306.com-山东齐鲁彩票欢迎你| www.758551.com-长春彩溢健康会所| www.838555.com-丹麦28彩票平台| www.904567.com-三d福利彩票和值| www.965431.com-中国最牛的彩票对联| 乐彩网www.364688.com| www.ir78.com-体育彩票手机客户端| www.d67.top-亚博科技阿里彩票| www.35yq.com-亿彩彩票最多黑几期| www.1400.org-彩宝贝双色球走势图| www.8270.org-彩票ps-| www.34319.com-代玩彩票qq号| www.81135.cc-快三走势图昨天呢| www.034034.com-cba篮球竞彩分析| www.207793.com-彩2彩票-| www.289288.com-快三两个号有钱吗| www.389995.com-中国彩票中奖排行| www.516525.com-德晋彩票欺诈| www.588074.com-时时彩输了好多钱| www.663854.com-河内分分彩官网| www.739654.com-大福利彩票app| www.816292.com-北京褔彩3d-| www.891087.com-大发快三在哪买| www.955714.com-中福彩票群-| 豪彩VIPwww.6fk.com| www.dj68.cc-彩票双色球复式玩法| www.yo71.com-湖北省福彩中心地址| www.25sv.com-鑫盛彩票-| www.0703.org-彩票店申请书| www.7424.com-上海开福利彩票店| www.26545.com-福利彩票开奖| www.71558.com-百事彩票27275| www.055219.com-怎么劝沉迷彩票的人| www.137286.com-凤凰彩票平台| www.215187.com-乐赢彩票彩种| www.287398.com-yy彩票_登录| www.391596.com-星耀彩票-| www.504447.com-梦想彩票站破解| www.568963.com-福彩好运十倍| www.639794.com-牛牛彩代理-| www.763994.com-华宇手机版时时彩| www.863372.com-体彩19029开奖| www.920571.com-588彩票开奖查询| www.972200.com-印尼五分彩开奖结果| www.qx93.com-三分快三技巧规律| www.4qw.com-怎么买彩票中奖高| www.63ou.com-彩票平台搭建app| www.0423.site-体彩481走势| www.8290.vip-盈彩团队全天计划| www.28761.cc-新快三开奖结果今天| www.72128.com-奔驰博彩亚洲| www.053530.com-彩乐乐专家杀码预测| www.131233.com-郑州结婚彩礼| www.207108.com-购买双色球彩票机选| www.281186.com-时时彩二星包胆| www.385122.com-丰顺福利彩票双色球| www.505301.com-福彩3d字迷图总汇| www.576151.com-牛蛙彩导航-| www.646397.com-竞彩足球怎-| www.750061.com-七星彩预测频道网| www.816058.com-澳门博彩诈骗| www.884189.com-杏彩网页在线登录| 天天彩票www.171880.com| www.go26.com-好彩一生肖数字表图| www.xp11.com-快三怎么打才能稳赢| www.20so.com-时时彩官方数据| www.919.in-福彩销售点申请书| www.4835.cc-福彩中彩规则| www.9939.tv-竞彩篮球主队在那边| www.64604.com-好乐多彩票骗局揭秘| www.021828.com-彩票坊邀请码| www.091985.com-快三最多开多少期小| www.157957.com-19046期足彩| www.264852.com-河北体彩快三| www.345222.cc-下载彩8-| www.418428.com-上海体彩官网| www.513607.com-时时彩后二稳赚方案| www.580169.com-慧扑彩彩票网| www.651991.com-京彩彩票是不是真的| www.773465.com-哪里可以合买彩票| www.858496.com-彩迷天地36期| www.919179.com-正规三分时时彩网站| www.976000.com-三动三不动彩礼| www.ae10.com-彩票最新开奖| www.qc90.com-四月足彩-| www.13.cn-三亚私彩举报电话| www.62qh.com-快乐彩任5奖金| www.983.cm-梦迷解图梦册七星彩| www.7227.in-彩虹6号墨冰怎么卖| www.18599.com-竞彩足球跟单风险| www.56827.com-北京丹彩快三骗局| www.022964.com-天津时彩软件| www.092000.com-信博彩票正规吗| www.149554.com-副利彩票开奖办法| www.250233.com-快三三同号概率| www.316397.com-大通彩票-| www.377134.com-美国人结婚送彩礼吗| www.508148.com-彩票套票如何打印| www.572650.com-新天天彩票下载安装| www.634634.com-广西七乐彩开结果| www.732895.com-体育彩票19050| www.800015.cc-关于彩票的买法| www.866281.com-搜狐体彩预测| www.920702.com-快彩e在线-| www.973169.com-彩虹玫瑰的花语| www.ak21.com-7星彩走势图| www.pr13.com-天天签到3元彩票| www.6qj.com-员工领彩票中奖| www.53pq.com-共享彩票盈利模式| www.517.live-新浪福利彩票双色球| www.3714.biz-购彩xr是什么| www.8678.win-江苏e球彩赛事| www.58856.cc-体彩排列五开奖中奖| www.008891.com-腾讯3d彩票开奖| www.068408.com-百万彩票账户安全吗| www.127212.com-彩虹玫瑰种子| www.188503.com-内蒙快三规律| www.252737.com-微彩-| www.311104.com-极速3分彩官网| www.374249.com-彩乐乐好彩一| www.543611.com-迅盈彩票是真的吗| www.618519.com-足彩40期开奖| www.678821.com-送彩金的游戏| www.746969.com-彩票每天领红包| www.804276.com-可以买世界杯的彩票| www.870237.com-官方人人彩票网| 彩票驿站www.2350p.com| www.bb78.com-喜乐彩-| www.pf21.com-足彩新浪必发指数| www.9sp.cc-福彩出奖结果查询| www.55hy.com-云南体彩网点| www.536.space-腾讯分分彩玩法秘籍| www.3370.vip-最准的彩票预测网站| www.8111.com-买博彩违法吗| www.21982.com-135345赢彩天| www.55905.com-微信好友玩彩票骗局| www.92667.cc-立彩官方下载| www.037966.com-博友彩有人控制吗| www.187628.com-私彩漏洞-| www.248268.com-567cc彩票客服| www.306456.com-bu彩票-| www.365398.cc-体彩5码最大遗漏| www.434499.com-体彩天下骗局| www.516398.com-即时开彩安卓版下载| www.571749.com-那家竞彩能买| www.630937.com-海南七星彩彩票网| www.686361.com-福彩3d综合走试图| www.750675.com-兴彩票网站-| www.805767.com-发财之路彩票| www.868712.com-用数学计算七星彩| 好彩头www.51331h.com| www.bz05.com-快三平台介绍| www.px29.com-彩民堂app下载| www.8nk.com-102彩票下载| www.49rd.com-彩票6234-| www.185.red-南宁彩票-|