时间：2021-07-01 10:21:17 帮助过：46人阅读
一。普通导航栏
对于这种普通的导航栏，只是鼠标滑过的时候颜色会变，所以思路变得很简单。
（1）使用ul标签布局
（2）鼠标经过事件
<div id="demo1"> <ul> <li>Homeli> <li>Contentli> <li>Serviceli> <li>Teamli> <li>Contactli> 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; }
（二）括号类导航栏
对于导航栏的排版这里就不多说了，可以看到当鼠标经过的时候会从文字中出现括号，思路：
（1）当无鼠标经过事件时，括号其实是有的，只不多它处于隐形状态在文字中间
（2）当鼠标经过时，括号从中间移动到两边，并且从隐形变为显示。
<div id="demo2"> <ul> <li><a href="#">Homea>li> <li><a href="#">Contenta>li> <li><a href="#">Servicea>li> <li><a href="#">Teama>li> <li><a href="#">Contacta>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); }
三。滑动导航栏
从演示效果来看要注意两点
（1）鼠标经过时有横向从上到下
（2）鼠标经过时文字从上到下并且变换颜色
这就和上一个例子很像了
（1）横线其实是存在的，只不过鼠标没有经过时是在文字上方且透明的，鼠标经过时横线由上到下。
（2）文字这里就要定义一个动画了，因为在鼠标经过时它体现了三种状态：
①文字从现位置划下
②文字从出现在上方
③文字从上方滑到现位置
<div id="demo3"> <ul> <li><a href="#"><span>Homespan>a>li> <li><a href="#"><span>Contentspan>a>li> <li><a href="#"><span>Servicespan>a>li> <li><a href="#"><span>Teamspan>a>li> <li><a href="#"><span>Contactspan>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ㄒ)/~~ 不过自己编译的话在浏览器里是正常的