navbar-default 白框
navbar-inverse 黑框
navbar-header 最开头的，可以设置其换页的时候变成聚焦点
collapse navbar-collapse be-example-navbar-collapse-1 引用后边的-1数字不知道什么意思，改变后对整个导航栏没有什么影响
nav navbar-nav <li>标签可以直接应用，并且响应式，
dropdown下拉菜单 mean，对于下拉菜单有很多样式，学会了代码，但是不会应用到bookstrap中
/*------------- menu1 animation -------------------*/
#menu1 li:first-of-type {
animation: menu1 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}
#menu1 li:nth-of-type(2) {
animation: menu1 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
#menu1 li:nth-of-type(3) {
animation: menu1 0.3s ease-in-out forwards;
animation-delay: 0.9s;
}
#menu1 li:last-of-type {
animation: menu1 0.3s ease-in-out forwards;
animation-delay: 1.2s;
}
@keyframes menu1 {
from {
opacity: 0;
transform: translateX(30px) rotateY(90deg);
}
to {
opacity: 1;
transform: translateX(0) rotateY(0);
}
}
/*------------- menu2 animation -------------------*/
.main li:hover .menu2 li:first-of-type {
animation: menu2 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}
.main li:hover .menu2 li:nth-of-type(2) {
animation: menu2 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
.main li:hover .menu2 li:nth-of-type(3) {
animation: menu2 0.3s ease-in-out forwards;
animation-delay: 0.9s;
}
.main li:hover .menu2 li:last-of-type {
animation: menu2 0.3s ease-in-out forwards;
animation-delay: 1.2s;
}
@keyframes menu2 {
0% {
opacity: 0;
transform: scale(0.7);
}
50% {
opacity: 0.5;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*------------- menu3 animation -------------------*/
.main li:hover .menu3 li:first-of-type {
animation: menu3 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}
.main li:hover .menu3 li:nth-of-type(2) {
animation: menu3 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
.main li:hover .menu3 li:nth-of-type(3) {
animation: menu3 0.3s ease-in-out forwards;
animation-delay: 0.9s;
}
.main li:hover .menu3 li:last-of-type {
animation: menu3 0.3s ease-in-out forwards;
animation-delay: 1.2s;
}
@keyframes menu3 {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*------------- menu4 animation -------------------*/
.main li:hover .menu4 li:first-of-type {
animation: menu4 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}
.main li:hover .menu4 li:nth-of-type(2) {
animation: menu4 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
.main li:hover .menu4 li:nth-of-type(3) {
animation: menu4 0.3s ease-in-out forwards;
animation-delay: 0.9s;
}
.main li:hover .menu4 li:last-of-type {
animation: menu4 0.3s ease-in-out forwards;
animation-delay: 1.2s;
}
@keyframes menu4 {
0% {
opacity: 0;
transform: translateX(50px) rotate(-90deg);
}
100% {
opacity: 1;
transform: translateX(0) rotate(0);
}
}
/*------------- menu5 animation -------------------*/
.main li:hover .menu5 li:first-of-type {
animation: menu5 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}
.main li:hover .menu5 li:nth-of-type(2) {
animation: menu5 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
.main li:hover .menu5 li:nth-of-type(3) {
animation: menu5 0.3s ease-in-out forwards;
animation-delay: 0.9s;
}
.main li:hover .menu5 li:last-of-type {
animation: menu5 0.3s ease-in-out forwards;
animation-delay: 1.2s;
}
@keyframes menu5 {
0% {
opacity: 0;
transform: rotateX(-90deg);
}
100% {
opacity: 1;
transform: rotateX(0);
}
}
/*------------- menu6 animation -------------------*/
.main li:hover .menu6 li:first-of-type {
animation: menu6 0.3s ease-in-out forwards;
animation-delay: 0.2s;
}
.main li:hover .menu6 li:nth-of-type(2) {
animation: menu6 0.3s ease-in-out forwards;
animation-delay: 0.4s;
}
.main li:hover .menu6 li:nth-of-type(3) {
animation: menu6 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}
.main li:hover .menu6 li:last-of-type {
animation: menu6 0.3s ease-in-out forwards;
animation-delay: 0.8s;
}
@keyframes menu6 {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* my button style */
.white-mode {
text-decoration: none;
padding: 7px 10px;
background-color: #122;
border-radius: 3px;
color: #fff;
transition: 0.35s ease-in-out;
position: absolute;
left: 15px;
bottom: 15px;
font-family: sans-serif;
}
.white-mode:hover {
background-color: #fff;
color: #122;
}
navbar-brand可以让字号变大，变成重点
bootsnav是一个很神奇的js
<!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>基于bootsnav的简洁多级导航菜单|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
<style type="text/css">
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;
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>
</head>
<body>
<div class="htmleaf-container">
<div class="demo">
<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="#">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>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>
</body>
</html>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
显示大概的导航样式
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
旋转的箭头所在地，移动端的时候菜单栏显示
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
移动端的时候有页面右移特效，背景颜色，字体的颜色大小设置
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
导航栏细化描写
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
下拉菜单栏的显示与消失，过渡动画
<script type="text/javascript" src="js/bootsnav.js"></script>
这几天没有白做，很累，但是终于把别人总结好的东西钻研了一下，变成了自己的东西，算然还欠火候，但我在努力！
网友评论