ハンバーガーメニューとは？
ハンバーガーメニューまたはハンバーガーアイコンは、通常はサイドメニューまたはナビゲーションドロワーに開くWebサイトおよびアプリのボタンです。
これは、ユーザーとのコミュニケーションを容易にする方法として、1981年にインタラクションデザイナーのNormCoxによってXeroxStarパーソナルワークステーション用に作成されました。ボタンにはアイテムのリストが含まれています。
ハンバーガーメニューのいくつかの利点
- 認識可能（認識可能）
ハンバーガーメニューは、アプリからWebサイト、コンピューターソフトウェア、ビデオゲームまで、ほとんどどこにでもあります。
- 綺麗
ハンバーガーメニューは、以下のレイアウトが不十分なWebページよりもはるかにクリーンです。
モバイルアプリやウェブサイトなど、視覚的なスペースが貴重な場所では、ハンバーガーメニューは非常に価値があります。
結局のところ、Webページの設計者は、ユーザーがあまりにも多くの選択肢を持つことを決して望んでいません。多数の選択肢に直面すると、顧客は欲求不満になり、まったく選択をしなくなる可能性があります。
意思決定の専門家であるシーナアイエンガーの調査によると、購入する選択肢が少ない場合、人々は購入する可能性が10倍高くなります。
そのため、ハンバーガーメニューは、雑然としたページをクリーンアップするための優れた方法になります。
これは単純なソリューションであり、ユーザーエクスペリエンスを妨げることはありません。したがって、ユーザーを困らせることなくナビゲーションメニューに簡単にアクセスする方法を探している場合は、ハンバーガーメニューが最適です。
SAPSpartacusプロジェクトでのハンバーガーメニューの実装
SAP Spartacusプロジェクトpackage.jsonには、このような依存関係があります。
このリポジトリは、Sassファイル（モジュラーおよびカスタマイズ可能）を含むCSSアニメーションハンバーガーアイコンのコレクションです。
https://jonsuh.com/hamburgers
使い方：
<link href="dist/hamburgers.css" rel="stylesheet">
ハンバーガーメニューは、https：//github.com/jonsuh/hamburgersの実装に基づいています。ライブラリには、構成可能なハンバーガータイプがいくつか用意されています。メニューには特定のタイプを選択できます。
カスタムハンバーガーを使用できるようにするために、ハンバーガーコンポーネントでcx-hamburgerセレクター。このセレクターは扩展、libが提供するハンバーガーセレクターです。
$hamburger-typeハンバーガータイプの切り替えを容易にするために、ライブラリに設定できるタイプを導入しました。
お客様は、次のsass構成を使用してタイプを変更できます。
$cx-hamburger-type: elastic;
@import 'storefrontstyles/index';
注：storefrontstylesライブラリをインポートする前に、sass変数を設定する必要があります。
Accessibilityコンポーネントを並べ替える機能など、リアクティブなアプローチだけでは対処できないすべてのユースケース。ストアフロントにアクセスするさまざまなデバイスのユーザーエクスペリエンスを最適化するために、コンポーネントを並べ替える必要がある場合もあります。Spartacusのヘッダーは良い例です。大画面ではすべての要素が表示されますが、小さなデバイスでは一部のコンポーネントがハンバーガーメニューの後ろに隠れており、一部は再配置されています。
CSSはフレックスボックスやグリッドなどのDOM要素の並べ替えをサポートしていますが、DOM要素の並べ替えはHTMLタブシステムと同期していません。これは、タブシステムを使用してストアフロントを閲覧する人々に最高のエクスペリエンスを提供しません。ブレークポイントごとのスロット構成は、この問題を解決します。各ブレークポイントのレイアウトを（再）構築します。
例：
ハンバーガーメニューはプリヘッダースロット内にあります。
