今天，我们将学习如何制作一个在悬停时展开和折叠的侧边栏。它看起来很漂亮，实现比看起来简单得多。我们将逐步完成本教程，并且在此过程中我还将介绍一些值得注意的HTML / CSS技巧。
以下是本文将涉及的提示和技巧列表：
- 将栏放在侧边栏中
- 在悬停时更改项目的颜色
- 您需要了解如何修复的Google材质图标存在问题
- onmouseover和onmouseout事件
- 如何将物品保持在一条线上并防止缠绕
- 如何隐藏侧边栏中溢出的文本
- 如何实现平滑过渡
让我们开始！
第1部分：创建一个简单的侧边栏
可以在此笔中找到此步骤的完整代码：https://codepen.io/dalisc/pen/rEjRWo
只使用HTML，您的网页将如下图所示。一些CSS可以做出什么改变！所以我们需要用一些CSS来设置它，使其看起来像上面的gif。
从第1部分学习的CSS技巧和窍门：
- 将栏放在侧边栏中
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
此代码为侧边栏提供250px（width：250px;）的宽度，背景颜色为深色（background-color：＃111;），并使其在页面上完全垂直延伸（height：100％;）。在code pen以自定义侧边栏。
- 悬停时更改侧边栏项目的颜色
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
在这里，我们使用“text-decoration：none;”删除了文本的下划线和蓝色，并在侧边栏项目周围添加了填充和块显示的一些空格。增强用户体验的部分是当项目颜色从灰色变为白色时，这可以通过以下代码完成：
.sidebar a:hover {
color: #f1f1f1;
}
此代码表示当您将鼠标悬停在类“侧栏”中用<a>标记的元素上时，元素的颜色将更改为您设置的任何颜色，在本例中为＃f1f1f1。
- 您需要了解如何修复的Google材质图标存在问题
如果您使用Google的素材图标，您会发现一个令人沮丧的问题：默认情况下，图标和相邻文字没有正确垂直对齐。
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
你需要做的是在CSS中垂直对齐它们（vertical-align：middle;）。即使这样，对齐也有点偏离，所以在此之后给你的图标一个3px垂直增强（padding-bottom：3px;）。
第2部分：检测您的鼠标是否悬停在侧边栏上
现在我们将添加一些Javascript，因为我们将在侧边栏中引入一些功能。可以在此笔中找到此步骤的完整代码
- HTML提示：onmouseover和onmouseout
两个非常有用的事件是onmouseover和onmouseout，它们分别检测您的鼠标是否悬停在特定元素之上或之外。对于我们的侧边栏，我们希望检测位于侧边栏的任何部分，因此我们需要将这些事件添加到侧边栏的<div>中，如下所示：
<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>
现在，我们可以决定鼠标悬停在侧边栏上或从边栏悬停的情况。我们需要将“ somethinghappens”替换为我们想要实际发生的事情，但首先，让我们通过向控制台发送消息来检查是否发生了检测。
现在让我们编写两个Javascript函数来确认检测到事件：
function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}
更新我们的侧边栏：
<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>
现在进行悬停并检查控制台以查找我们编写的消息。它应该可以工作了！我们已经设置了告诉侧边栏是折叠还是展开所需的检测。
第3部分：展开/折叠侧边栏
可以在此笔中找到此最终部分的完整代码：https：//codepen.io/dalisc/pen/qzRGxQ
我们将折叠边栏称为迷你侧边栏。我们现在想要根据鼠标是否悬停在我的侧边栏上进行两次查找，因此我们需要在javascript部分中创建一个布尔变量mini。
我们还将创建一个函数来切换侧边栏的扩展。该功能的逻辑如下：如果侧边栏处于迷你模式，将鼠标悬停在侧边栏上会将侧边栏扩展为其完整模式（并将变量mini设置为false）。如果侧边栏处于完全模式，将鼠标悬停在侧边栏上会将其折叠为迷你模式（并将变量mini设置为true）。
因此，我们需要更改onmouseover和onmouseout事件，并相应地引入新函数toggleSidebar（）。
更改html：
<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>
添加到JS（我们现在可以删除testIn()和testOut()）：
var mini = true;
function toggleSidebar() {
if (mini) {
console.log(“opening sidebar”);
document.getElementById(“mySidebar”).style.width = “250px”;
document.getElementById(“main”).style.marginLeft = “250px”;
this.mini = false;
} else {
console.log(“closing sidebar”);
document.getElementById(“mySidebar”).style.width = “100px”;
document.getElementById(“main”).style.marginLeft = “100px”;
this.mini = true;
}
}
从功能中可以看出，它基本上都是改变侧边栏黑色块的宽度。完整模式的宽度为250px，迷你模式的宽度为85px。我们还策略性地定位文本和图标，以便在侧边栏折叠时完全隐藏文本，仅显示图标。
默认情况下，我们希望侧边栏处于迷你模式，因此我们也将侧边栏的宽度（最初未被遮挡时）更改为85px。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}
当前默认外观：
此时，文本溢出仍有一些问题，所以我将介绍一些CSS提示和技巧！
从第3部分学习的CSS技巧和窍门：
- 如何在一行中获取图标和文本
将“white-space：nowrap;”添加到侧栏CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}
即使文本大于侧边栏的宽度，这也会阻止文本换行到下一行。但正如你在下面看到的那样，虽然它现在在一行中，它会溢出，你可以看到溢出...所以我们需要找到隐藏它的方法！
- 如何隐藏侧边栏中溢出的文本
要隐藏溢出的文本，只需将“overflow-x：hidden;”和“z-index：1;”添加到侧边栏css即可。这将隐藏任何宽于侧边栏宽度的内容。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
现在我们的侧边栏看起来非常好！（我也改变了主要内容，但主要内容未在本教程中介绍，它包含在code pen。）
- 如何为扩展创建平滑过渡
现在我们已经遇到了我们需要修复的最后一个小故障，以使侧边栏顺利移动。目前，随着侧边栏折叠和展开，没有动画添加到它，所以它看起来有点不连贯，像这样：
所以我们想要的是一个非常平滑的过渡，如第一页上的gif所示。现在，变化立即发生。为了顺利，我们需要减缓变化。首先，我们需要让侧边栏扩展得更慢，比方说0.5秒。将其添加到侧边栏CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
white-space: nowrap;
}
我们还需要将主要部分同时推到左侧。
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}
你有一个漂亮的侧边栏！
在GitHub存储库中找到完整的工作代码：https：//github.com/dalisc/hover-collapsible-sidebar
