Web元素设计之导航菜单

作者: 查查查查查查克 | 来源:发表于2017-01-10 11:42 被阅读182次

Web元素设计之导航菜单
Bootstrap-导航菜单-2018.07.07
1.3 界面元素
移动应用UI设计模式图示
仿掘金项目顶部导航
uikit 导航
Web导航设计
Bootstrap - 导航2
第38周+《交互设计 - 常用导航控件集》+林灿业+新学霸社群
UI组件——面包屑简介

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

效果如下 ↓：

纵向弹出菜单