Web元素设计之导航菜单

1. 横向导航菜单

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

HTML ↓：

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#" class="current">探索</a></li>
    <li><a href="#">观察</a></li>
    <li><a href="#">解密</a></li>
    <li><a href="#">关于</a></li>
</ul>

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 ↓：

<div id="category">
    <h1>CSS</h1>
        <h2>基础</h2>
        <h2>进阶</h2>
        <h2>实战</h2>
    <h1>HTML</h1>
        <h2>基础</h2>
        <h2>进阶</h2>
        <h2>实战</h2>
    <h1>JS</h1>
        <h2>基础</h2>
        <h2>进阶</h2>
        <h2>实战</h2>
</div>

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 ↓：

<ul id="category">
    <li class="parent">CSS</li>
    <li>基础</li>
    <li>进阶</li>
    <li>实战</li>
    <li class="parent">HTML</li>
    <li>基础</li>
    <li>进阶</li>
    <li>实战</li>
    <li class="parent">JS</li>
    <li>基础</li>
    <li>进阶</li>
    <li>实战</li>
</ul>

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 ↓：

<ul id="nav">
    <li>
        <a class="top-a" href="#">首页</a>
    </li>
    <li>
        <a class="top-a" href="#">探索</a>
        <ul class="inner-ul">
            <li><a href="#">Explore</a></li>
            <li><a href="#">Explore</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">观察</a>
        <ul class="inner-ul">
            <li><a href="#">Observation</a></li>
            <li><a href="#">Observation</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">解密</a>
        <ul class="inner-ul">
            <li><a href="#">Decrypt</a></li>
            <li><a href="#">Decrypt</a></li>
        </ul>
    </li>
    <li>
        <a class="top-a" href="#">关于</a>
        <ul class="inner-ul">
            <li><a href="#">Corporation</a></li>
            <li><a href="#">Team</a></li>
        </ul>
    </li>
</ul>

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;
}

效果如下 ↓：

纵向弹出菜单
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4赞 61
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1赞 92
  • 好兄弟是需要珍惜的
    爱情是需要经过三年之痛，七年之痒的，而兄弟之间的感情，也是需要磨练的，需要珍惜的。 我和曾经的一个好兄弟Z，我...
    金勇的小屋阅读 245评论 0赞 0
  • 猫为什么遇到敌人时会炸毛弓背？
    猫为什么遇到敌人时会炸毛弓背？最近读了《牛奶可乐经济学》才知道。当双方存在信息不对称的情况时，唯有通过难以造假的信...
    多多是只猫阅读 3,075评论 0赞 1
  • 人和
    乌云下的地铁站 大雨浇不灭人群的噪杂 黑车司机菠萝菠萝蜜一样的拉客 大婶如脱口秀一样叫卖着雨伞 雨刮刷着 车却堵着...
    勒普兰斯阅读 252评论 0赞 0