漂亮的导航栏 CSS

如果你正在寻找如何设计一个漂亮的导航栏，那么你来到了正确的地方！ 本文将介绍如何使用 CSS 创建一个漂亮、响应式的导航栏，并且包含代码示例，可以帮助你快速上手。

设计

在设计一个漂亮的导航栏之前，我们需要考虑一下需要什么。

我们的目标是设计一个简洁、易于使用的导航栏，满足以下要求：

• 响应式设计，适应各种屏幕分辨率
• 清晰的导航链接
• 悬停样式
• 手机端下拉式菜单与导航链接并存。

我们先来看一下采用的颜色和字体：

nav {
    font-family: "Open Sans", sans-serif;
    background-color: #1f1f1f;
    color: #bbb;
}

a {
    color: #bbb;
}

接下来，我们考虑如何布置导航链接。

横向导航

如果你使用的是横向导航，你可以这样设计：

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

nav li {
    display: inline-block;
    margin: 0 10px;
}

nav a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

nav a:hover {
    color: #fff;
}

垂直导航

如果你使用的是垂直导航，你可以这样设计：

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

nav li {
    margin: 0;
}

nav a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

nav a:hover {
    color: #fff;
}

下拉式菜单

下拉式菜单的设计需要一些额外的 CSS 和 JavaScript。你需要使用 position: relative 将下拉菜单相对于其父元素进行定位，使用 display: none 来隐藏下拉菜单，使用 display: block 来显示下拉菜单。

nav li {
    position: relative;
}

nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 999;
}

nav ul li:hover > ul {
    display: block;
}

HTML 结构

一旦你设计好了 CSS，你需要将其结合 HTML 代码实现。你可以使用以下 HTML 结构：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">SEO</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

完整代码

完整的 CSS 和 HTML 代码如下：

nav {
    font-family: "Open Sans", sans-serif;
    background-color: #1f1f1f;
    color: #bbb;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
}

nav a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

nav a:hover {
    color: #fff;
}

nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 999;
}

nav ul li:hover > ul {
    display: block;
}

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">SEO</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

现在你已经掌握了如何设计漂亮的导航栏的技巧了！