使用HTML，CSS和Javascript創建漂亮的懸停觸發的可擴展側邊欄

天，我們將學習如何制作一個在懸停時展開和折疊的側邊欄。它看起來很漂亮，實現比看起來簡單得多。我們將逐步完成本教程，并且在此過程中我還將介紹一些值得注意的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

轉：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

個成功的Web App必須有良好的用戶體驗。當我們談及改善用戶體驗時，你會想到什么？

其實，有一點是很容易被開發者忽視的，那就是CSS。我們可以使用一些CSS技巧來改善網頁的表現形式、交互細節和可訪問性。

而且這些技巧不需要花費太多時間，也不需要消耗服務器資源。你只需要花兩個小時學習，然后就可以把它應用到你所有的項目中，并永遠改善用戶體驗。

可點擊區域

有時你的按鈕很小，這可能導致用戶無法準確點擊按鈕。這種現象經常發生在移動端上。如果用戶點擊次數太多，沒有點擊他們想要的按鈕，或者點擊錯誤的按鈕，會讓他們感到非常沮喪。

那么，如何解決這個問題呢？有些開發者可能會說：把按鈕做大點。

但網頁中元素的大小往往是固定的，我們不能輕易調整一個元素的大小。而且如果按鈕太大，感覺很奇怪。

一個更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點擊區域。具體來說：我們可以使用偽元素來增加一個元素的可點擊區域。

例如，這里有一個按鈕。

<button id="btn">btn</button>

然后我們可以為它添加一個偽類。

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

這時，如果我們點擊按鈕周圍的區域，我們仍然可以觸發按鈕的點擊事件。

事例地址：

https://codepen.io/bytefishmedium/pen/rNYNoRX

平滑滾動

當頁面被#鏈接滾動時，默認效果是這樣的。

這種突然的跳躍會讓人感到不舒服。為了解決這個問題，我們可以使用這個CSS樣式：sroll-behavior: smooth。

事例地址：https://codepen.io/bytefishmedium/pen/NWwWoKL

選擇所有文本

我們的網頁經常需要提供一些內容供用戶選擇，如電話號碼、地址、標題等。而這些文字應該是一個整體，我們希望當用戶點擊部分文字時，剩余的文字會被自動選擇。

要實現這種效果非常簡單，只需使用這個CSS樣式：user-select: all 。用戶選擇的CSS屬性控制用戶是否可以選擇文本。如果它的值是 all，意味著一個元素的所有內容都將被原子化地選擇。

事例地址：https://codepen.io/bytefishmedium/pen/xxPxMZO

如果你想在文本被選中后添加一些額外的樣式，你可以使用::selection 。::selection CSS偽元素將樣式應用于文檔中被用戶突出顯示的部分（比如在文本上點擊和拖動鼠標）。

但要記住。只有某些CSS屬性可以和::selection一起使用。

color
background-color
text-decoration 及其相關屬性
text-shadow
stroke-color, fill-color 和 stroke-width

事例地址：https://codepen.io/bytefishmedium/pen/gOXOqMz

Cursor

在不同的場景下使用不同的鼠標樣式可以幫助讀者感知頁面的當前狀態，從而改善用戶的互動體驗。

cursor CSS屬性設置鼠標指針在一個元素上時要顯示的鼠標指針（如果有的話）。

光標設置應該告知用戶在當前位置可以進行的鼠標操作，包括文本選擇、激活幫助或上下文菜單、復制內容、調整表格大小，等等。你可以用一個關鍵詞來指定光標的類型，或者加載一個特定的圖標來使用（有可選的回退圖像和強制性的關鍵詞作為最后的回退）。

例如：

事例地址：https://codepen.io/bytefishmedium/pen/bGYGzRz

有很多光標樣式，你可以在MDN文檔中找到它們。

Text Overflow

現在我們來看看 text-overflow 的問題。如果一個文本容器的內容是從服務器返回的，或者是由用戶輸入的，那么就很難預測這個文本會有多長。

如果沒有任何預防措施，你可能會寫出這樣的代碼。

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">bytefish</div>
    <p class="profile">FE, UX Designer</p>
  </div>
</body>

這個容器有一個固定的寬度和高度，包裹著名字和介紹。

但如果有些用戶的簡介太長，就會導致文本溢出容器，使頁面看起來很糟糕。

在這一點上，我們可以將溢出的文本折疊起來。做到這一點就像添加三行CSS樣式一樣簡單。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap; 可以使文本不被包起來。然后我們使用overflow: hidden來隱藏溢出的文本。最后，我們使用 text-overflow: ellipsis 在文本的末尾添加一個圓點，向用戶表明有一些隱藏的文本。

事例地址：https://codepen.io/bytefishmedium/pen/VwrwgdQ

Image

現在我們來討論一下圖片的風格。網絡應用中使用的圖片一般由后端提供。你可能已經與后端開發者達成協議，將圖片保持在一個固定的尺寸。然后你寫下這樣的代碼。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
    </li>
  </ul>

</body>

</html>

而網頁看起來是這樣的。

圖片的排列與我們所期望的一樣。

通常情況下是沒有問題的。但是當我們寫代碼時，我們不能假設一切都會按照我們的預期發展。我們需要做好充分的準備。如果后端返回的圖片不正常，不符合預期的尺寸，可能大也可能小，那么布局就會被打亂。

你可以用這個替換其中一張圖片的鏈接。

https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg

你會發現，頁面突然變得雜亂無章。

為了防止這個問題，使我們的頁面更加健壯，我們可以設置圖片的寬度和高度。這樣，我們就不必擔心后端返回的圖片的大小。

img {
  width: 128px;
  height: 128px;
}

但上述寫法有一個缺點：如果圖像本身的長寬比與我們設定的長寬比不一致，圖像將被壓縮或拉伸。

為了保持圖像的原始長寬比，我們可以使用 object-fit: cover 。

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

object-fit 的CSS屬性設置一個被替換的元素的內容，如<img>或<video>，應該如何調整大小以適合其容器。

如果該值是 cover，那么被替換的內容的大小將保持其長寬比，同時填充元素的整個內容框。如果對象的長寬比與它的盒子的長寬比不一致，那么該對象將被剪掉以適配。

無圖片

我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是，在實際應用中，可能由于后端服務的不穩定，或者用戶自身的網絡信號不好，我們的網頁可能無法正確加載圖片。

當圖片缺失時，瀏覽器的默認樣式是不優雅的，這里我們可以優化它。

我們可以給 img元素添加一個 onerror 事件。如果在加載圖片時出現了錯誤，那么我們可以通過 onerror事件給該元素添加一個樣式，并使用404圖片。

img 元素:

<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

假設這就是我們的404圖像:

https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg

下面是 css 代碼

img.error {
      display: inline-block;
      transform: scale(1);
      content: '';
      color: transparent;
    }
img.error::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
    }

這樣，當 img 元素中的圖片鏈接無法加載圖片時，我們的404圖片將被使用。

這里還有一點需要優化。在這種情況下，如果原始圖片沒有被正確加載，用戶就不知道這個圖片應該是什么。為了方便用戶理解，我們可以將 img 元素的 alt 屬性顯示在頁面上。

img.error::after {
      content: attr(alt);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0, 0, 0, .5);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

假設img的 alt 屬性是這樣的。

<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >

事例地址：https://codepen.io/bytefishmedium/pen/vYWYMxG

色彩對比度

當你在設計顏色組合時，你是否考慮過頁面的顏色對比？

你需要知道，世界上有很多色盲和色弱用戶。如果你的頁面的對比度低，可能會導致他們無法正常使用你的產品。無論是出于人文關懷，還是出于留住客戶的考慮，你都應該設計出合適的對比度。

WCAG AA規范指出，所有重要的內容需要有4.5:1以上的色彩對比度。

這里有一個對比度檢查器的工具。

https://webaim.org/resources/contrastchecker/

事例：

我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然后我們可以發現，Medium的網頁也在實踐這一原則。

總結

俗話說得好，細節決定成敗。如果你的項目有很多可以改善用戶體驗的細節，你就可以讓用戶感到舒服，你就有更高的成功概率。

~完，我是刷碗智，新的一年我們一起刷刷刷！

作者：Shadeed 譯者：前端小智來源：medium 原文：https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b

近做了一個郵件模板功能，就是可以在后臺定義各種情況下的發送郵件驗證碼的模板，如下圖所示：

可以定義「注冊賬號」，「重置密碼」，「驗證郵箱」等各種情況下的郵件模板的標題和內容。使用 WPJAM Basic 的生成表單功能，實現是非常簡單，具體的代碼就是生成三個 fieldset 字段組，使用 foreach 簡單就能處理：

$fields	= [];

foreach(['register'=>'注冊賬號', 'resetpass'=>'重置密碼', 'verify'=>'驗證郵箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',		'fields'=>[
		$type.'_subject'	=> ['title'=>'標題',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'內容',	'type'=>'textarea',	'rows'=>3],
	]];
}

但是感覺這樣重復的界面非常占用空間，有沒有什么好的優化方式，比如折疊起來，點擊展開之后再設置？

我查了一下，其實無需 Javascript，只需用 HTML 的 summary / details 這兩個標簽就能實現。

所以我增強了一下 WPJAM Basic fieldset 組件的能力，fieldset 組件只需要設定 summary 屬性，就能使用 summary / details 實現折疊展開效果，具體代碼如下：

$fields	= [];

foreach(['register'=>'注冊賬號', 'resetpass'=>'重置密碼', 'verify'=>'驗證郵箱'] as $type => $title){
	$fields[$type]	= ['title'=>$title,	'type'=>'fieldset',	'summary'=>$title.'時郵件設置',	'fields'=>[
		$type.'_subject'	=> ['title'=>'標題',	'type'=>'text'],
		$type.'_message'	=> ['title'=>'內容',	'type'=>'textarea',	'rows'=>3],
	]];
}

相比第一段代碼，這段代碼就是增加了 summary 屬性設置，最后的效果如下：

默認情況都只顯示摘要，點擊摘要時候，就會展開字段組設置，如上圖，我點擊了第一個 fieldset 字段組的摘要，「注冊賬號」這個郵件模板就展開了，其他兩個則還是沒有折疊的狀態。

在線咨詢

上一篇：夢想從這里啟航！海軍青少年航校招生啦
下一篇：環西｜S12 霸氣！吉爾伯特單飛奪冠，羅格利奇保住紅衫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商