【jQuery】ドロワーメニュー
はじめに
どうも、NNCの石上です。
唐突ですが、先日個人サイトを公開しました。暇な時にでも見てもらえると嬉しいです。
さて、何の脈絡もなく宣伝をねじ込んで来たように見えますが、実は今回の記事の内容と少し関係しているのです。早速本題に入りましょう。
ドロワーメニュー
今回作成するのは「ドロワーメニュー」になります。
先ほど紹介した僕の個人サイトをはじめとして、現在多くのWebサイトで採用されているものになります。どんなものか、ざっくり確認してみましょう。
右上のボタン（線が2本まとまってるやつ）を押すと、
画面外からナビゲーションが出てくる、という挙動になります。
実際のコード
それではコードの方を確認してみましょう。
CSSの記述を見てみると、「active」というクラスの有無でスタイリングを切り替えている箇所があるのが分かると思います。後々重要になるので、頭の隅にでも置いておきましょう。
<div class="l-wrap">
<main class="l-main">
<h1>Drawer Menu</h1>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vitae eveniet soluta odit laboriosam dolorum distinctio quis delectus non, aut inventore vel aliquid veritatis reprehenderit? Dolor, velit. Neque, voluptates itaque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vitae eveniet soluta odit laboriosam dolorum distinctio quis delectus non, aut inventore vel aliquid veritatis reprehenderit? Dolor, velit. Neque, voluptates itaque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt vitae eveniet soluta odit laboriosam dolorum distinctio quis delectus non, aut inventore vel aliquid veritatis reprehenderit? Dolor, velit. Neque, voluptates itaque.</p>
</div>
</main>
<!-- ナビゲーションエリア -->
<nav class="l-nav">
<!-- メニュー：最初は隠れています -->
<div class="l-nav__menu">
<h3>menu</h3>
<ul>
<li>about</li>
<li>product</li>
<li>service</li>
<li>recruit</li>
<li>contact</li>
</ul>
</div>
<!-- ボタン：これを押すことでメニューが現れたり消えたりします -->
<div class="l-nav__btn">
<span></span>
<span></span>
</div>
</nav>
</div>/* メインコンテンツエリア：今回はあまり重要では無いです */
.l-main {
width: 1000px;
height: 100vh;
margin: 0 auto;
padding: 50px;
}
.l-main h1 {
font-size: 3rem;
margin-bottom: 50px;
}
.l-main p {
font-size: 1.4rem;
letter-spacing: 1.4px;
line-height: 1.4;
margin-bottom: 25px;
}
/* ナビゲーションエリア */
/* ボタン：初期状態 */
.l-nav__btn {
position: absolute;
top: 50px;
right: 80px;
}
.l-nav__btn span {
display: block;
width: 20px;
height: 4px;
background-color: #333;
transition: all 0.4s;
}
.l-nav__btn span:first-of-type {
margin-bottom: 6px;
}
/* ボタン：押した後のスタイリング */
.l-nav__btn.active span {
background-color: #fff;
}
.l-nav__btn.active span:first-of-type {
transform: translate(0px, 5px) rotate(45deg);
}
.l-nav__btn.active span:last-of-type {
transform: translate(0px, -5px) rotate(-45deg);
}
/* メニュー：初期状態 */
.l-nav__menu {
position: absolute;
top: 0;
right: -200px; /* widthと同じ分の値を設定して、画面外に押しやります*/
width: 200px;
height: 100vh; /* 100vhによって、画面の高さ一杯に表示されます */
padding: 30px;
padding-top: 120px;
background-color: #333;
}
.l-nav__menu h3, .l-nav__menu li {
color: #fff;
}
.l-nav__menu h3 {
font-size: 3rem;
margin-bottom: 40px;
}
.l-nav__menu li {
margin-bottom: 20px;
font-size: 1.6rem;
}
.l-nav__menu li:last-of-type {
margin-bottom: 0;
}$(function(){
$('.l-nav__btn').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.l-nav__menu').animate({right: '-200px'},500);
}else{
$(this).addClass('active');
$('.l-nav__menu').animate({right: '0px'},500);
}
});
})解説
最初に全体の流れを把握したいですね。以下のようになるかと思います。
1. ボタン(.l-nav__btn)をクリックした時、
2. ‘active’というクラスの有無によって、条件分岐を設定。
3-a. 有る場合は、クラスを除去した上でメニューを画面外に。
3-b. 無い場合は、クラスを付与した上でメニューを画面内に。
ちょっと長くなりますが、一つ一つ解決していきましょう！
まず、今回のシステムで重要になるのが、条件分岐です。
特定の条件に当てはまった場合・当てはまらなかった場合の処理を別個で用意することで、それぞれのシチュエーションに応じた動作を設定することが出来ます。記述方法はこんな感じになります。
if (条件) {
条件が成り立った場合の処理
}else{
条件が成り立たなかった場合の処理
}…これだけでは正直ピンと来ないと思うので、実際のコードでどのように利用されているか確認していきましょう！
$('.l-nav__btn').on('click',function(){
if($(this).hasClass('active')){ //'active'というクラスを...
//持っていた場合
$(this).removeClass('active');
$('.l-nav__menu').animate({right: '-200px'},500);
}else{
//持っていなかった場合
$(this).addClass('active');
$('.l-nav__menu').animate({right: '0px'},500);
}
});ボタン(.l-nav__btn)をクリックした際に、まずこれが’active’というクラスを持っているかどうかを調べます。ここではhasClassメソッドを使いましょう。
【対象.hasClass( ‘検出したいクラス名’);】という記述形式になります。
if($(this).hasClass('active')){ ここで調べたクラスの有無を、そのまま条件として設定します。これにより、クラスを持っている場合と持っていない場合とに分岐させることができるのです。’active’が付与された時のスタイリングは、CSS上ですでに完了している状態なので、後はそれぞれの動作制御さえ記述できれば完成です。
分岐後の動作制御は以下のようになります。
・クラスを持っている場合（メニューが現れている状態）:
$(this).removeClass('active');
$('.l-nav__menu').animate({right: '-200px'},500);
//クラスを除去した上で画面外に移動・クラスを持っていない場合（メニューが隠れている状態）：
$(this).addClass('active');
$('.l-nav__menu').animate({right: '0px'},500);
//クラスを付与した上で画面内に移動ここで利用するメソッドについて、確認していきましょう。
クラスの除去・付与は、removeClass/addClassメソッドを利用しましょう。任意のクラスを削除したり追加したりする時に用います。書き方はこんな感じ。
$(this).removeClass('active'); //クラスの削除
$(this).addClass('active'); //クラスの追加アニメーションによるメニューの表示は、animateメソッドを利用しましょう。下の例では、【対象.animate( {cssプロパティ: 値} , 秒数)】という形で記述しています。（easingの設定は省略していますが、余裕があれば調べて加筆して見ましょう）
$('.l-nav__menu').animate({right: '-200px'},500); //0.5秒で画面外に追いやります
$('.l-nav__menu').animate({right: '0px'},500); //0.5秒で画面内に連れてきますここまでの内容で、
「クラスの有無による条件分岐を設定し、それぞれの状況に応じてクラスの付け外し・メニューの移動を行う」ことができるようになりました。
今回はここまでになります！
