bookstrap的nav标签

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>

显示大概的导航样式

旋转的箭头所在地，移动端的时候菜单栏显示

移动端的时候有页面右移特效，背景颜色，字体的颜色大小设置

导航栏细化描写

下拉菜单栏的显示与消失，过渡动画

这几天没有白做，很累，但是终于把别人总结好的东西钻研了一下，变成了自己的东西，算然还欠火候，但我在努力！

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,258评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,335评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,225评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,126评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,140评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,098评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,018评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,857评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,298评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,518评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,400评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,993评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,638评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,661评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352

bookstrap的nav标签

推荐阅读更多精彩内容