CSS - 导航栏：网站导航的大门

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，进入CSS导航栏的世界。作为你友好的计算机老师邻居，我将引导你了解这个网页设计的核心部分。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们开始吧！

CSS - Navbar

导航栏是什么？

在开始编码之前，让我们先了解一下导航栏是什么。想象你在一个巨大的图书馆里。你怎么找到你想要的书籍？你使用标识和目录，对吧？那么，导航栏对于网站来说就像这样。它是一组链接，帮助用户轻松地在你的网站上移动。

现在，让我们看看不同类型的导航栏以及如何使用CSS创建它们。

CSS 水平导航栏

水平导航栏可能是你在网站上看到的最常见的类型。它就像页面顶部的按钮行。

这里有一个简单的例子：

<ul class="navbar">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>

这是让它在视觉上更美观的CSS代码：

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

.navbar li {
float: left;
}

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

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

让我们分解一下：

我们使用 list-style-type: none; 移除列表的子弹点
我们使用 float: left; 使列表项水平排列
我们将链接样式化为按钮
我们添加了一个悬停效果以使其具有交互性

CSS 垂直导航栏

有时，你可能希望导航栏是垂直的，特别是在移动设备或侧边栏上。下面是如何做到这一点：

<ul class="vertical-navbar">
<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>

CSS代码如下：

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

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

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

这里的主要区别是我们没有浮动列表项。相反，我们为整个导航栏设置了一个宽度，并让列表项自然堆叠。

CSS 下拉导航栏

现在，让我们添加一些花哨的下拉菜单！这对于组织子分类非常棒。

<ul class="navbar">
<li><a href="#home">首页</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">产品</a>
<div class="dropdown-content">
<a href="#">笔记本电脑</a>
<a href="#">平板电脑</a>
<a href="#">智能手机</a>
</div>
</li>
<li><a href="#contact">联系</a></li>
</ul>

CSS代码如下：

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

.navbar li {
float: left;
}

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

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

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

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

这个CSS使用了 :hover 伪类来在用户悬停在“产品”链接上时显示下拉内容。

CSS 固定导航栏

固定导航栏即使在滚动时也保持在原位。它就像一个始终在你需要时出现的私人导游。

要使导航栏固定，我们只需在CSS中添加一行：

.navbar {
/* ... 其他样式 ... */
position: fixed;
top: 0;
width: 100%;
}

这会使导航栏始终在屏幕顶部。

CSS 粘性导航栏

粘性导航栏与固定导航栏类似，但它仅在滚动过它之后才会变为固定。它就像一个跟随你的朋友，但只有在走了一定距离之后。

下面是如何创建粘性导航栏：

.navbar {
/* ... 其他样式 ... */
position: sticky;
top: 0;
}

不同之处在于我们使用了 position: sticky 而不是 position: fixed。

导航栏分隔线

有时，你可能希望用线条分隔导航栏项。这里有一个简单的方法：

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

这会在每个项目之间添加一条线，除了最后一个。

固定垂直导航栏

最后，让我们结合我们所学的内容来创建一个固定垂直导航栏：

<ul class="fixed-vertical-navbar">
<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>

CSS代码如下：

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

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

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

这会创建一个垂直导航栏，在滚动时始终保持在屏幕左侧。

结论

好了，伙计们！我们已经涵盖了从水平到垂直，从下拉到固定的各种导航栏样式。记住，熟能生巧，所以不要害怕尝试这些样式并创建你自己的独特导航栏设计。

下面是一个总结我们所学导航栏类型的表格：

导航栏类型	关键CSS属性	主要特性
水平	`float: left;`	项目水平对齐
垂直	`width: [值];`	项目垂直堆叠
下拉	`:hover`	在悬停时显示附加选项
固定	`position: fixed;`	在滚动时保持在原位
粘性	`position: sticky;`	在滚动过之后变为固定

记住，编码就像烹饪 - 你从基本的食谱开始，但随着你越来越熟练，你可以开始添加自己的风味。所以，继续混合和匹配这些样式，并创造一些美味的东西……我是说，视觉上吸引人的！

祝编码愉快，愿你的导航栏总能引领你走向令人兴奋的目的地！

Credits: Image by storyset