CSS 导航栏

导航栏

对于任何网站而言，易于使用的导航都很重要。使用CSS，您可以将枯燥的HTML菜单转换为美观的导航栏。

导航栏 - 链接列表

导航栏需要标准HTML作为基础。在我们的示例中，我们将从标准HTML列表构建导航栏。导航栏基本上是一个链接列表，因此使用<ul>和<li>元素非常有意义：

<ul>
                          <li><a href="#home">主页</a></li>
                          <li><a href="#news">新闻</a></li>
                          <li><a href="#contact">联系方式</a></li>
                          <li><a href="#about">关于我们</a></li>
                        </ul>

尝试一下

现在让我们从列表中删除项目符号以及边距和填充：

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

尝试一下

示例说明：

list-style-type: none; - 移除子弹。导航栏不需要列表标记
设置margin : 0;并padding : 0; 删除浏览器默认设置

上例中的代码是垂直和水平导航栏中使用的标准代码。

垂直导航栏

要构建垂直导航栏，除了上面的代码之外，您还可以在列表中设置<a>元素的样式：

li a {
                          display: block;
                          width: 60px;
                        }

尝试一下

示例说明：

display: block; - 将链接显示为块元素使整个链接区域可单击（而不仅仅是文本），并允许我们指定宽度（以及填充，边距，高度等，如果需要）
width: 60px; - 块元素默认占用可用的全宽。我们想要指定60像素的宽度

您还可以设置<ul>的宽度，并删除<a>的宽度，因为当显示为块元素时，它们将占用可用的全宽。这将产生与前一个示例相同的结果：

ul {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          width: 60px;
                        }

                        li a {
                          display: block;
                        }

尝试一下

创建一个灰色背景颜色的基本垂直导航栏，并在用户将鼠标移到它们上方时更改链接的背景颜色：

ul {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          width: 200px;
                          background-color: #f1f1f1;
                        }

                        li a {
                          display: block;
                          color: #000;
                          padding: 8px 16px;
                          text-decoration: none;
                        }

                        /* 在悬停时更改链接颜色 */
                        li a:hover {
                          background-color: #555;
                          color: white;
                        }

尝试一下

当前导航链接

在当前链接中添加“active”类，让用户知道他/她所在的页面：

.active {
                          background-color: #4CAF50;
                          color: white;
                        }

尝试一下

链接居中和添加边框

添加text-align:center到<li>或<a>以使链接居中。将border属性添加到<ul>在导航栏周围添加边框。如果您还想在导航栏中添加边框，请border-bottom向所有<li>元素添加一个，但最后一个元素除外：

ul {
                          border: 1px solid #555;
                        }

                        li {
                          text-align: center;
                          border-bottom: 1px solid #555;
                        }

                        li:last-child {
                          border-bottom: none;
                        }

尝试一下

全高固定垂直导航栏

创建一个全高，“粘性”的侧面导航：

ul {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          width: 25%;
                          background-color: #f1f1f1;
                          height: 100%; /* 全高 */
                          position: fixed; /* 即使在滚动时也要固定 */
                          overflow: auto; /* 如果sidenav有太多内容，则启用滚动 */
                        }

尝试一下

注意：此示例可能无法在移动设备上正常运行。

水平导航栏

有两种方法可以创建水平导航栏。使用内联或浮动列表项。

内联列表项

构建水平导航栏的一种方法是将<li>元素指定为内联，除了上面的“标准”代码：

li {
                          display: inline;
                        }

尝试一下

示例说明：display: inline; - 默认情况下，<li>元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，以在一行上显示它们

浮动列表项

另一种创建水平导航栏的方法是浮动<li>元素，并指定导航链接的布局：

li {
                          float: left;
                        }

                        a {
                          display: block;
                          padding: 8px;
                          background-color: #dddddd;
                        }

尝试一下

示例说明：

float: left; - 使用float来使块元素彼此相邻滑动
display: block; - 将链接显示为块元素使整个链接区域可单击（不仅仅是文本），它允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
padding: 8px; - 由于块元素占用了可用的全宽度，因此它们不能彼此相邻浮动。因此，请指定一些填充以使其看起来很好
background-color: #dddddd; - 为每个元素添加灰色背景颜色

提示：如果需要全角背景颜色，请将背景颜色添加到≪ul>而不是每个<a>元素：

ul {
                          background-color: #dddddd;
                        }

尝试一下

水平导航栏示例

创建一个深色背景颜色的基本水平导航栏，并在用户将鼠标移到它们上方时更改链接的背景颜色：

ul {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          overflow: hidden;
                          background-color: #333;
                        }

                        li {
                          float: left;
                        }

                        li a {
                          display: block;
                          color: white;
                          text-align: center;
                          padding: 14px 16px;
                          text-decoration: none;
                        }

                        li a:hover {
                          background-color: #111;
                        }

尝试一下

当前导航链接

在当前链接中添加“active”类，让用户知道他/她所在的页面：

.active {
                          background-color: #4CAF50;
                        }

尝试一下

右对齐链接

通过将列表项浮动到右侧（float:right;）来右对齐链接：

ul {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          overflow: hidden;
                          background-color: #333;
                        }

                        li {
                          float: left;
                        }

                        li a {
                          display: block;
                          color: white;
                          text-align: center;
                          padding: 14px 16px;
                          text-decoration: none;
                        }

                        li a:hover:not(.active) {
                          background-color: #111;
                        }

                        .active {
                          background-color: #4CAF50;
                        }

尝试一下

边境分隔线

将border-right属性添加到<li>以创建链接分隔符：

<ul>
                          <li><a href="#home">主页</a></li>
                            <li><a href="#news">新闻</a></li>
                            <li><a href="#contact">联系方式</a></li>
                          <li style="float:right"><a href="#about">关于我们</a></li>
                        </ul>

尝试一下

固定导航栏 - 固定顶部

ul {
                          position: fixed;
                          top: 0;
                          width: 100%;
                        }

尝试一下

如果是要固定顶部，把top改成bottom

注意：固定位置可能无法在移动设备上正常工作。

灰色水平导航栏

灰色水平导航栏的示例，带有浅灰色边框：

ul {
                          border: 1px solid #e7e7e7;
                          background-color: #f3f3f3;
                        }

                        li a {
                          color: #666;
                        }

尝试一下

响应导航栏

如何使用CSS媒体查询来创建响应式导航。

@media screen and (max-width: 600px) {
                          ul.topnav li.right,
                          ul.topnav li {float: none;}
                        }

尝试一下

下拉导航栏

如何在导航栏中添加下拉菜单。

.dropdown-content {
                          display: none;
                          position: absolute;
                          background-color: #f9f9f9;
                          min-width: 160px;
                          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                          z-index: 1;
                        }

尝试一下

导航栏

导航栏 - 链接列表

垂直导航栏

当前导航链接

全高固定垂直导航栏

水平导航栏

内联列表项

浮动列表项

水平导航栏示例

当前导航链接

右对齐链接

边境分隔线

固定导航栏 - 固定顶部

灰色水平导航栏

响应导航栏

下拉导航栏

相关页面