CSS - 下拉菜单：初学者指南

你好，未来的网页设计师们！今天，我们将深入了解CSS下拉菜单的奇妙世界。作为你友好的邻居电脑老师，我很高兴能引导你完成这次旅程。如果你之前从未编写过一行代码，也不用担心——我们将从最基本的内容开始，逐步学习。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

什么是CSS下拉菜单？

在编写代码之前，让我们先了解一下下拉菜单是什么。想象你在一个高档餐厅，服务员递给你一份菜单。但这并不是一份普通的菜单——它是一份魔法菜单！当你点击“开胃菜”时，一份美味的开胃菜列表就会出现。这就是下拉菜单在网站上的作用。它是一个菜单，当用户交互时，会显示更多选项。

现在，让我们看看如何用CSS创造这种魔法！

CSS下拉菜单 - 基本示例

让我们从一个简单的下拉菜单开始。以下是HTML和CSS代码：

<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>

.dropdown {
position: relative;
display: inline-block;
}

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

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

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

让我们分解一下：

1. 我们为整个下拉菜单创建了一个容器（<div class="dropdown">）。
2. 在里面，我们有一个按钮（<button class="dropbtn">），用于触发下拉菜单。
3. 实际的下拉内容在另一个div中（<div class="dropdown-content">）。
4. 我们使用CSS默认隐藏下拉内容（display: none;）。
5. 当我们悬停在下拉容器上时，显示内容（display: block;）。

CSS下拉菜单 - 悬停效果

现在我们有了基本的下拉菜单，让我们通过添加悬停效果使其更加美观：

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

这段CSS将在悬停时改变按钮的颜色。就像按钮在说：“嘿，我准备好展示更多选项了！”

CSS下拉菜单 - 点击下拉

有时，我们希望下拉菜单在点击时出现，而不仅仅是悬停。以下是如何使用一点JavaScript实现：

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">下拉菜单</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

这个脚本会在点击按钮时切换 'show' 类的显示状态，如果你点击页面的其他地方，下拉菜单会关闭。

CSS下拉菜单 - 右对齐菜单

如果我们想让下拉菜单右对齐而不是左对齐呢？很简单！

.dropdown-content {
right: 0;
}

只需将这行代码添加到现有的CSS中。就像告诉你的下拉菜单：“请向右移动！”

CSS下拉菜单 - 左对齐菜单

为了完整性，这里是如何显式地将菜单左对齐（尽管这通常是默认设置）：

.dropdown-content {
left: 0;
}

CSS下拉菜单 - 带图片的菜单

让我们通过添加图片使下拉菜单更加激动人心：

<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="五渔村" width="100"></a>
<a href="#">链接 1</a>
<a href="#">链接 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

现在你的下拉菜单顶部有一张美丽的图片。就像在你的CSS圣代上加上了一个樱桃！

CSS下拉菜单 - 与导航栏结合

最后，让我们看看如何将下拉菜单整合到导航栏中：

<ul class="navbar">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</li>
</ul>

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

.navbar .dropdown {
display: inline-block;
}

就这样！一个带有下拉菜单的全功能导航栏。

结论

恭喜你！你刚刚学习了如何创建各种类型的CSS下拉菜单。记住，熟能生巧，所以不要害怕实验这些示例。改变颜色，添加动画，甚至尝试在一个页面上结合不同类型的下拉菜单。

以下是我们所涵盖的方法的快速参考表：

方法	描述
基本下拉菜单	简单的下拉菜单，在悬停时显示
悬停效果	在悬停时改变颜色的下拉菜单
点击下拉菜单	点击时显示的下拉菜单
右对齐菜单	右对齐的下拉菜单
左对齐菜单	左对齐的下拉菜单（默认）
带图片的菜单	包含图片的下拉菜单
与导航栏结合	整合到导航栏中的下拉菜单

记住，在网页设计的世界里，创造力是你最好的朋友。所以，继续前进，创造惊人的下拉菜单！谁知道呢，也许你会发明下一个网页导航的大热门。快乐编码！

Credits: Image by storyset