翻譯：布蘭
作者：Adam Argyle
來源：https://web.dev/building-a-sidenav-component/

在這篇文章中，我想和大家分享我是如何為 web 原型化一個 Sidenav 組件的，這個組件是響應式的，有狀態的，支持鍵盤導航，可以使用和不使用 Javascript，并且可以跨瀏覽器工作。

構建一個響應式導航系統是很困難的。有些用戶使用鍵盤，有些用戶使用強大的臺式機，還有一些用戶使用小型移動設備訪問。每個訪問者都應該能夠打開和關閉菜單。

桌面到移動設備響應式布局演示

用了哪些技術

在這次組件探索中，我很高興地結合了一些關鍵的網絡平臺特性：

• 偽類
• CSS Grid
• transforms
• 媒體查詢和用戶偏好 CSS
• 用戶增強體驗

我的解決方案只有一個側邊欄，只有在“移動”視口為540px 或更小時才能切換。540px 將是我們在移動交互式布局和靜態桌面布局之間切換的斷點。

偽類

一個 鏈接將 url 散列設置為 #sidenav-open，另一個設置為 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>

點擊這些鏈接會改變我們網頁 URL 的散列狀態，然后用一個偽類來顯示和隱藏 Sidenav：

@media?(max-width:?540px)?{
????#sidenav-open?{
????????visibility:?hidden;
????}
????
????#sidenav-open:target?{
????????visibility:?visible;
????}
}

CSS Grid

在過去，我只使用絕對或固定位置 Sidenav 布局和組件。不過，使用網格區域語法，可以為同一行或列分配多個元素。

Stacks

主要的布局元素 #sidenav-container 是一個網格，它創建了 1 行和 2 列，其中 1 列被命名為 stack。當空間受到限制時，CSS 會將所有 元素的子元素賦給同一個網格名稱，將所有元素放在同一個空間中，創建一個堆棧。

#sidenav-container?{
????display:?grid;
????grid:?[stack]?1fr?/?min-content?[stack]?1fr;
????min-height:?100vh;
}

@media?(max-width:?540px)?{
????#sidenav-container?>?*?{
????????grid-area:?stack;
????}
}

菜單背景

是包含側邊導航的動畫元素。它有兩個子元素: 導航容器 命名為 [nav] ，背景幕布 命名為 [escape]，用于關閉菜單。

#sidenav-open?{
????display:?grid;
????grid-template-columns:?[nav]?2fr?[escape]?1fr;
}

調整 2fr 和 1fr，找到你喜歡的菜單覆蓋和負空間關閉按鈕的比例。

3D transforms

我們的布局現在是堆疊在一個移動視口大小。除非我添加一些新的樣式，否則它將默認覆蓋我們的文章。下面是一些我正在努力實現的用戶體驗：

• 動畫打開和關閉；
• 只有在用戶同意的情況下才使用動畫；
• 鍵盤焦點不會進入屏幕以外的元素；

當我開始實現動作動畫的時候，我想先從可訪問性開始。

無障礙運動

不是每個人都想要幻燈片移動的體驗。在我們的解決方案中，這個首選項是通過調整媒體查詢中的 -- duration CSS 變量來實現的。此媒體查詢值表示用戶的操作系統對移動的偏好(如果可用)。

#sidenav-open?{
????--duration:?.6s;
}
@media?(prefers-reduced-motion:?reduce)?{
????#sidenav-open?{
????????--duration:?1ms;
????}
}

現在，當我們的 sidenav 滑動打開和關閉，如果用戶喜歡減少運動，我立即移動元素進入視圖，保持沒有運動的狀態。

Transition, transform, translate

Sidenav 默認是退出狀態的。為了將移動設備上 Sidenav 的默認狀態設置為屏幕外狀態，我將元素的位置設置為：

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() 位置設置為 0。當 URL 哈希值變化的時候，觀察到元素會從 -110vw 的位置滑動到 0 的位置。

@media?(max-width:?540px)?{
????#sidenav-open:target?{
????????visibility:?visible;
????????transform:?translateX(0);
????????transition:?transform?var(--duration)?var(--easeOutExpo);
????}
}

過渡時期的可見性

現在的目標是屏幕閱讀器看不到菜單，這樣系統就不會把焦點放在屏幕外的菜單上。我通過在: 目標更改時設置可見性轉換來實現這一點。

• 進入時，請勿過渡可見性；立刻可見，因此我可以看到元素滑入并接受焦點。
• 退出時，給他加一個延遲到過渡效果；

可訪問性 UX 增強

鏈接

此解決方案依賴于更改 URL 以便管理狀態。當然，這里應該使用 元素，它可以免費獲得一些很好的可訪問性特性。讓我們用清楚表達意圖的標簽來裝飾我們的交互式元素。

<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>

現在我們的主要交互按鈕清楚地表明了鼠標和鍵盤的意圖。

:is(:hover,?:focus)

這個方便的 CSS 函數式偽選擇器可以讓我們通過分享焦點快速地包容我們的懸停樣式。

.hamburger:is(:hover,?:focus)?svg?>?line?{
????stroke:?hsl(var(--brandHSL));
}

加上點 JS

鍵盤上的 Escape 鍵應該關閉菜單，對嗎? 讓我們把它實現：

const?sidenav?=?document.querySelector('#sidenav-open');
sidenav.addEventListener('keyup',?event?=>?{
????if?(event.code?===?'Escape')?document.location.hash?=?'';
});

下一個代碼片段幫助我們將注意力集中在打開或關閉按鈕上。我想讓切換變得簡單。

sidenav.addEventListener('transitionend',?e?=>?{
????const?isOpen?=?document.location.hash?===?'#sidenav-open';
????isOpen
??????????document.querySelector('#sidenav-close').focus()
????????:?document.querySelector('#sidenav-button').focus();
})

當 Sidenav 打開時，集中關閉按鈕。當 Sidenav 關閉時，集中打開按鈕。我通過在 JS 中的元素上調用 focus() 來實現這一點。

總結

以上是生活随笔為你收集整理的hamburger组件_一个侧边栏导航组件实现思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。