Web元素设计之导航菜单

1. 横向导航菜单

---

导航菜单实际上相当于一个列表，自然地，我们可以选择HTML中的列表元素ul来进行实现：

HTML ↓：

    
首页
    
探索
    
观察
    
解密
    
关于

ul本身是一个块级元素，其中包含的列表项li同样也是块级元素。所以要实现横向菜单，我们需要使用到浮动，使得列表项li在同一行依次排列。此外，无序列表ul默认会在每个列表项前带一个小圆点，我们需要通过list-style将其取消掉。还有关键的一点就是，我们通过超链接a来实现可点击的菜单项，但由于a本身是行内元素，所以我们需要将其设置为块级元素使得可以方便地设置宽高和边距等：

CSS ↓：

#nav{
    height:26px;
    list-style: none; /*取消列表项前默认的小圆点*/
    border-bottom: 2px solid #2788da;
}
#nav li{
    float: left; /*浮动列表项，使其成为一个个横向布局的容器*/
}
#nav li a{
    color: #000;
    text-decoration: none; /*取消超链接默认的下划线*/
    padding-top: 4px;
    display: block; /*更改为块级元素以设置宽高、边距*/
    width: 97px;
    height:22px;
    text-align: center;
    background-color: #ececec;
    margin-left: 1px;
}
#nav li a:hover{
    background-color: #bbb;
    color: #fff;
}
#nav li a.current{
    background-color: #2788da;
    color: #fff;
}

效果如下 ↓：

横向菜单

最后的工作，就是添加JS交互使得菜单拥有切换效果：

JavaScript：

var nav = document.getElementById('nav');
nav.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        for (var i = 0; i < this.children.length; i++) {
            var element = this.children[i].children[0];
            element.removeAttribute('class');
        }
        e.target.className = 'current';
    }
});

2. 纵向导航菜单

---

实现方式一：直接使用h1~h6构造

HTML ↓：

    
CSS
        
基础
        
进阶
        
实战
    
HTML
        
基础
        
进阶
        
实战
    
JS
        
基础
        
进阶
        
实战

CSS ↓：

#category{
    width: 100px;
    border-color: #c5c6c4;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
#category h1,#category h2{
    text-align: center;
    margin: 0;
    padding: 5px;
    font-size: 12px;
}
#category h1{
    border-top: 1px solid #c5c6c4;
    background-color: #f4f4f4;
}
#category h2{
    font-weight: normal;
}
#category h2:hover{
    cursor: pointer;
    background-color: #ececec;
}

效果如下 ↓：

用h1等标题元素实现的纵向菜单

实现方式二：和横向菜单一样使用ul元素构造

HTML ↓：

    
CSS
    
基础
    
进阶
    
实战
    
HTML
    
基础
    
进阶
    
实战
    
JS
    
基础
    
进阶
    
实战

CSS ↓：

#category{
    width: 100px;
    border-color: #c5c6c4;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
#category li{
    text-align: center;
    padding: 5px 0;
}
#category li.parent{
    border-top: 1px solid #c5c6c4;
    border-bottom: 1px solid #c5c6c4;
    background-color: #f4f4f4;
    font-weight: bold;
}
#category li:not(.parent):hover{
    cursor: pointer;
    background-color: #ececec;
}

效果如下 ↓：

用ul实现的纵向菜单

3. 横向下拉菜单

有了横向菜单的实现基础，现在其实只要对需要的部分添加相应列表就可以实现下拉菜单了。

HTML ↓：

    

        首页
    
    

        探索
        

            
Explore
            
Explore
        
    
    

        观察
        

            
Observation
            
Observation
        
    
    

        解密
        

            
Decrypt
            
Decrypt
        
    
    

        关于
        

            
Corporation
            
Team
        
    

CSS ↓：

#nav{
    height:26px;
    list-style: none; /*取消列表项前默认的小圆点*/
    border-bottom: 2px solid #2788da;
}
#nav li{
    width: 130px;
    float: left; /*浮动列表项，使其成为一个个横向布局的容器*/
}
#nav li a.top-a{
    color: #000;
    text-decoration: none; /*取消超链接默认的下划线*/
    padding-top: 4px;
    display: block; /*更改为块级元素以设置宽高、边距*/
    width: 130px;
    height:22px;
    text-align: center;
    background-color: #ececec;
    margin-left: 1px;
}
#nav li a:hover{
    background-color: #bbb;
    color: #fff;
}
ul#nav li ul.inner-ul{
    list-style: none;
}
ul#nav li ul.inner-ul li{
    text-align: center;
}
ul#nav li ul.inner-ul{
    display: none;
}
ul#nav li:hover ul.inner-ul{
    display: block; /*这里的选择器是关键*/
}
ul#nav li ul.inner-ul a{
    display: block;
    width:130px;
    height:22px;
    text-decoration: none;
    background-color: #ececec;
}
ul#nav li ul.inner-ul a:hover{
    background-color: #bbb;
}

效果如下 ↓：

横向下拉菜单

4. 纵向弹出菜单

使用上面横向下拉菜单的HTML结构，只通过CSS的改变就能轻松实现纵向弹出菜单。考虑到弹出菜单可能会发生层叠以及每个弹出菜单应该相对于其父级菜单定位，因此可以结合使用position:relative和position:absolute进行实现。

CSS ↓：

ul{
    list-style: none;
    width: 130px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    background-color: #ececec;
}
ul a{
    text-decoration: none;
}
ul#nav li{
    position: relative;
    text-align: center;
}
ul#nav li:hover{
    background-color:#fff;
}
li ul{
    position: absolute; /*相对于父级菜单进行定位*/
    left: 129px;
    top: 0;
    display: none;
}
li ul a{
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
}
ul#nav li:hover ul{
    display: block;
}

效果如下 ↓：

纵向弹出菜单