このページは Cloud Translation API によって翻訳されました。

サイドナビゲーションコンポーネントの作成

レスポンシブスライドアウトサイドナビゲーションの基本的な作成方法

Adam Argyle

この投稿では、レスポンシブでステートフルで、キーボードナビゲーションをサポートし、JavaScript の有無にかかわらず動作し、ブラウザをまたいで機能する、ウェブ用の Sidenav コンポーネントのプロトタイプをどのように作成したかをご紹介します。デモをお試しください。

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

レスポンシブナビゲーションシステムを構築するのは簡単ではありません。キーボードを使うユーザーもいれば、高性能なパソコンを使うユーザーもいれば、小型のモバイルデバイスからアクセスするユーザーもいます。アクセスするユーザー全員がメニューを開閉できる必要があります。

デスクトップからモバイルへのレスポンシブレイアウトのデモ

iOS と Android でのライトモードとダークモードのオフ

ウェブ戦術

このコンポーネントの探索では、いくつかの重要なウェブプラットフォーム機能を組み合わせることができました。

CSS :target
CSS グリッド
CSS transforms
ビューポートとユーザー設定の CSS メディアクエリ
focus 用 JS UX の機能強化

このソリューションにはサイドバーが 1 つあり、540px 以下の「モバイル」ビューポートの場合にのみ切り替えられます。540px は、モバイルのインタラクティブレイアウトと静的なデスクトップレイアウトを切り替えるためのブレークポイントです。

CSS `:target` 疑似クラス

一方の <a> リンクは URL ハッシュを #sidenav-open に設定し、もう一方は空（''）に設定します。最後に、要素の 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 のハッシュ状態が変更され、疑似クラスを使用してサイドナビゲーションの表示と非表示を切り替えます。

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

  #sidenav-open:target {
    visibility: visible;
  }
}

CSS グリッド

これまでは、絶対位置または固定位置のサイドナビゲーションレイアウトとコンポーネントのみを使用していました。ただし、グリッドでは grid-area 構文を使用することで、複数の要素を同じ行または列に割り当てることができます。

スタック

プライマリレイアウト要素 #sidenav-container は、1 行と 2 列を作成するグリッドで、それぞれに 1 列は stack という名前が付けられています。スペースに制約がある場合、CSS は <main> 要素のすべての子を同じグリッド名に割り当て、すべての要素を同じスペースに配置してスタックを作成します。

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

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

メニューの背景

<aside> は、サイドナビゲーションを含むアニメーション要素です。このオブジェクトには、2 つの子があります。[nav] という名前のナビゲーションコンテナ <nav> と、メニューを閉じるために使用される [escape] という名前の背景 <a> です。

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

2fr と 1fr を調整して、メニューオーバーレイとネガティブスペースの閉じるボタンの適切な比率を見つけます。

比率を変更した場合にどうなるかを示すデモ。

CSS の 3D 変換と遷移

レイアウトがモバイルのビューポートサイズで積み重ねられました。新しいスタイルを追加するまでデフォルトで記事に重なって表示されます次のセクションで狙う UX は次のとおりです。

開閉をアニメーション化する
ユーザーが納得できる場合にのみ、動きのあるアニメーションにします。
キーボードフォーカスが画面外の要素に入らないように visibility をアニメーション化する

モーションアニメーションを実装するにあたり、まずはユーザー補助を念頭に置いてください。

アクセシブルなモーション

誰もがスライドアウトモーションを望んでいるわけではありません。Google のソリューションでは、メディアクエリ内の --duration CSS 変数を調整することで、この設定が適用されます。このメディアクエリの値は、モーションに関するユーザーのオペレーティングシステムの設定（利用可能な場合）を表します。

#sidenav-open {
  --duration: .6s;
}

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

期間を適用した場合と適用しない場合のインタラクションのデモ。

これで、サイドナビゲーションがスライドして開閉するときに、ユーザーが動きの軽減を望んでいる場合、すぐに要素がビューに移動し、動きのない状態が維持されます。

遷移、変換、翻訳

サイドナビゲーション（デフォルト）

モバイルのサイドナビゲーションのデフォルト状態を画面外の状態に設定するには、transform: translateX(-110vw) で要素を配置します。

なお、一般的なオフスクリーンコード -100vw に別の 10vw を追加して、サイドナビゲーションの box-shadow が非表示のときにメインビューポートをのぞかないようにします。

@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 に設定します。CSS が要素を -110vw の外側から、URL ハッシュが変更されたときに 0 の「内側」の位置にスライドすることを確認します。var(--duration)

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

切り替え効果の表示

現在の目標は、スクリーンリーダーが開いているときにメニューを非表示にして、システムがオフスクリーンメニューにフォーカスを移動しないようにすることです。:target が変更されたときの可視性遷移を設定することで、これを実現できます。

ここでは、可視性を移行せず、要素がスライドインしてフォーカスを受け入れることができるように、すぐに表示されるようにします。
外出時は表示を遷移しますが、遅らせることで、遷移終了時に hidden に切り替わります。

ユーザー補助機能の UX の強化

リンク

このソリューションでは、状態を管理できるように URL を変更する必要があります。当然、ここでは <a> 要素を使用する必要があり、優れたユーザー補助機能を無料で利用できます。意図を明確に示すラベルでインタラクティブな要素を装飾しましょう。

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

ナレーションとキーボード操作の UX のデモ。

これで、マウスとキーボードの両方について、主要な操作ボタンの目的が明確に示されるようになりました。

`:is(:hover, :focus)`

この便利な CSS 関数疑似セレクタを使用すると、マウスオーバースタイルにフォーカスを共有して、すばやくインクルーシブなものにできます。

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

JavaScript にスプリンクルを適用する

閉じるには `escape` を押します

キーボードの Escape キーを押すとメニューが閉じますか？つなぎます

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

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

ブラウザの履歴

開閉操作によってブラウザ履歴に複数のエントリがスタックされないようにするには、次の JavaScript を [閉じる] ボタンにインラインで追加します。

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>

これにより、閉じるときに URL 履歴エントリが削除され、メニューが一度も開かれていないように見えます。

UX を重視

次のスニペットは、開くボタンと閉じるボタンにフォーカスを合わせるのに役立ちます。簡単に切り替えられるようにしたい。

sidenav.addEventListener('transitionend', e => {
  const isOpen = document.location.hash === '#sidenav-open';

  isOpen
      ? document.querySelector('#sidenav-close').focus()
      : document.querySelector('#sidenav-button').focus();
})

サイドナビゲーションが開いたら、閉じるボタンをフォーカスします。サイドナビゲーションが閉じたら、「開く」ボタンをフォーカスします。これを行うには、JavaScript の要素で focus() を呼び出します。

おわりに

私のやり方わかったな、どうやって？！これで、おもしろいコンポーネントアーキテクチャが完成します。スロット付きの最初のバージョンは誰が制作するのでしょうか。🙂

手法を多様化し、ウェブで構築するすべての方法を学んでいきましょう。グリッチを作成して自分のバージョンをツイートしてください。下のコミュニティリミックスのセクションに追加します。

コミュニティリミックス

カスタム要素を使用した @_developit: デモとコード
@mayeedwin1（HTML/CSS/JS 使用）: デモとコード
@a_nurella と Glitch Remix: デモとコード
@EvroMalarkey（HTML/CSS/JS 使用）: デモとコード

サイド ナビゲーション コンポーネントの作成

概要