今天主要利用hover选择器。鼠标滑过查看效果。
一。普通导航栏
HomeContentServiceTeamContact
对于这种普通的导航栏，只是鼠标滑过的时候颜色会变，所以思路变得很简单。
（1）使用ul标签布局
（2）鼠标经过事件
<div id="demo1"><ul><li>Home</li><li>Content</li><li>Service</li><li>Team</li><li>Contact</li></ul></div>
*{padding:0;margin:0;list-style:none;text-decoration:none;}a{color:#fff;}#demo1{width:600px;}#demo1 ul li{float:left;width:100px;height:50px;text-align:center;background:#ccc;line-height:50px;color:#FFF;}#demo1 ul li:hover{background:#999;}
（二）括号类导航栏
HomeContentServiceTeamContact
对于导航栏的排版这里就不多说了，可以看到当鼠标经过的时候会从文字中出现括号，思路：
（1）当无鼠标经过事件时，括号其实是有的，只不多它处于隐形状态在文字中间
（2）当鼠标经过时，括号从中间移动到两边，并且从隐形变为显示。
<div id="demo2"><ul><li><a href="#">Home</a></li><li><a href="#">Content</a></li><li><a href="#">Service</a></li><li><a href="#">Team</a></li><li><a href="#">Contact</a></li></ul></div>
#demo2{width:600px;height:50px;margin:20px auto;}#demo2 ul li{position:relative;float:left;width:100px;height:50px;text-align:center;line-height:50px;background:#000;}#demo2 ul li a:before{content:"[";margin-right:10px;transform:translateX(20px);-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);}#demo2 ul li a:after{content:"]";margin-left:10px;transform:translateX(-20px);-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);}#demo2 ul li a:before,#demo2 ul li a:after{display:inline-block;opacity:0;transition:transform 0.3s, opacity 0.2s;-moz-transition:transform 0.3s, opacity 0.2s;-webkit-transition:transform 0.3s, opacity 0.2s;-ms-transition:transform 0.3s, opacity 0.2s;}#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {opacity: 1;-webkit-transform: translateX(0px);-moz-transform: translateX(0px);transform: translateX(0px);}
三。滑动导航栏
HomeContentServiceTeamContact
从演示效果来看要注意两点
（1）鼠标经过时有横向从上到下
（2）鼠标经过时文字从上到下并且变换颜色
这就和上一个例子很像了
（1）横线其实是存在的，只不过鼠标没有经过时是在文字上方且透明的，鼠标经过时横线由上到下。
（2）文字这里就要定义一个动画了，因为在鼠标经过时它体现了三种状态：
①文字从现位置划下
②文字从出现在上方
③文字从上方滑到现位置
<div id="demo3"><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Content</span></a></li><li><a href="#"><span>Service</span></a></li><li><a href="#"><span>Team</span></a></li><li><a href="#"><span>Contact</span></a></li></ul></div>
#demo3 ul li{float:left;margin:0 25px;position:relative;}#demo3 ul li a{color:#D8761E;font-family:'Righteous', cursive;display:block;padding:10px 0;}#demo3 ul li span{display:block;}#demo3 ul li a:before{content:"";position:absolute;width:100%;height:3px;background:#D8761E;bottom:0;opacity:0;-webkit-transform: translate3d(0, -40px, 0);transform: translate3d(0, -40px, 0);-webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;transition: transform 0s 0.3s, opacity 0.2s;}#demo3 ul li a:hover::before{opacity:1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform 0.5s, opacity 0.1s;transition: transform 0.5s, opacity 0.1s;-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }#demo3 ul li a:hover span{color:#510301;-webkit-animation: anim-francisco 0.3s forwards;animation: anim-francisco 0.3s forwards;}@-webkit-keyframes anim-francisco {50% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}51% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}@keyframes anim-francisco {50% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}51% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
这里注意的是不能给标签设置宽高，因为一旦设置宽高会影响文字滑动路线，变得很夸张。这里加span也是这个原因，鼠标经过a时让span以a为参照进行滑动。
里面的标签就不解释了，自己查效果会更好哦。
我好无奈呀，用这个显示效果a标签和li的默认样式竟然不能取消，谁能告诉我为什么/(ㄒoㄒ)/~~ 不过自己编译的话在浏览器里是正常的。
