头像

基于bootstrap的响应式多级导航菜单代码

来源:http://www.huoseo.com/js/3043.html 18***38 2017-09-18 22:47浏览(2606) 收藏

一款基于bootstrap的响应式多级导航菜单代码,鼠标悬停在一级导航上时,会自动显示预设的二级菜单,有3级菜单或更多级菜单的二级菜单也有相同的效果。
基于bootstrap的响应式多级导航菜单代码
分类:导航菜单 > 下拉导航 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 61 下载资源 下载积分: 20 积分

页面的head部分,需远程调用bootstrap样式库和font-awesome图标字体库,并引入本地样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/bootsnav.css">
<style type="text/css">
body{ background-color:hsla(0,0%,18%,1.00)}
.header h1{ text-align:center; font-size:28px; color:#939393}
.navbar-brand{
    padding: 29px 15px;
    height: auto;
}
nav.navbar.bootsnav{
    border: none;
    margin-bottom: 150px;
}
.navbar-nav{
    float: left;
}
nav.navbar.bootsnav ul.nav > li > a{
    color: #474747;
    text-transform: uppercase;
    padding: 30px;
}
nav.navbar.bootsnav ul.nav > li:hover{
    background: #f4f4f4;
}
.nav > li:after{
    content: "";
    width: 0;
    height: 5px;
    background: #34c9dd;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.5s ease 0s;
}
.nav > li:hover:after{
    width: 100%;
}
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
    content: "+";
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    top: 35%;
    right: 10%;
    transition: all 0.4s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
    content: "\f105";
    transform: rotate(90deg);
}
.dropdown-menu.multi-dropdown{
    position: absolute;
    left: -100% !important;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: none;
}
@media only screen and (max-width:990px){
    nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
    nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
    .dropdown-menu.multi-dropdown{ left: 0 !important; }
    nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
    nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
}
</style>

页面的body部分,用了多个div的嵌套结构来放入多级菜单的内容,代码如下:

<div class="demo" style="padding: 2em 0;">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<nav class="navbar navbar-default navbar-mobile bootsnav">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
							<i class="fa fa-bars"></i>
						</button>
					</div>
					<div class="collapse navbar-collapse" id="navbar-menu">
						<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
							<li><a href="#">Home</a></li>
							<li><a href="#">About Us</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
								<ul class="dropdown-menu">
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
										<ul class="dropdown-menu">
											<li><a href="#">Custom Menu</a></li>
											<li><a href="#">Custom Menu</a></li>
											<li class="dropdown">
												<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
												<ul class="dropdown-menu multi-dropdown">
													<li><a href="http://www.huoseo.com">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
												</ul>
											</li>
											<li><a href="#">Custom Menu</a></li>
										</ul>
									</li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
								<ul class="dropdown-menu">
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
										<ul class="dropdown-menu">
											<li><a href="#">Custom Menu</a></li>
											<li><a href="#">Custom Menu</a></li>
											<li class="dropdown">
												<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
												<ul class="dropdown-menu multi-dropdown">
													<li><a href="#">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
													<li><a href="#">Custom Menu</a></li>
												</ul>
											</li>
											<li><a href="#">Custom Menu</a></li>
										</ul>
									</li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
									<li><a href="#">Custom Menu</a></li>
								</ul>
							</li>
							<li><a href="#">Portfolio</a></li>
							<li><a href="#">Contact Us</a></li>
						</ul>
					</div>
				</nav>
			</div>
		</div>
	</div>
</div>

页面的底部,需引入jQuery和bootstrap库、bootsnav.js文件,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>
最新交易
评论8
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

  • 头像 7楼
    04-20 10:59
    囊囊***13
    特效动态很流畅,而且是3级的 很好
  • 头像 6楼
    03-27 09:23
    若***见
    效果不错的,很喜欢。。。
  • 头像 5楼
    03-15 11:49
    木***偶
    很不错的效果,酷炫!!!
  • 头像 4楼
    03-12 09:22
    碘***钾
    居然在这发现这个了,我手写了一个,写了我一个星期,纯HTML css javascript垒起来的。
  • 头像 3楼
    01-03 08:11
    国***德
    有用的着的地方,直接用就行
  • 头像 板凳
    10-10 17:27
    道***道
    热爱源码,这个怎么做的啊
  • 头像 椅子
    09-27 14:17
    囊囊***13
    很好用 点赞!
  • 头像 沙发
    09-19 15:41
    i***友
    想要做一个基于html5的网站
1 2
如何中彩票 www.vn68.com-全球彩票开奖查询| www.014567.com-七星彩前四位预测| www.175561.com-福彩快三助手免费版| www.721944.com-网上玩快三挣钱吗| www.2642.pw-德国时时彩官方网站| www.34407.com-彩券公司官网| www.228442.com-彩礼退还细则| www.62929.com-彩客胜负过关| www.369830.com-彩票封机-| www.75ia.com-pp彩票是什么意思| www.652209.com-黄金8彩票网官网| www.773414.com-送彩金500的网站| www.933697.com-金冠彩票官方网站| www.id13.com-买彩票上瘾怎么戒| www.23763.cc-天天爱彩票微信提现| www.241996.com-七星彩一注得多少钱| www.367091.com-体彩竞彩平包括什么| www.562075.com-鑫彩团队计划| www.948432.com-体彩福利开奖结果| www.fh02.com-盈彩网9369cc| www.14bd.com-体育彩票竞彩违法吗| www.496.date-彩吧vip聊天室| www.721502.com-好彩平台是诈骗| www.836316.com-顺丰彩票网址| www.928338.com-旺彩平台11选5| www.986895.com-多款购彩app| www.cw08.com-原快三助手下载| www.ao03.com-网易彩票购彩平台| www.998858.cc-大乐透江苏体彩| www.on69.com-老彩民心得-| www.85vx.com-趋势王彩票下载| www.509262.com-香港旺角彩妹| www.22932.com-咋样计算下期彩票| www.276234.com-瓷母各种釉彩大瓶| www.468815.com-万彩办公大师安卓版| www.617269.com-延吉市黑彩票视频| www.767335.com-福彩3d定胆-| www.890119.com-牛彩3d字谜-| www.959337.com-258彩票官方网址| 网易彩票www.07163d.com| www.nz76.com-足彩奖金-| www.679073.com-彩票成瘾治疗| www.42205.com-大乐中奖彩票图片| www.670980.com-赢网彩票-| www.913077.com-彩客彩-| www.cai3902.com江苏e球彩开奖号码| www.i59.org-福彩微信公众号| www.555462.com-3d乐彩网折线图| www.632055.com-时时彩选号技巧| www.775395.com-彩票有多少位数| www.991687.com-彩吧vip邀请码| www.22ch.com-彩票更改数据端数据| www.ol78.com-中彩网七乐彩走势图| www.76988.com-我找体彩百度贴吧| www.416065.com-a7娱彩官网注册| www.542012.com-臻彩唇彩-| www.629281.com-咨询彩票-| www.754119.com-韩国有哪些彩票开奖| www.858923.com-彩票中奖信息查询| www.45ck.com-天下彩民彩图诗句| www.4lp.com-幸运分分彩软件| www.353222.com-668彩票网平台| www.201956.com-贵州快三推荐结果| www.379841.com-竞彩足球竞彩版| www.921816.com-江西彩礼多少| www.997493.com-时时彩源码-| www.db78.com-四亿彩票网站| www.xr89.com-福利彩票35期预测| www.23vx.com-微信里面怎么买彩票| www.0854.me-福彩扫码验奖| www.02173.com-乐彩网论谈手机版| www.385608.com-块3彩票-| www.907110.com-什么彩票是8位数| www.972651.com-彩铅画图片风景卡通| www.rf2.com-168彩票网靠谱吗| 新盈彩www.xinyc5.com| www.oq67.com-购彩票网众-| www.6pb.com-牛人彩票可以挣钱| www.72rs.com-约彩365苹果版| www.846070.com-中彩票怎么花| www.933052.com-快乐中彩票下载安装| www.990491.com-彩票游戏平台网站| www.ap52.com-吉林快三跨度表| www.21bu.cc-福利彩票电视哪个台| www.412384.com-彩钢条门头-| www.548941.com-彩票之家注册邀请码| www.314460.com-彩票最稳的打法| www.528681.com-四季彩票打码量不足| www.093735.com-体育彩票高频彩审批| www.748963.com-人人买彩票提现不了| www.gl07.com-快三套路教学分解| www.9048.xyz-七星彩18139期| www.87hg.com-9b彩票网址是多少| www.027110.com-87彩票店靠谱吗| www.125631.com-彩票最新开奖号| www.226698.com-88彩票app下载| www.307978.com-今晚七星彩号码| www.400455.com-小白彩票怎么推广| www.542347.com-购彩平台360彩票| www.726885.com-苹果网彩-| www.799691.com-彩金群-| www.p26.bid-体彩大乐透中奖公式| www.43mw.com-彩8争霸-| www.332700.cc-京彩江苏快三正规吗| www.068015.com-可以出票的假彩票机| www.404123.com-七星彩是不是有托| www.112701.com-时时彩亏损返现平台| www.560980.com-七乐彩5行6纵| www.655871.com-北京彩票店个人转让| www.836176.com-顺丰彩票-| www.026689.com-网上代买彩票合法不| www.121602.com-手机选彩票软件下载| www.209481.com-网上能彩票合买吗| www.929204.com-玩彩下载-| 凤凰vlllwww.fh52.com| www.5534.cc-速盈彩票下载安装| www.08066.cc-天下彩特彩吧喜中彩| www.68999.com-分分彩定位胆怎么玩| www.078857.com-七星彩计划-| www.680513.com-彩网上怎么买| www.836234.com-九龙中彩老板包料| www.926737.com-体彩61走势图| www.995567.com-彩票之家官方| www.bt11.com-玩彩网网站江苏快3| www.958832.com-彩票节后什么时开售| www.kb63.com-福彩3d开奖公告| www.7983.top-澳门博彩业一年收入| www.990512.com-众赢彩票登录| www.597569.com-彩票中奖如何纳税| www.700089.cc-福彩3d规则好复杂| www.772766.com-大发时时彩杀一码| www.860117.com-时时彩票下载网址| www.046168.com-288彩票软件| www.823889.com-三彩丽雪什么档次| www.915225.com-盈盈彩开户-| 大赢家彩票平台www.312660.com| www.650318.com-相亲博彩骗局| www.165872.com-芜湖福彩中心地址| www.3445.xyz-万发国际彩票游戏| www.572876.com-二四六天天好彩票| www.644114.com-体彩中奖最大金额| www.270119.com-彩六官方下载app| www.30he.com-打开令天彩票| www.98fc.com-百姓彩票网投是多少| www.635605.com-七彩阳光第三套广播| www.981564.com-老梁彩票双色球| www.169880.com-甘肃快3彩经| www.g22.top-彩票字谜解释| www.090699.com-2元的彩票能中多少| www.589071.com-中国福利彩票的种类| www.707657.com-大发快三回血群| www.809619.com-手机彩票犯法吗| www.912416.com-快三1.98的平台| www.986449.com-竞彩篮球开奖结果| www.h13.top-彩票大师官方版下载| www.595688.com-福彩兑奖中心在哪里| www.08jk.com-体彩试机号关注金码| www.586032.com-深圳中了彩票二等奖| www.288559.com-竞彩真正的国内高手| www.49cl.com-七彩礼品鲜花网| www.8684.cn-彩俐-| www.23929.cc-双色球新彩吧预测| www.29286.cc-彩客网手机版本| www.wc2.cc-彩经网排列3免费|