nikkeyl
  • Telegram

SSBM - バーガーメニューの統一基準

SSBM - バーガーメニューの統一基準

43

5 分。

定義

SSBM規格は、バーガーメニューのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています。

構造とセマンティクス

モバイルメニューは、要素の正しい配置と構造を考慮して構築する必要があります。そのため、position: fixed;、block-size: 100dvb;、およびinline-size: 100%;を使用し、ブラウザのパネルやツールバーを考慮した上でメニューが画面全体を覆うようにします。オーバーレイは、position: fixed;を指定した独立した要素として使用され、ページを覆い隠し、クリック時にメニューを閉じる役割を果たします。

展開／折りたたみのアニメーションには、単純な表示／非表示が必要な場合は transform: translateX/Y(); ではなく、inset-inline-start、inset-inline-end、inset-block-start、inset-block-end プロパティによるオフセットを使用してください。また、特に小さな画面では、メニューが viewport の範囲外に出ないようにする必要があります:

<button class="burger-button">☰</button>
<div class="menu">
  <div class="menu__overlay"></div>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

.menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100dvb;
  background: white;
  transition: inset-inline-start 0.3s;
}

.menu.active {
  inset-inline-start: 0;
}

.menu__overlay {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu.active .menu__overlay {
  opacity: 1;
  visibility: visible;
}

アクセシビリティ

ハンバーガーボタンには、メニューの状態（展開中／折りたたみ中）を反映するために、aria-label および aria-expanded を設定する必要があります:

<button class="burger-btn" aria-label="メニューを開く" aria-expanded="false">☰</button>

インタラクティブ性と視覚的な反応

メニューは、ハンバーガーボタンをクリックするか、メニュー項目を選択するか、オーバーレイをクリックすると閉じられます。メニューが開いている間は、<body>にoverflow: hidden;を設定し、ページの位置を固定する必要があります。スムーズな動作を実現したい場合は、メニューにはinset-inline-start、 inset-block-end、inset-inline-end、またはinset-block-startをメニューに対して、opacityをオーバーレイに対してアニメーションさせるのが良いでしょう:

const button = document.querySelector('.burger-button');
const menu = document.querySelector('.menu');
const overlay = menu.querySelector('.menu__overlay');

button.addEventListener('click', () => {
  const isActive = menu.classList.toggle('active');

  button.setAttribute('aria-expanded', isActive);
});

overlay.addEventListener('click', () => {
  menu.classList.remove('active');
  button.setAttribute('aria-expanded', 'false');
});

類似カテゴリ:

関連記事

  • アドバイスReactコンポーネントの構造

    Reactコンポーネントの構造

    各Reactコンポーネントがどのような外観であるべきか、私の考え

    104

    12 分。

  • 基準SSF-U - フルスクリーン表示の統一規格

    SSF-U - フルスクリーン表示の統一規格

    SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    37

    3 分。

  • 基準SSA - アコーディオンの統一標準

    SSA - アコーディオンの統一標準

    SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています

    51

    4 分。

  • アドバイスウェブサイトにおける悪い慣行

    ウェブサイトにおける悪い慣行

    ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogle・Yandexでの検索順位を低下させる理由

    47

    2 分。

  • 基準SSP - ページネーションの統一規格

    SSP - ページネーションの統一規格

    SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    57

    3 分。

  • 基準SSPS - プロジェクト構造の統一基準

    SSPS - プロジェクト構造の統一基準

    SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています

    169

    3 分。

  • すべての記事

ご連絡ください