一個側(cè)邊欄導(dǎo)航組件實現(xiàn)思路
在這篇文章中，我想和大家分享我是如何為 web 原型化一個 Sidenav 組件的，這個組件是響應(yīng)式的，有狀態(tài)的，支持鍵盤導(dǎo)航，可以使用和不使用 Javascript，并且可以跨瀏覽器工作。
構(gòu)建一個響應(yīng)式導(dǎo)航系統(tǒng)是很困難的。有些用戶使用鍵盤，有些用戶使用強大的臺式機，還有一些用戶使用小型移動設(shè)備訪問。每個訪問者都應(yīng)該能夠打開和關(guān)閉菜單。
用了哪些技術(shù)
在這次組件探索中，我很高興地結(jié)合了一些關(guān)鍵的網(wǎng)絡(luò)平臺特性：
偽類 CSS Grid transforms媒體查詢和用戶偏好 CSS 用戶增強體驗
我的解決方案只有一個側(cè)邊欄，只有在“移動”視口為540px 或更小時才能切換。540px 將是我們在移動交互式布局和靜態(tài)桌面布局之間切換的斷點。
偽類
一個 鏈接將 url 散列設(shè)置為 #sidenav-open，另一個設(shè)置為 empty('')。最后，一個元素具有匹配散列的 id：
<a?href="#sidenav-open"?id="sidenav-button"?title="Open?Menu"?aria-label="Open?Menu">
<a?href="#"?id="sidenav-close"?title="Close?Menu"?aria-label="Close?Menu">a>
<aside?id="sidenav-open">aside>
點擊這些鏈接會改變我們網(wǎng)頁 URL 的散列狀態(tài)，然后用一個偽類來顯示和隱藏 Sidenav：
@media?(max-width:?540px)?{
????#sidenav-open?{
????????visibility:?hidden;
????}
????
????#sidenav-open:target?{
????????visibility:?visible;
????}
}
CSS Grid
在過去，我只使用絕對或固定位置 Sidenav 布局和組件。不過，使用網(wǎng)格區(qū)域語法，可以為同一行或列分配多個元素。
Stacks
主要的布局元素 #sidenav-container 是一個網(wǎng)格，它創(chuàng)建了 1 行和 2 列，其中 1 列被命名為 stack。當空間受到限制時，CSS 會將所有 元素的子元素賦給同一個網(wǎng)格名稱，將所有元素放在同一個空間中，創(chuàng)建一個堆棧。
#sidenav-container?{
????display:?grid;
????grid:?[stack]?1fr?/?min-content?[stack]?1fr;
????min-height:?100vh;
}
@media?(max-width:?540px)?{
????#sidenav-container?>?*?{
????????grid-area:?stack;
????}
}
菜單背景
是包含側(cè)邊導(dǎo)航的動畫元素。它有兩個子元素: 導(dǎo)航容器 命名為 [nav] ，背景幕布 命名為 [escape]，用于關(guān)閉菜單。
#sidenav-open?{
????display:?grid;
????grid-template-columns:?[nav]?2fr?[escape]?1fr;
}
調(diào)整 2fr 和 1fr，找到你喜歡的菜單覆蓋和負空間關(guān)閉按鈕的比例。
3D transforms
我們的布局現(xiàn)在是堆疊在一個移動視口大小。除非我添加一些新的樣式，否則它將默認覆蓋我們的文章。下面是一些我正在努力實現(xiàn)的用戶體驗：
動畫打開和關(guān)閉； 只有在用戶同意的情況下才使用動畫； 鍵盤焦點不會進入屏幕以外的元素；
當我開始實現(xiàn)動作動畫的時候，我想先從可訪問性開始。
無障礙運動
不是每個人都想要幻燈片移動的體驗。在我們的解決方案中，這個首選項是通過調(diào)整媒體查詢中的 -- duration CSS 變量來實現(xiàn)的。此媒體查詢值表示用戶的操作系統(tǒng)對移動的偏好(如果可用)。
#sidenav-open?{
????--duration:?.6s;
}
@media?(prefers-reduced-motion:?reduce)?{
????#sidenav-open?{
????????--duration:?1ms;
????}
}
現(xiàn)在，當我們的 sidenav 滑動打開和關(guān)閉，如果用戶喜歡減少運動，我立即移動元素進入視圖，保持沒有運動的狀態(tài)。
Transition, transform, translate
Sidenav 默認是退出狀態(tài)的。為了將移動設(shè)備上 Sidenav 的默認狀態(tài)設(shè)置為屏幕外狀態(tài)，我將元素的位置設(shè)置為：
transform:?translateX?(-?110vw);
注意，我在典型的屏幕外代碼 -100vw 中添加了10vw，以確保當 sidenav 隱藏時，它的盒子陰影不會窺視主視圖。
@media?(max-width:?540px)?{
????#sidenav-open?{
????????visibility:?hidden;
????????transform:?translateX(-110vw);
????????will-change:?transform;
????????transition:?
????????????transform?var(--duration)?var(--easeOutExpo),
????????????visibility?0s?linear?var(--duration);
????}
}
當 #sidenav 元素匹配為 :target 時，將 translateX() 位置設(shè)置為 0。當 URL 哈希值變化的時候，觀察到元素會從 -110vw 的位置滑動到 0 的位置。
@media?(max-width:?540px)?{
????#sidenav-open:target?{
????????visibility:?visible;
????????transform:?translateX(0);
????????transition:?transform?var(--duration)?var(--easeOutExpo);
????}
}
過渡時期的可見性
現(xiàn)在的目標是屏幕閱讀器看不到菜單，這樣系統(tǒng)就不會把焦點放在屏幕外的菜單上。我通過在: 目標更改時設(shè)置可見性轉(zhuǎn)換來實現(xiàn)這一點。
進入時，請勿過渡可見性；立刻可見，因此我可以看到元素滑入并接受焦點。 退出時，給他加一個延遲到過渡效果；
可訪問性 UX 增強
鏈接
此解決方案依賴于更改 URL 以便管理狀態(tài)。當然，這里應(yīng)該使用 元素，它可以免費獲得一些很好的可訪問性特性。讓我們用清楚表達意圖的標簽來裝飾我們的交互式元素。
<a?href="#"?id="sidenav-close"?title="Close?Menu"?aria-label="Close?Menu">a>
<a?href="#sidenav-open"?id="sidenav-button"?class="hamburger"?title="Open?Menu"?aria-label="Open?Menu">
????<svg>...svg>
a>
現(xiàn)在我們的主要交互按鈕清楚地表明了鼠標和鍵盤的意圖。
:is(:hover,?:focus)
這個方便的 CSS 函數(shù)式偽選擇器可以讓我們通過分享焦點快速地包容我們的懸停樣式。
.hamburger:is(:hover,?:focus)?svg?>?line?{
????stroke:?hsl(var(--brandHSL));
}
加上點 JS
鍵盤上的 Escape 鍵應(yīng)該關(guān)閉菜單，對嗎? 讓我們把它實現(xiàn)：
const?sidenav?=?document.querySelector('#sidenav-open');
sidenav.addEventListener('keyup',?event?=>?{
????if?(event.code?===?'Escape')?document.location.hash?=?'';
});
下一個代碼片段幫助我們將注意力集中在打開或關(guān)閉按鈕上。我想讓切換變得簡單。
sidenav.addEventListener('transitionend',?e?=>?{
????const?isOpen?=?document.location.hash?===?'#sidenav-open';
????isOpen
??????????document.querySelector('#sidenav-close').focus()
????????:?document.querySelector('#sidenav-button').focus();
})
當 Sidenav 打開時，集中關(guān)閉按鈕。當 Sidenav 關(guān)閉時，集中打開按鈕。我通過在 JS 中的元素上調(diào)用 focus() 來實現(xiàn)這一點。