jQuery を使ってハンバーガーメニューに動きをつける
jQuery を使って、ハンバーガーメニューを閉じるマークに変更する指定を行います。
なお、今回の記事では jQuery についてのみ説明しますので HTML と CSS については別の記事を参考にしてください。
ハンバーガーメニューをクリックすると、「三本線→閉じるマーク」へ変更するように jQuery を記述していきます。
HTML
<button class="p-hamburger js-hamburger">
<span>メニュー展開ボタン</span>
</button>
Sass （ FLOCSS で記述）
.p-hamburger {
width: 60px;
height: 60px;
border: none;
outline: none;
background: #FFEDEE;
position: relative;
&::before,
&::after {
position: absolute;
content: '';
height: 2px;
background: #333;
border-radius: 5px;
left: calc( 50% - ( 30px / 2 ) );
transition: 0.5s;
}
&::before {
width: 30px;
top: 21px;
}
&::after {
width: 20px;
top: 39px;
}
span {
font-size: 0;
position: absolute;
content: '';
width: 30px;
height: 2px;
background: #333;
border-radius: 5px;
top: 50%;
left: calc( 50% - ( 30px / 2 ) );
transition: 0.5s;
}
&.is-open {
&::before {
transform: rotate( 45deg );
transition: 0.5s;
top: 28px;
}
&::after {
transform: rotate( -45deg );
transition: 0.5s;
width: 30px;
top: 28px;
}
span {
background: none;
}
}
}目次
jQuery の記述方法
jQuery でクリック時 is-open セレクタを追加、削除する toggleClass() メソッドを使用します。
「 toggleClass() 」
toggleClass() は、指定した要素に特定の class を付与または削除するメソッドです。
Sass の is-open セレクタを確認しましょう。
&.is-open {
&::before {
transform: rotate( 45deg );
transition: 0.5s;
top: 28px;
}
&::after {
transform: rotate( -45deg );
transition: 0.5s;
width: 30px;
top: 28px;
}
span {
background: none;
}
}
is-open に、閉じるマークになった際のスタイリングをしています。
クリック前は三本線の状態なので、「 toggleClass() を使ってハンバーガーメニュー（三本線の状態）をクリックすると、 is-open クラスを付与する。もう一度クリックすると、 is-open クラスを削除する」指定を記述します。
hamburger.js
jQuery( function( $ ) {
$( ".js-hamburger" ).on( "click", function() {
$( this ).toggleClass( "is-open" );
} );
} );
詳しく説明します。
まず、 jQuery( function( $ ){} で「今から jQuery の指定を記述する宣言」を行います。指定内容は {} 内に記述してください。
$( ".js-hamburger" ).on( "click", function() {} は「 js-hamburger を指定している箇所をクリックした際、記述したイベント処理が実行される」という意味です。
HTML を確認してください。
<button class="p-hamburger js-hamburger"> // js-hamburger が指定されている
<span>メニュー展開ボタン</span>
</button>button タグに js-hamburger と書かれています。ですから、今回の場合は js-hamburger を指定している button タグをクリックするとイベント処理が実行されることになります。「 js- 」としているのは、 Js での指定の際に使用する class 名だと一目で理解するためです。
そして、 $( ".js-hamburger" ).on( "click", function() {} 内に $( this ).toggleClass( "is-open" ); と記述します。 $( this ) の this は js-hamburger を意味しています。
toggleClass() は指定した要素に特定の class を付与または削除するメソッドと説明しました。 $( this ) の this は js-hamburger を意味しており js-hamburger は button タグに書かれているので、 $( this ).toggleClass( "is-open" ); は「 js-hamburger を指定している button タグに is-open のスタイルを付与したり削除したりする」という意味となります。
説明文を含めたコードは以下です。
hamburger.js
jQuery( function( $ ) {
$( ".js-hamburger" ).on( "click", function() { // js-hamburger を指定している button タグをクリックした際、以下のイベント処理が実行される
$( this ).toggleClass( "is-open" ); // js-hamburger を指定している button タグに is-open のスタイルを付与したり削除したりする
} );
} );説明文を読むと、どのコードがなにを意味しているのかが理解しやすくなったのではないかと思います。
ひとつずつ紐解いてコードの意味を理解していってくださいね。
