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天

知道了
彩01彩票 五星彩票www.5xca.com| www.008069.com-智慧彩挂机下载| www.95xm.com-体彩玩法一胜一负| www.108105.com-今日足彩比分预测| www.4030.cc-彩界九哥就赌一个胆| www.7372.top-七星彩排列五表| www.37593.com-约彩彩票是真的吗| www.b39.club-莱利ll彩票登陆| www.71la.com-福彩励志语-| www.9708.com-500彩是正规的吗| www.023248.com-体彩什么时候开始卖| www.98528.cc-彩票中奖税率是多少| www.813645.com-银川体育彩票电话| www.909210.com-福彩3d资料-| www.974395.com-星期五有什么彩票| www.cp0021.com-上海快三助手| www.867339.com-怎么制作彩票网站| www.978424.com-全部彩票-| www.al60.com-七星彩口诀精华版| www.5461.wang-盈彩彩票苹果版| www.96162.com-千亿彩下载-| www.092384.com-乐八彩票登陆| www.0087.cc-发行福利彩票的目的| www.28556.com-潮信彩票群号| www.128062.com-体彩11选5有假吗| www.268023.com-彩票投注兼职骗局| www.401133.com-周日竞彩足球赛果| www.560268.com-微信群里的五分快三| www.684781.com-富贵彩票可靠嘛| www.840896.com-彩票押大小骗局| www.969023.com-刷彩票怎么牟利| www.66150.cc-3d福彩过滤器苹果| www.466767.com-造假彩票网-| www.567136.com-台湾彩虹旗娱乐论坛| www.662562.com-程远杀双色球众彩网| www.780595.com-旧版彩库宝典| www.872393.com-福彩助手app开发| www.947604.com-彩票投注怎么玩| www.999094.com-彩票汇-| www.ir22.com-竞彩支持比例| www.0412.date-助赢彩票软件安卓| www.75.hk-中国网易彩票app| www.029632.com-排列三杀号家彩论坛| www.37js.com-彩票搅珠机-| www.23931.cc-梦到号码要买彩票嘛| www.370227.com-彩票摇奖作假视频| www.2116.vip-江苏体彩网app| www.02420.com-免费试玩彩票| www.124010.com-福利彩票是由民政部| www.398.net-安徽体彩中心主任| www.g49.cc-彩经网排三新版| www.61sd.com-福彩杀合尾衫宝贝| www.7781.org-七乐彩玩法与奖金| www.36094.com-678彩票网是骗子| www.91532.com-韩版好彩香烟| www.930986.com-800彩票网站| www.933200.com-分分快三在哪个省开| 中彩网www.71233p.com| www.423800.com-幸运28购彩软件| www.597386.com-广州体育彩票| www.d93.top-廉江好彩哥头尾论坛| www.187884.com-七星彩中奖5个号| www.216970.com-河北快三今日开奖号| www.312507.com-福彩3d大号走势图| www.612043.com-暴风雨后的彩虹歌词| www.38896.com-至尊彩数字邀请码| www.30345.com-福彩3d条吉网预测| www.406604.com-七星彩五行图| www.520559.com-彩票托犯法吗| www.071665.com-投诉福利彩票站| www.8660.vip-五洲彩票安卓下载| www.013697.com-i亿彩-| www.779937.com-彩票店概不赊账| www.891885.com-彩票自动提醒| 众发彩票www.979zf.com| www.440113.com-福彩中心在哪里镇江| www.34626.com-上海快三综合图| www.27oc.com-福利彩票怎么申请| www.372825.com-永城彩票网-| www.518447.com-福彩3d乐彩网下载| www.580289.com-中国连中连彩票| www.646467.com-3d彩民职业高手| www.707320.com-时时彩后一大小判断| www.005641.com-577彩票平台下载| www.k89.in-进入大发彩票| www.770.biz-大象彩票官网| www.085015.com-福彩一休三天计划| www.7281.top-画彩虹的图画小学| www.35719.com-竞彩网骗局-| www.030603.com-搜狐彩票双色球走势| www.129950.com-福彩zcw-| www.563585.com-七乐彩字谜-| www.097303.com-体彩3d基本走势图| www.176532.com-分分快三大小单双| www.196012.com-快三时时彩是骗局吗| www.11001.com-竞彩足球比分新浪网| www.869186.com-巨丰彩票登录大厅| www.090983.com-南宁市福彩大厦| www.677508.com-彩钢板临时围挡| www.044389.com-福彩试机号今天千禧| www.156227.com-kg彩票骗局大揭秘| www.220504.com-qq7彩票下载| www.278836.com-大发快三计算公式| www.117126.com-竞彩足球预则| www.181931.com-福利彩票下载| www.316969.com-明版彩票资料全| www.800091.cc-宝盈彩票-| www.879957.com-内蒙古体彩中心位置| www.983897.com-1980彩下载-| www.bs33.com-上海快三下载| www.q05.xyz-体彩世界杯彩票| www.59vx.com-体彩新机器交押金| www.3083.org-慧彩宝-| www.00196.com-彩钢板临时围挡| www.310036.com-延吉体彩中心在哪里| www.418333.com-盛大彩票邀请码| www.576211.com-吉林快三微信讨论群| www.6gg.com-体彩属于哪个部门管| www.190820.com-快三和值表-| www.696213.com-竞彩足球哪里买| www.841622.com-彩票属性-| www.21vz.com-blued彩票骗局| 中彩网www.71233f.com| www.f14.cn-新加坡福利彩票开奖| www.1230.vip-3d排列三彩神通| www.104.cc-利赢国际彩票合法吗| www.3028.cc-江苏快三推荐二同号| www.277089.com-青海快三在哪里投注| www.398981.com-众彩乐彩票网| www.948590.com-彩票公益金滋蕙计划| www.mi66.com-好彩app官网下载| www.26tr.com-彩票输几十万| www.444371.com-彩票31app苹果| www.08pd.com-728彩票网安全吗| www.9379.win-福彩三地太阳红谜语| www.348757.com-3d彩票中吧图| www.861622.com-彩报第一版图将军印| www.881547.com-辉煌彩是正规彩店吗| www.953873.com-360足彩网-| 大赢家彩票www.5086p.com| www.wj34.com-看彩票走势图的方法| www.411609.com-靠谱的竞彩-| www.15288.com-彩票科学倍投方法| www.83cl.com-喝彩中华方芳| www.22985.cc-天天赢彩票官网| www.06599.com-3d竞彩网-| www.490888.com-淘宝彩票没了| www.658879.com-新彩网3d字谜总会| www.837706.com-网上设赌时时彩案例| 网易彩票www.560231.com| www.693371.com-体育彩票手机投注| www.264880.com-北京快三最长大小| www.375938.com-牛旺庄彩票店| www.503908.com-万豪彩票娱乐网站| www.579107.com-福利彩票怎么推算| www.tz89.com-体彩内蒙古十一选五| www.566906.com-南京福彩大厦| www.631422.com-湖北快三彩票下截| www.70210.com-彩运8官网app| www.058139.com-五分快3是什么彩票| www.310226.com-新浪彩票app| www.413621.com-好彩店彩票安卓版| www.809676.com-网上怎么打彩票软件| www.916780.com-彩票台子收集网|