程式碼研究室:建構 Sidenav 元件

本程式碼研究室會說明如何在網路上建構回應式滑出式側邊導覽版面配置元件。我們會在過程中建構元件,首先是 HTML、接著是 CSS,最後是 JavaScript。

請參閱我的網誌文章「建立 Sidenav 元件」,瞭解為建構此元件而選擇的 CSS 網路平台功能。

設定

  1. 按一下「Remix to Edit」,即可編輯專案。
  2. 開啟 app/index.html

HTML

首先,請取得 HTML 設定的必要元素,以便使用內容和一些方塊。

將下列 HTML 貼到 <body> 標記中。

<aside></aside>
<main></main>

<aside> 會保留導覽選單,做為 <main> 的輔助元素,<main> 則會保留主要網頁內容。

接下來,我們會使用其他網頁內容填入這些語意元素。

<aside> 元素中加入導覽元素、一些導覽連結和關閉連結。

<aside>
  <nav>
    <h4>My</h4>
    <a href="#">Dashboard</a>
    <a href="#">Profile</a>
    <a href="#">Preferences</a>
    <a href="#">Archive</a>

    <h4>Settings</h4>
    <a href="#">Accessibility</a>
    <a href="#">Theme</a>
    <a href="#">Admin</a>
  </nav>

  <a href="#"></a>
</aside>

連結可放在 <nav> 元素中,而 <nav> 元素可放在 <aside> 側欄中。不過,我們仍有許多進步空間。

在主要內容元素中,新增標題和文章,以語意方式保留版面配置內容。

<main>
  <header>
    <a href="#sidenav-open" class="hamburger">
      <svg viewBox="0 0 50 40">
        <line x1="0" x2="100%" y1="10%" y2="10%" />
        <line x1="0" x2="100%" y1="50%" y2="50%" />
        <line x1="0" x2="100%" y1="90%" y2="90%" />
      </svg>
    </a>
    <h1>Site Title</h1>
  </header>

  <article>
    {put some placeholder content here}
  </article>
</main>

標頭包含選單開啟連結。aside 有關閉按鈕。我們很快就會根據檢視區大小顯示及隱藏元素。

我們在 <article> 元素中貼上預留位置句子。將「``」替換為您自己的內容,或貼上下方提供的 Lorem ipsum 內容:

<h2>Totam Header</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

<h3>Subhead Totam Odit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

<h3>Subhead</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

當這類內容和長度超出可視區域高度時,就會導致網頁需要捲動。

到目前為止,您已新增了 aside 元素,其中包含導覽、連結和關閉側邊導覽的方式。您也新增了標題、開啟側邊導覽列的方式,以及主要元素中的文章。這項功能已經是簡潔、符合語意且永不過時的設計,但我們可以讓它更簡潔、更清楚。側邊導覽列中的開啟連結可以標示得更清楚。

在標頭開啟連結元素中加入屬性 titlearia-label

<a href="#sidenav-open" class="hamburger">
<a href="#sidenav-open" title="Open Menu" aria-label="Open Menu" class="hamburger">

開放 SVG 圖示也應標示得更清楚。在開啟連結元素內的 SVG 中加入下列屬性:

<svg viewBox="0 0 50 40">
<svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">

側邊導覽列中的關閉連結可以標示得更清楚。在側邊導覽關閉連結元素中加入 titlearia-label 屬性:

<a href="#"></a>
<a href="#" title="Close Menu" aria-label="Close Menu"></a>

CSS

是時候排版元素了。主要內容和側邊導覽是 <body> 標記的直接子項,因此這是個不錯的起點。

將下列 CSS 新增至 css/sidenav.css,讓 <body> 元素排版子項。

body {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;

  @media (max-width: 540px) {
    & > :matches(aside, main) {
      grid-area: stack;
    }
  }
}

這項版面配置基本上表示:建立名為 stack 的資料列,並在該資料列中加入 2 個欄,其中第 2 個欄也命名為 stack。第 1 欄應根據其最少的內容需求調整大小,第 2 欄則可用於顯示其餘內容。接著,如果在限制為 540px 以下的可視區域中,請將側邊導覽和主要內容元素放入相同的列和欄,讓這兩個元素在 1x1 網格中彼此重疊。

有了這項回應式堆疊功能做為基礎,我們現在可以利用網址列的狀態,切換側邊導覽列的顯示狀態和轉場樣式。

<aside> 元素更新回 app/index.html

<aside>
<aside id="sidenav-open">

這樣一來,CSS 就能將元素和網址雜湊配對。這對於 :target 的使用方式至關重要。元素 ID 現可與我們將透過 <a> 標記設定的網址雜湊相符。

此外,為方便指定 JavaScript,請為控制側邊欄的關鍵元素新增 ID。首先,請在側邊導覽列開啟連結中新增 ID:

<a href="#sidenav-open" class="hamburger" title="Open Menu" aria-label="Open Menu">
<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">

接著,請在側邊導覽列關閉連結中新增 ID:

<a href="#" title="Close Menu" aria-label="Close Menu"></a>
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

這就是巨集 <body> 回應式堆疊版面配置的結尾,以及與網址列的連結。接著執行下一項工作吧!

<aside> 也具有整齊的版面配置。它有 2 個子項:<nav> 是滑出的紙張外觀元件,以及關閉 <a> 連結元素,將網址設為 #。連結會顯示在紙張滑出式導覽介面右側,方便使用者「點選關閉」視覺元件。

css/sidenav.css 中新增以下 CSS:

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

我認為比例和名稱是這裡的亮點,可讓設計師充分控制格線。

接下來,我需要根據條件重疊主要內容,並在任何文件捲動時保留我的位置。這對 position: sticky 和部分 overscroll-behavior 來說是相當不錯的做法。

為側邊欄新增下列樣式:

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

  @media (max-width: 540px) {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: hidden auto;
    overscroll-behavior: contain;

    visibility: hidden; /* not keyboard accessible when closed */
  }
}

這些樣式可確保側邊導覽列為可視區域高度,並且可垂直捲動及包含捲動功能。最重要的是,它會隱藏元素。根據預設,如果檢視區塊為 540px 或更小,則會隱藏該側邊導覽列。除非!

#sidenav-open 元素中加入 :target 擬似選取器:

#sidenav-open {

  @media (max-width: 540px) {

    &:target {
      visibility: visible;
    }
  }
}

如果該元素和網址列的 ID 相同,請將 visibility 設為 visible。請在捲動頁面後開啟側邊選單,或嘗試在側邊選單開啟時捲動頁面。結果如何?

app/sidenav.css 底部加入下列 CSS:

#sidenav-button,
#sidenav-close {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;

  @media (min-width: 540px) {
    display: none;
  }
}

這些樣式會指定開啟和關閉按鈕、指定其輕觸和觸控樣式,並在檢視區為 540px 或更大時隱藏這些按鈕。

為了增添一些風格,我們來新增 CSS 轉換,並確保其符合無障礙設計。在 css/sidenav.css 中新增以下 CSS:

#sidenav-open {
  --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: .6s;

  ...

  @media (max-width: 540px) {
    ...

    transform: translateX(-110vw);
    will-change: transform;
    transition:
      transform var(--duration) var(--easeOutExpo),
      visibility 0s linear var(--duration);

    &:target {
      visibility: visible;
      transform: translateX(0);
      transition: transform var(--duration) var(--easeOutExpo);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    --duration: 1ms;
  }
}
以 `prefers-reduced-motion` 媒體查詢為依據,展示有無時間長度限制的互動情形。

加入一些 JavaScript

Escape 鍵應會關閉選單。在 js/index.js 中加入以下 JS:

const sidenav = document.querySelector('#sidenav-open');

sidenav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    document.location.hash = '';
  }
});

這會監聽 sidenav 元素上的按鍵事件。如果是 Escape,則會將網址雜湊設為空白,讓側邊導覽列轉換。

接下來要介紹 UX JS 的焦點管理功能。我希望能簡化開啟和關閉的程序,因此我會等到側邊導覽列完成某種轉換,然後交叉比對網址雜湊,判斷是否已關閉或開啟。接著,我使用 JavaScript 將焦點設在與使用者剛按下按鈕相輔助的按鈕上。

將下列 JavaScript 新增至 js/index.js

const closenav = document.querySelector('#sidenav-close');
const opennav = document.querySelector('#sidenav-button');

sidenav.addEventListener('transitionend', e => {
  if (e.propertyName !== 'transform') {
    return;
  }

  const isOpen = document.location.hash === '#sidenav-open';

  isOpen
    ? closenav.focus()
    : opennav.focus();
});

立即試用

  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

結論

以上就是我對元件的需求。歡迎您自由發揮,以 JavaScript 狀態而非網址驅動它,並且一般來說,讓它成為您自己的!我們總是可以新增更多內容或涵蓋更多用途。

開啟 css/brandnav.css,查看我套用至此元件的非版面配置相關樣式。我認為這對我關注的功能組合而言並不重要,而且我希望將樣式與版面配置分開,以鼓勵使用者複製和貼上。或許能讓你學到更多!

如何製作滑出的回應式側邊導覽元件?你是否曾經有過 1 個以上的裝置?我很樂意在 YouTube 影片中介紹你的解決方案,請務必在推特上向我發文,或在 YouTube 上留言並附上你的程式碼,這樣就能幫助所有人!