jQueryとCSSでハンバーガーメニューを作る方法！
レスポンシブWEBデザインでよく見かけるハンバーガーメニューをjQueryとCSSを用いての作り方を紹介しています。スマホやタブレットで表示されるWEBサイトで用いられることの多いハンバーガーメニューを作れるようになりましょう。
jQueryとCSSでハンバーガーメニューを作りたい
ハンバーガーメニューとは
スマホタブレットでWEBサイトを表示した際に見かける３本線のアイコンのことを指しています。３本線のデザインがハンバーガーに見えることからハンバーガーメニューと呼ばれる由来です。
多くのサイトで適用されており、ハンバーガーメニューをクリックすることでメニュー一覧の表示・非表示が切り替わるような仕様になっています。
上記の特徴から画面のスペースが限られているスマホやタブレットで、省スペース化できます。
レスポンシブ対応の重要性
レスポンシブ対応とはPCやタブレット、スマホなど画面の幅が異なるデバイスで表示する際にそれぞれのデバイスでWEBサイトの見せ方を変えることでデバイスごとに見やすく最適な画面を提供することを指します。
現在ではスマホやタブレットの普及が進んでおり、多くのユーザーがスマホやタブレットといったデバイスでWEBサイトに訪問します。その際にPC表示のWEBサイトしか用意していないとスマホやタブレットユーザーにとっては見づらく、操作性の悪いサイトとなってしまい、ユーザーがWEBサイトから離れてしまう原因になってしまいます。
そのため、SEO対策においてもレスポンシブ対応は重要で、現代ではほぼ必須と言っても良いでしょう。
jQueryとCSSでハンバーガーメニューを作る方法
早速、ハンバーガーメニューの作り方を紹介していきます。
ハンバーガーメニューの作り方
まずはハンバーガーメニューアイコンの作り方を見ていきます。
index.html
<div class="hamburger-menu">
<span class="hamburger-menu__line"></span>
</div><!-- .hamburger-menu -->index.css
/* ハンバーガーメニュー */
.hamburger-menu{
display: flex;
align-items: center;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 10;
}
.hamburger-menu__line{
display: block;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #FFF;
position: relative;
transition: all 0.5s;
}
.hamburger-menu__line::before,
.hamburger-menu__line::after{
content: '';
display: block;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #FFF;
position: absolute;
transition: all 0.5s;
}
.hamburger-menu__line::before{
transform: translateY(-12px);
}
.hamburger-menu__line::after{
transform: translateY(12px);
}.hamburger-menuでハンバーガーメニューの大枠を設定しています。
その子要素として.hamburger-menu__lineでハンバーガーメニューの真ん中の線を表現しています。さらに、.hamburger-menu__lineの疑似要素::beforeと::afterでハンバーガーメニューの上下の線を表現します。
これだけでハンバーガーメニューのアイコンは完成です。
index.css
.hamburger-menu.open .hamburger-menu__line{
background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
transform: rotate(-45deg);
}ハンバーガーメニューアイコンをクリック時には✖印のアイコンに変化するようにスタイルを指定しています。
後に.hamburger-menuに.openというclass属性を与えるようにjQueryでコーディングしていきます。
ナビゲーションの作り方
次にハンバーガーメニューアイコンクリック時に表示、非表示となるナビゲーションを作っていきます。
index.html
<nav class="nav-sp">
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
</ul>
</nav><!-- .nav-sp -->index.css
body {
overflow-x: hidden;
}
/* ナビゲーション */
.nav-sp{
box-sizing: border-box;
position: absolute;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding: 60px 10px 0;
background-color: rgba(20,63,143,0.5);
text-align: left;
transition: right 0.5s;
}
.nav-sp a{
display: inline-block;
padding: 5px 0;
}.nav-spを非表示にするのではなく、rightプロパティで画面の外に出した状態にします。
このままの状態だと横方向にスクロールバーが現れ、画面の外に出したつもりのナビゲーションが見えてしまうため、bodyセレクタにoverflow-x:hiddenを指定します。
index.css
.nav-sp.open{
right: 0;
}ハンバーガーメニューをクリック時には画面の右からナビゲーションが表示されるようにスタイルを指定します。
.hamburger-menu同様に.nav-spに.openのclass属性を与えるようにjQueryでコーディングしていきます。
jQueryでハンバーガーメニューの機能の作り方
最後にjQueryでハンバーガーメニューが機能するように作っていきます。
index.js
'use stript';
$(function(){
// ハンバーガーメニュークリックイベント
$('.hamburger-menu').click(function(){
if($('.nav-sp').hasClass('open')){
// ナビゲーション非表示
$('.nav-sp').removeClass('open');
// ハンバーガーメニューを元に戻す
$(this).removeClass('open');
}else{
// ナビゲーションを表示
$('.nav-sp').addClass('open');
// ハンバーガーメニューを✖印に変更
$(this).addClass('open');
}
});
});機能を作りこむと言ってもjQueryで行っているのはclass属性の付け外しのみです。
.hamburger-menuがクリックされた際のイベントを設定しています。
クリック時にはhasClassメソッドで.nav-spセレクタがopenクラスを持っているかの判定をしています。持っている場合には、.nav-spとthis(.hamburger-menu)にopenクラスを与えて、持っていない場合にはopenクラスを外す処理を行っています。
まとめ
ハンバーガーメニューの作り方を見てきました。コピペで実装できるようになっていますので、参考にしてみてください。
また、自分なりにカスタマイズすることで理解も深まると思うので、ぜひチャレンジしてみてください。
下記ではCSSのみで作るハンバーガーメニューの作り方を紹介しています。ぜひあわせて参考にしてみて下さい。
