以下是 Bootstrap遮罩移动导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap遮罩移动导航菜单代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/hoverifyBootnav.css">
<style type="text/css">.separator { margin-bottom: 20px;}</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 label ">
<h1 style="margin: 10px 0;">Examples</h1>
</div>
</div>
<br><br>
<div class="row">
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-tabs" data-hbn data-hbn-options='{ "duration_effect_on" : 700, "duration_effect_off" : 1000}'>
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">jQuery特效</a></li>
<li role="presentation"><a href="#">CSS3特效</a></li>
<li role="presentation"><a href="#">站长之家</a></li>
</ul>
</div>
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-pills" >
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">jQuery特效</a></li>
<li role="presentation"><a href="#">CSS3特效</a></li>
<li role="presentation"><a href="#">站长之家</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-tabs nav-stacked" style="max-width: 300px;">
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">jQuery特效</a></li>
<li role="presentation"><a href="#">CSS3特效</a></li>
<li role="presentation" ><a href="#">站长之家</a></li>
</ul>
</div>
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">jQuery特效</a></li>
<li role="presentation"><a href="#">CSS3特效</a></li>
<li role="presentation"><a href="#">站长之家</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<div class="separator col-xs-12 col-sm-6">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">标题</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/hoverifyBootnav.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
JS代码(init.js):
$(function(){
$('ul.nav').hoverifyBootnav({
'duration_effect_on':400,'duration_effect_off':1000,'color':'black'}
);
}
);
CSS代码(hoverifyBootnav.min.css):
.hoverboot-wrap{position:relative;display:table;margin-top:15px}
ul.hoverboot{position:relative;z-index:2}
ul.hoverboot>.active>a{background:inherit;border:inherit;color:inherit;border-radius:inherit}
ul.hoverboot>li.active>a:hover,ul.hoverboot>li>a:hover{background:inherit;border-color:transparent;color:inherit}
.hoverboot-pill{position:absolute;z-index:1;margin-left:2px}
ul.hoverboot.hoverboot-cadre+.hoverboot-pill{background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}
ul.nav-stacked.hoverboot.hoverboot-cadre+.hoverboot-pill{background-color:#fff;border:1px solid #ddd}
ul.hoverboot.hoverboot-pills+.hoverboot-pill{background-color:#337ab7;border-radius:4px}
CSS代码(zzsc.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
