本日，我们将学习如何制作一个在悬停时展开和折叠的侧边栏。它看起来很俊秀，实现比看起来大略得多。我们将逐步完本钱教程，并且在此过程中我还将先容一些值得把稳的HTML / CSS技巧。
以下是本文将涉及的提示和技巧列表：
将栏放在侧边栏中在悬停时变动项目的颜色您须要理解如何修复的Google材质图标存在问题onmouseover和onmouseout事宜如何将物品保持在一条线上并防止缠绕如何隐蔽侧边栏中溢出的文本如何实现平滑过渡让我们开始！
可以在此笔中找到此步骤的完全代码：https://codepen.io/dalisc/pen/rEjRWo
只利用HTML，您的网页将如下图所示。一些CSS可以做出什么改变！
以是我们须要用一些CSS来设置它，使其看起来像上面的gif。
.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()”>
现在进行悬停并检讨掌握台以查找我们编写的。它该当可以事情了！
我们已经设置了见告侧边栏是折叠还是展开所需的检测。
可以在此笔中找到此终极部分的完全代码：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提示和技巧！
将“white-space：nowrap;”添加到侧栏CSS。
.sidebar { height: 100%; width: 85px; position: fixed; top: 0; left: 0; background-color: #111; padding-top: 60px; white-space: nowrap;}
纵然文今年夜于侧边栏的宽度，这也会阻挡文本换行到下一行。但正如你不才面看到的那样，虽然它现在在一行中，它会溢出，你可以看到溢出...以是我们须要找到隐蔽它的方法！
s
如何隐蔽侧边栏中溢出的文本要隐蔽溢出的文本，只需将“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
转：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1
