サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
2020.12.05
スマホでWebサイトを見ることが当たり前になった現在、スマホでのメニュー表示はハンバーガーメニューが主流ですね。
今回はハンバーガーメニューの実装方法についてご説明します。
目次
「ハンバーガーメニュー」を知らない方のためご説明させていただきます。
ハンバーガーメニューとは、「ボタンを押すことで開閉できるメニュー」のことです。
ちなみになぜハンバーガーメニューという名前かといいますと、メニューということを表している上画像のような横棒3つのアイコンがハンバーガーに見えるからという理由です。
それでは、実装方法を見てみましょう。
以下Codepen内のコードをコピペで簡単に実装できます。
See the Pen
hamburger menu by spiqa design (@spiqa_design)
on CodePen.
各コードを見ていきましょう。
ハンバーガーアイコンまたは黒背景がクリックされた時に、「#nav-wrapperが指定されている要素に.openクラスを追加する、.openクラスが追加されている時は削除する」という記述をしています。
黒背景とは、メニューを開いている時に後ろに表示される背景のことです。
黒背景を敷くことでメニューが見やすくなり、メニューを開閉する役割も担うことでユーザビリティが向上します。
nav-wrapperの中に以下3つを記述しています。
・hamburger→ハンバーガーアイコン
・sp-nav→上記アイコンを押したらスライド表示されるメニュー
・black-bg→メニュー表示中に表示する黒背景
上記HTMLと同じように、3つに分けて記述しています。
・hamburger
ハンバーガーアイコンの位置と形をスタイルで指定しています。
また、クリックされたらハンバーガーアイコンが「×」になるよう記述しています。
・sp-nav
ハンバーガーメニューをクリックするまではウィンドウ右側に隠しておき、クリックされたら右側からスライドしてくるよう記述しています。
・black-bg
ハンバーガーアイコンをクリックするまでは非表示にしておき、クリックされたらメニュー背景全体を覆うように記述しています。
各項目全て、.openクラスが指定されている時のスタイルを忘れずに記述しましょう。
忘れたらクラスが追加・削除されるだけで動きません。
ハンバーガーメニューは難しいと思われがちですが、一度覚えてしまえば簡単です。
使いまわせるようにコードは最低限の記述にしていますので、コピペした後にサイトに合うようにスタイル調整してみてください。
株式会社スピカデザイン