前端技巧集：导航栏全解析

导航栏是网页中非常普遍的一个组件，今天一步步教大家如何做个导航栏。一般导航栏是使用无序列表实现的(ul+li)，看看下面的无序列表是不是非常像导航栏呢？

 

        
精选
        
女装
        
鞋包
        
男士
        
运动
        
饰品
        
美妆
        
母婴
        
居家
        
国际
        
生活
        
预告
 

先给ul加上border,便于查看元素的大小情况。

border: 1px solid gray;

一、两步把无序列表变垂直导航栏

1. 清除ul样式

  list-style: none;
  padding-left:0;

2. 把ul的display改为inline-block

display : inline-block;

看看，是不是垂直导航栏基本样式已经出来了。

二、美化垂直导航栏

大体的样子出来了，但是看上去比较紧凑。我们一起美化一下吧。

1. 把ul的内边距调整一下

  padding:10px;

2. 给li的内边距调整一下

  padding:10px;

3. 把ul的边框加上圆角
   看上去导航栏比较生硬，我们加个圆角润色一下。

  border-radius: 5px;

4. 给li加上:hover特效

li:hover {
    background-color : #f5f5f5;
    cursor:pointer;
}

5. 给li加上:hover特效加上圆角
   背景还是比较生硬，我们用同样的方式润滑一下。

  border-radius: 5px;

6. 给li加上:hover特效加上白色字体
   背景色与字体颜色比较接近，看不清。我们把字体颜色设成白色，并且加粗。

color: #fff;
font-weight: bold;

我们的垂直导航栏基本上完成了，简单吧。大家试一下。

三、代码

垂直导航栏的代码一栏，如下所示：

        ul {
            border: 1px solid gray;
            list-style: none;
            padding-left: 0;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        
        li {
            padding: 10px;
        }
        
        li:hover {
            background-color: #999;
            cursor: pointer;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
        }

四、垂直导航栏秒变水平导航栏

把li的display改为inline-block，垂直导航栏秒变水平导航栏。

我们把浏览器的窗口变小，水平导航栏居然换行了。

这显然不是我们需要的。如何不让水平导航栏换行呢？只要加上ul加上一个white-space属性，属性值为不换行nowrap，就可以了。

white-space:nowrap;

看是不是水平导航栏成了一行了，浏览器还加上了水平滚动条。

通常的还有一个办法是设置导航栏的高度，并且需要把overflow设置为hidden，让导航栏超出部分隐藏。在ul加上如下代码：

  height: 40px;
  overflow: hidden;

---

如有问题请留言；如有帮助请点赞。