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

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

このコンポーネントの構築に選択された CSS ウェブ プラットフォームの機能については、ブログ投稿の サイドバー コンポーネントの作成をご覧ください。

セットアップ

  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 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 アイコンも、より明確にマークされるようにできます。open link 要素内の SVG に次の属性を追加します。

<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 属性を追加します。

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

CSS

次は、要素をレイアウトします。メイン コンテンツとサイドナビは <body> タグの直接の子であるため、まずはここから始めましょう。

<body> 要素が子要素をレイアウトするように、次の CSS を css/sidenav.css に追加します。

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 グリッドで要素が重ねて表示されます。

このレスポンシブなスタッキング機能をベースに、URL バーの状態を利用して、サイドナビの表示と遷移スタイルを切り替えることができます。

app/index.html<aside> 要素を元に戻します。

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

これにより、CSS で要素と URL ハッシュを照合できます。これは :target の使用において重要です。これで、要素の ID は、<a> タグで設定する URL ハッシュと一致するようになりました。

また、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> レスポンシブ スタッキング レイアウトが完成し、URL バーに接続されます。先に進みましょう。

<aside> のレイアウトもすっきりしています。2 つの子要素があります。スライドアウトする紙のようなコンポーネントである <nav> と、URL を # に設定する閉じ <a> リンク要素です。リンクは、紙のスライドアウト ナビの右側に表示されません。これは、ユーザーがビジュアル コンポーネントを「クリックしてオフ」にして閉じることができるようにするためです。

次の CSS を css/sidenav.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 と URL バーが同じ場合は、visibilityvisible に設定します。ページをスクロールした後にサイドメニューを開くか、サイドバーを開いたままページをスクロールしてみてください。ご意見をお聞かせください

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 を css/sidenav.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 = '';
  }
});

これは、サイドナビ エレメントのキーイベントをリッスンします。Escape の場合、URL ハッシュが空に設定され、サイドナビが切り替わります。

UX JS の次の部分はフォーカス管理です。開閉を簡単にするため、サイドナビがなんらかの遷移を完了するまで待ってから、URL ハッシュと照合して、開いているか閉じているかを判断します。次に、JavaScript を使用して、押されたボタンと補完的なボタンにフォーカスを設定します。

js/index.js に次の JavaScript を追加します。

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 でコメントしてください。皆様のお役に立てると思います。