Codelab: Sidenav コンポーネントをビルドする

Adam Argyle 氏

この Codelab では、ウェブでレスポンシブなスライドアウト サイド ナビゲーション レイアウト コンポーネントを作成する方法について説明します。まずは HTML、CSS、JavaScript の順でコンポーネントを構築していきます。

このコンポーネントの作成用に選択した CSS ウェブ プラットフォームの機能については、ブログ投稿 Sidenav コンポーネントを作成するをご覧ください。

設定

  1. [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  2. app/index.html を開きます。

HTML

まず、HTML 設定の基本要素を取得して、作業するコンテンツとボックスを用意します。

次の HTML を <body> タグにドロップします。

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

<aside> は、ナビゲーション メニューを、プライマリ ページ コンテンツを保持する <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>

ヘッダーにはメニューを開くリンクがあります。横には閉じるボタンがあります。 近日中に、ビューポートのサイズに基づいて要素の表示と非表示を切り替える予定です。

<article> 要素に、プレースホルダ文を貼り付けました。`` の部分を独自の値に置き換えるか、以下の Lorem を貼り付けます。

<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 要素を追加してきました。また、ヘッダー、サイド ナビゲーションを開く方法、記事をメイン要素に追加しました。これはすでにクリーンでセマンティックで 時代を超越したものですが 誰にとっても 明確で明確なものにできますサイドナビゲーションのオープンリンクを より明確にマークできます

ヘッダーのオープンリンク要素に属性 title と aria-label を追加します。

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

開いている SVG アイコンも、より明確にマークできます。 SVG の open link 要素内に次の属性を追加します。

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

サイド ナビゲーションの閉じるリンクをより明確にマークできます。 属性 title と aria-label を sidenav の閉じるリンク要素に追加します。

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

CSS

要素をレイアウトする時間です。メイン コンテンツと sidenav は、<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 以下の制約されたビューポートの場合は、sidenav 要素とメイン コンテンツ要素を同じ行と列に配置して、1×1 グリッドで互いの上に重ねるようにします。

このレスポンシブなスタッキング機能をベースとして使用し、URL バーの状態を利用して、サイド ナビゲーションの表示と非表示を切り替えられるようになりました。

app/index.html の <aside> 要素を更新します。

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

これにより、CSS は要素と URL ハッシュを照合できます。これは、:target を使用するうえで重要です。これで、要素の ID を、これから <a> タグで設定する URL ハッシュと一致させることができます。

また、JavaScript のターゲティングを容易にするために、サイド ナビゲーションを制御する重要な要素の ID を追加します。まず、sidenav を開くリンクに 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">

次に、sidenav の閉じるリンクに 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> のレスポンシブ スタッキング レイアウトが終わり、URL バーと結合されます。先に進みましょう。

<aside> のレイアウトも整っています。この要素には 2 つの子、スライドアウトする紙のような外観のコンポーネントである <nav> と、URL を # に設定する終了 <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 */
  }
}

これらのスタイルでは、sidenav が必ずビューポートの高さになり、垂直方向にスクロールし、スクロールが含まれます。非常に重要な点は、要素が隠されることです。デフォルトでは、ビューポートが 540px 以下の場合、そのサイド ナビゲーションを非表示にします。ただし、

:target 疑似セレクタを #sidenav-open 要素に追加します。

#sidenav-open {

  @media (max-width: 540px) {

    &:target {
      visibility: visible;
    }
  }
}

その要素の ID と URL バーが同じ場合は、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 を js/index.js に追加します。

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

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

sidenav 要素のキーイベントをリッスンします。 Escape の場合、URL ハッシュが空に設定され、sidenav が外へ遷移します。

UX JS の次の部分はフォーカス管理です。開始と終了を簡単にするため、sidenav がなんらかの遷移を終了するまで待ってから、URL ハッシュとクロスチェックして、中か外かを判断します。次に 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();
});

試してみる

  • サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。

まとめ

以上で、このコンポーネントに必要だった機能の説明は終わりです。URL ではなく JavaScript の状態を使用して自由にビルドし、通常は独自のものにしてください。対応すべきユースケースは まだまだあります

css/brandnav.css を開いて、このコンポーネントに適用したレイアウト関連以外のスタイルを確認します。これまで重点的に取り組んでいた機能セットにとって重要とは思えず、スタイルをレイアウトから分離することで、コピーして貼り付けやすくなると考えました。もっと学ぶ機会があるかもしれません。

レスポンシブ サイド ナビゲーション コンポーネントをスライドアウトするにはどうすればよいですか。左右に 1 つなど、複数あることはありますか？ぜひ、あなたのソリューションを YouTube 動画で紹介したいと思います。ぜひツイートするか、YouTube にコメントしてコードを共有してください。