今天，我們將學(xué)習(xí)如何制作一個在懸停時展開和折疊的側(cè)邊欄。它看起來很漂亮，實現(xiàn)比看起來簡單得多。我們將逐步完成本教程，并且在此過程中我還將介紹一些值得注意的HTML / CSS技巧。
以下是本文將涉及的提示和技巧列表：
- 將欄放在側(cè)邊欄中
- 在懸停時更改項目的顏色
- 您需要了解如何修復(fù)的Google材質(zhì)圖標存在問題
- onmouseover和onmouseout事件
- 如何將物品保持在一條線上并防止纏繞
- 如何隱藏側(cè)邊欄中溢出的文本
- 如何實現(xiàn)平滑過渡
讓我們開始！
第1部分：創(chuàng)建一個簡單的側(cè)邊欄
可以在此筆中找到此步驟的完整代碼：https://codepen.io/dalisc/pen/rEjRWo
只使用HTML，您的網(wǎng)頁將如下圖所示。一些CSS可以做出什么改變！所以我們需要用一些CSS來設(shè)置它，使其看起來像上面的gif。
從第1部分學(xué)習(xí)的CSS技巧和竅門：
- 將欄放在側(cè)邊欄中
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
此代碼為側(cè)邊欄提供250px（width：250px;）的寬度，背景顏色為深色（background-color：＃111;），并使其在頁面上完全垂直延伸（height：100％;）。在code pen以自定義側(cè)邊欄。
- 懸停時更改側(cè)邊欄項目的顏色
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
在這里，我們使用“text-decoration：none;”刪除了文本的下劃線和藍色，并在側(cè)邊欄項目周圍添加了填充和塊顯示的一些空格。增強用戶體驗的部分是當項目顏色從灰色變?yōu)榘咨珪r，這可以通過以下代碼完成：
.sidebar a:hover {
color: #f1f1f1;
}
此代碼表示當您將鼠標懸停在類“側(cè)欄”中用<a>標記的元素上時，元素的顏色將更改為您設(shè)置的任何顏色，在本例中為＃f1f1f1。
- 您需要了解如何修復(fù)的Google材質(zhì)圖標存在問題
如果您使用Google的素材圖標，您會發(fā)現(xiàn)一個令人沮喪的問題：默認情況下，圖標和相鄰文字沒有正確垂直對齊。
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
你需要做的是在CSS中垂直對齊它們（vertical-align：middle;）。即使這樣，對齊也有點偏離，所以在此之后給你的圖標一個3px垂直增強（padding-bottom：3px;）。
第2部分：檢測您的鼠標是否懸停在側(cè)邊欄上
現(xiàn)在我們將添加一些Javascript，因為我們將在側(cè)邊欄中引入一些功能。可以在此筆中找到此步驟的完整代碼
- HTML提示：onmouseover和onmouseout
兩個非常有用的事件是onmouseover和onmouseout，它們分別檢測您的鼠標是否懸停在特定元素之上或之外。對于我們的側(cè)邊欄，我們希望檢測位于側(cè)邊欄的任何部分，因此我們需要將這些事件添加到側(cè)邊欄的<div>中，如下所示：
<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>
現(xiàn)在，我們可以決定鼠標懸停在側(cè)邊欄上或從邊欄懸停的情況。我們需要將“ somethinghappens”替換為我們想要實際發(fā)生的事情，但首先，讓我們通過向控制臺發(fā)送消息來檢查是否發(fā)生了檢測。
現(xiàn)在讓我們編寫兩個Javascript函數(shù)來確認檢測到事件：
function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}
更新我們的側(cè)邊欄：
<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>
現(xiàn)在進行懸停并檢查控制臺以查找我們編寫的消息。它應(yīng)該可以工作了！我們已經(jīng)設(shè)置了告訴側(cè)邊欄是折疊還是展開所需的檢測。
第3部分：展開/折疊側(cè)邊欄
可以在此筆中找到此最終部分的完整代碼：https：//codepen.io/dalisc/pen/qzRGxQ
我們將折疊邊欄稱為迷你側(cè)邊欄。我們現(xiàn)在想要根據(jù)鼠標是否懸停在我的側(cè)邊欄上進行兩次查找，因此我們需要在javascript部分中創(chuàng)建一個布爾變量mini。
我們還將創(chuàng)建一個函數(shù)來切換側(cè)邊欄的擴展。該功能的邏輯如下：如果側(cè)邊欄處于迷你模式，將鼠標懸停在側(cè)邊欄上會將側(cè)邊欄擴展為其完整模式（并將變量mini設(shè)置為false）。如果側(cè)邊欄處于完全模式，將鼠標懸停在側(cè)邊欄上會將其折疊為迷你模式（并將變量mini設(shè)置為true）。
因此，我們需要更改onmouseover和onmouseout事件，并相應(yīng)地引入新函數(shù)toggleSidebar（）。
更改html：
<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>
添加到JS（我們現(xiàn)在可以刪除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;
}
}
從功能中可以看出，它基本上都是改變側(cè)邊欄黑色塊的寬度。完整模式的寬度為250px，迷你模式的寬度為85px。我們還策略性地定位文本和圖標，以便在側(cè)邊欄折疊時完全隱藏文本，僅顯示圖標。
默認情況下，我們希望側(cè)邊欄處于迷你模式，因此我們也將側(cè)邊欄的寬度（最初未被遮擋時）更改為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部分學(xué)習(xí)的CSS技巧和竅門：
- 如何在一行中獲取圖標和文本
將“white-space：nowrap;”添加到側(cè)欄CSS。
.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}
即使文本大于側(cè)邊欄的寬度，這也會阻止文本換行到下一行。但正如你在下面看到的那樣，雖然它現(xiàn)在在一行中，它會溢出，你可以看到溢出...所以我們需要找到隱藏它的方法！
- 如何隱藏側(cè)邊欄中溢出的文本
要隱藏溢出的文本，只需將“overflow-x：hidden;”和“z-index：1;”添加到側(cè)邊欄css即可。這將隱藏任何寬于側(cè)邊欄寬度的內(nèi)容。
.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;
}
現(xiàn)在我們的側(cè)邊欄看起來非常好！（我也改變了主要內(nèi)容，但主要內(nèi)容未在本教程中介紹，它包含在code pen。）
- 如何為擴展創(chuàng)建平滑過渡
現(xiàn)在我們已經(jīng)遇到了我們需要修復(fù)的最后一個小故障，以使側(cè)邊欄順利移動。目前，隨著側(cè)邊欄折疊和展開，沒有動畫添加到它，所以它看起來有點不連貫，像這樣：
所以我們想要的是一個非常平滑的過渡，如第一頁上的gif所示。現(xiàn)在，變化立即發(fā)生。為了順利，我們需要減緩變化。首先，我們需要讓側(cè)邊欄擴展得更慢，比方說0.5秒。將其添加到側(cè)邊欄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;
}
我們還需要將主要部分同時推到左側(cè)。
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}
你有一個漂亮的側(cè)邊欄！
在GitHub存儲庫中找到完整的工作代碼：https：//github.com/dalisc/hover-collapsible-sidebar
