关于导航

导航是一个网站必不可少的组件。把自己在学习制作导航过程中的经验做个总结。

html代码很简单,就是一个无序列表〈ul〉：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
   </ul>
</nav>

剩下的就看css的了。如果想要一个垂直导航栏，这个比水平的要少几句代码。因为无序列表默认是垂直方向的。

最后效果

*{
    margin:0;
    padding:0;
}
nav{
    margin:10px;
    width:150px;
    border-radius:5px;
    background:#FF6600;
    -webkit-box-shadow:5px 5px 10px rgba(0,0,0,0.7);
    box-shadow:5px 5px 10px rgba(0,0,0,0.7);
    overflow:hidden; /*因为在设置a:hover的时候加了一个border属性，所以有可能会溢出，当然也可以通过box-sizing:border-box;属性来解决。而且如果有2级菜单的时候则必须用后者来防止溢出*/
}
ul{
    list-style:none;
    text-align:center;
}
a{
    display:block;
    text-decoration:none;
    color:white;
    padding:5px 0;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
li+li{
    border-top:1px solid white;
}
li:first-child{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
li:last-child{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
a:hover{
    background:white;
    color:#FF6600;
    border-left:10px solid #FF6600;
}

demo请看这里

 

水平导航栏则需要一个float属性或者是display:inline-block；的属性, 根据情况来二选一吧。自己的经验是：

如果导航项要居中的话，就用display:inline-block；因为这样你只需要设置一个text-align:center;就居中了。其他情况两者都可以。

结果看这里

代码看这里