近年のWebサイト制作では、特にスマートフォン向けのナビゲーションとして「ハンバーガーメニュー」が定番になっています。

ハンバーガーメニューとは、画面右上に表示される三本線のアイコンをクリックするとメニューが展開されるデザインのことで、以下のようなメリットがあります。

• 見た目がコンパクト
• 限られた画面スペースを有効活用できる

今回のCodePenハンバーガーメニューの特徴

今回紹介するCodePenのハンバーガーメニューは、ただの開閉メニューではありません。

主な特徴

• 3本の線がアニメーションしながら伸縮
• クリックで1本目と3本目の線が交差して「×」に変形
• 2本目は透明になり消える
• 背景に半透明マスクが表示され、クリックでメニューを閉じられる

このように、見た目の遊び心と操作性を両立しています。

HTML・CSS・JSの仕組み

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

HTML

• <div class="hamburger"> が3本線のボタン
• <ul class="nav-list"> が開閉するナビ
• <div id="mask"> が背景マスク

CSS

• @keyframes で線の長さをアニメーション
• .open クラスで「×」変形、メニューのスライド、マスク表示

JavaScript（jQuery）

• ハンバーガークリックで .open クラス付与/削除
• マスククリック・リンククリックでメニュー閉鎖

ハンバーガーメニューを使うメリット

• スマホ表示で画面スペースを有効活用
• アニメーションで状態が視覚的にわかる
• デザインに動きを加えられる

特に今回のアニメーション付きデザインは、UX（ユーザー体験）向上に直結します。

よくあるミスと注意点

• アニメーションが重すぎて表示が遅くなる
• 線やメニューの位置がずれる
• スマホでタッチ判定がずれる
• リンクを押してもメニューが閉じない

今回のCodePenは、.hamburgerクリックとマスククリックで確実に開閉できるため、こうした問題を防げます。

まとめ

アニメーション付きハンバーガーメニューは、動きのあるUXとスマホ最適化を両立できるデザインです。
CodePenを参考にすれば、初心者でも簡単に自分のサイトに組み込むことが可能です。

• 見た目の遊び心を出したい
• スマホで使いやすいナビゲーションを作りたい

という場合に最適です。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。