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/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 と 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 を使用して、押されたボタンと補完的なボタンにフォーカスを設定します。

次の 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 でコメントしてください。他のユーザーの役にも立ちます。