【コピペOK】HTML/CSSでハンバーガーメニューを作成する方法!

皆さんは「ハンバーガーメニュー」という言葉を聞いたことがありますか?

ハンバーガーと言われると某有名企業のハンバーガーを思い出すかもしれませんが、ハンバーガメニューとはスマートフォンサイトやタブレットサイト、最近ではPCサイトでも少し見かける三本線のナビゲーションメニューとなります。

ハンバーガーメニュー

ハンバーガメニューを使用することで、メニューの表示エリアを大きく表示することができ、ユーザーにとっては見やすいサイトを作成することができます。

今回は、HTML/CSSだけで実現できるハンバーガーメニューを作成する方法について解説していきます。

ハンバーガメニューとは

ハンバーガメニューとは下記のようなスマートフォンサイトやタブレットサイト、最近ではPCサイトでも少し見かける三本線のナビゲーションメニューとなり、ナビゲーションドロワーとも呼ばれています。

AmazonのTopページ

動き方としては、ハンバーガーメニューを押すことで、横からスライドしてグローバルメニューが表示されます。

また、ハンバーガーメニューはオープンするときは0.25秒以内でクローズするときは0.2秒以内で閉じるようにすることが望ましいとされています。

ハンバーガメニューを使用するならモバイル画面

ハンバーガメニューはモバイル画面で使用されているケースが多くみられます。

なぜなら、モバイル画面はPC画面と比べて画面が小さく、PCのようなヘッダーにグローバルナビゲーションを設置することが難しいからです。

使いにくいサイトはユーザービリティが下がってしまう傾向があります。
もし、モバイル画面でもヘッダーにグローバルナビゲーションを設置しするとメニューの表示が小さくなってユーザービリティが下がってしまう可能性があります。

しかし、ハンバーガメニューを使用することで、メニューの表示エリアを大きく表示することができ、ユーザーにとっては見やすくて使いやすいサイトを作成することができます。

その為、モバイル画面のように画面に表示しきれない場合はハンバーガメニューを使用しましょう。

ハンバーガーメニューを作成するサンプルコード

HTML/CSSでハンバーガーメニューを作成するサンプルコードを紹介します。

sample.html

style.css

出力結果

ハンバーガーメニューを押すと、横からグローバルメニューが表示されています。
また、hoverの擬似クラスを使用して、マウスがホバーした時に透明度を変えています。

今回のポイント

ハンバーガーメニューでメニューを作成

⚫︎ ハンバーガメニューとはスマートフォンサイトやタブレットサイト、最近ではPCサイトでも少し見かける三本線のナビゲーションメニューである

⚫︎ ハンバーガメニューを使用することで、メニューの表示エリアを大きく表示することができ、ユーザーにとっては見やすいサイトを作成することができる

⚫︎ ハンバーガーメニューはオープンするときは0.25秒以内でクローズするときは0.2秒以内で閉じるようにすることが望ましいとされている

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し