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

- オリジナルのハンバーガーメニューボタンを作りたい。
- メニュー開閉時に、アイコンに動きをつけたい。
- HTMLとCSSで作れるものにしたい。
ココがポイント
結論:
「::before」「::after」の擬似要素を使うことで、ハンバーガーボタンの三本線から、閉じるボタンのバッテンに変化をつけられる。また、input要素の「チェックボックス」を使用することで、クリックアクションに対して、メニューウィンドウの開閉が行える。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

皆様は、Webページを作成していると、ハンバーガーボタンを作成してメニューを開閉できるアイコンにしたいと思ったことはございませんか?
今回は、ウィンドウの左上に固定されたハンバーガーメニューボタンを作成。メニューウィンドウを開閉できるHTMLとCSSをご紹介します。JavaScriptを使わなくても、ユーザーのクリックアクションに対して、画面表示を変更できるので、お好みのカスタマイズをしやすい作りになっております。
1.画面と一緒にスクロールするハンバーガーメニュー
See the Pen
slide_menu by 三好雄介 (@yusuke5028198)
on CodePen.
ウィンドウの左上に固定されたメニューボタンを作成しています。OPENとCLOSEボタンもメニューウィンドウについて移動してくれるので、なかなかアニメーションとして面白いと思います。
参考
CSSのそれぞれのコードの意味
開閉ボタンボックスのCSSスタイル
.nav-button{ position: absolute; top: 0; right: -50px; width: 50px; height: 50px; background: #689EFB;/*ボックス背景色*/ color:#fff;/*文字色*/ text-align: center; }
2行目の「position: absolute;」で絶対的な位置にボックスを配置しています。今回は親要素となる<div id="nav-drawer">が「position: relative;」とpositionプロパティの値がstatic以外なので親枠の左上が絶対的な位置の基準となります。
ボックスのサイズを5~6行目で幅50px(ピクセル)・高さ50pxにし、3~4行目で親要素からの位置を上と右から-50pxに指定することで、スライドメニューウィンドウの右上にくっついた状態にしています。
開閉ボタンのopenとcloseの切り替え
.nav-button:after{ position: relative; bottom: 4px;/*テキスト下からの位置*/ content: "open"; } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-menu .nav-button:after{ content: "close"; }
擬似要素「:after」を使用することで、JavaScriptの「text()」メソッドを使わずにテキストの入替を行っています。
CSSで文字列「open」を表示させているので、7行目のinput要素にchecked属性が付与された場合のセレクタを使用することで、「close」に文字列を表示変更できるようにしています。
開閉ボタンのハンバーガーメニューボタンのスタイルとアクション
#nav-open span, #nav-open span:before, #nav-open span:after { position: relative; height: 3px;/*線の太さ*/ width: 25px;/*長さ*/ border-radius: 3px; background: #fff;/*アイコン色*/ display: block; content: ''; transition: all 0.5s ease-in-out;/*アニメーションの速さ*/ } #nav-open span:before{ top: -10px; } #nav-open span:after{ top: 7px; } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-menu .nav-button #nav-open span:before{ top: 0; transform: rotateZ(45deg) scale(4); } #nav-input:checked ~ #nav-menu .nav-button #nav-open span{ transform: scale(0.25) rotateY(360deg); } #nav-input:checked ~ #nav-menu .nav-button #nav-open span:after{ top: -3px; transform: rotateZ(-45deg) scale(4); }
このセレクタ部分で、三本線の「ハンバーガーメニューボタン」のスタイルを指定しています。
「2.ハンバーガーメニューボタンにアクションをつける」で紹介している記事の「ハンバーガーメニューボタンのアクション」とはセレクタがことなっております。ただし、「span」「span:before」「span:after」のそれぞれの役割は同じなので、対応するCSSスタイルを入れ替えると、ご紹介しているアクションに変更することができます。
x軸方向に回転の場合
#nav-input:checked ~ #nav-menu .nav-button #nav-open span{ transform: scale(0.25) rotateX(360deg); }
y軸方向に回転の場合
#nav-input:checked ~ #nav-menu .nav-button #nav-open span{ transform: scale(0.25) rotateY(360deg); }
z軸方向に回転の場合
#nav-input:checked ~ #nav-menu .nav-button #nav-open span{ transform: scale(0.25) rotateZ(360deg); }
色変更の場合
#nav-open span, #nav-open span:before, #nav-open span:after { top: 10px; position: relative; height: 3px;/*線の太さ*/ width: 25px;/*長さ*/ border-radius: 3px; background: #fff;/*アイコン色*/ display: block; content: ''; transition: all 0.5s ease-in-out;/*アニメーションの速さ*/ } #nav-open span:before{ top: -20px; } #nav-open span:after{ top: -13px; } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-menu .nav-button #nav-open span:before{ background:#00FF00;/*変化後の色_緑*/ top: 0; transform: rotateZ(-90deg); } #nav-input:checked ~ #nav-menu .nav-button #nav-open span{ background: #FF0000;/*変化後の色_赤*/ top: 0; transform: rotateZ(45deg); } #nav-input:checked ~ #nav-menu .nav-button #nav-open span:after{ top: 0; transform: rotateZ(-45deg) scale(0); }
2.ハンバーガーメニューボタンにアクションをつける
ハンバーガーメニューボタンのアクションについて、HTMLとCSSで簡単につくれるものをご紹介しています。参考までにどうぞ。
もっと詳しく
CSSだけで簡単に「ハンバーガーメニューボタン」が作れる方法について詳しく書かれている記事です。
まとめ
お疲れ様でした。
今回は、JavaScriptを使用しなくても、スライドメニューが作成できるので紹介いたしました。
画面スクロールに合わせて移動できるスライドメニューは、利便性がよく是非Webページに追加しておきたいですね。「ハンバーガーメニューボタン」もCSSスタイルを使用することで、アクションのあるデザインにできるので、お好みのスタイルを自作してみても面白いと思います。
最後まで、ご一読いただきありがとうございました。