こんにちは、タクローです。
今回は、jQueryを使ったナビゲーションメニューの作成方法について解説します。
今回、解説するメニューは以下の2つです。
- クリックするとメニューが下へスライドするメニュー
- マウスポインタを上に置くとメニューが下へスライドするメニュー
これら上下スライドするアコーディオンメニューは、ウェブサイトでよく見かけます。
ウェブプログラミングを勉強している方であれば、一度は実装してみたいと思うはずです。
今回は、jQueryの基本的な部分は割愛させていただき、スライドするメニューの仕組みに焦点を当てて、簡単でわかりやすく解説していくつもりです。
これから解説するアコーディオンメニューについては、さまざまなウェブサイトやブログなどで作成方法が公開されています。
とは言っても、初心者の方にとって、ハードルが高いのもまた事実でしょう。
この記事ではあえて、とてもシンプルなメニューのコードを載せることで、初心者の方が理解しやすいようにしてあります。
どうぞ最後までお付き合いください。
目次
スライドするメニューのデモ
まずは出来上がりのデモを実際に操作してみてください。
「CLICK」をクリックすると、メニューがスライドします。
「HOVER」の上にマウスポインタを置くと、メニューがスライドします。
HTMLファイルをCSSファイルについて
先のスライドするアコーディオンメニューを作成するにあたり、用意したファイルについて説明します。
まず、HTMLファイル。
もし、実際に作成してみるのであれば、ファイルに適当な名前（index.htmlなど）をつけてください。
HTMLファイルの内容は以下のとおりです。
何となく目を通しておいてください。
メニューサンプル
同じ階層のCSSファイル（例では「style.css」）、JavaScriptファイル（例では「menu.js」）を用意して、読み込んでいます。
さらに、同じ階層に「vendor」フォルダを用意し、その中のダウンロードしたjQueryのファイルを読み込んでいます。
ダウンロードしたjQueryのファイルは、JavaScriptファイル（menu.js）より前で（上の行で）読み込むようにしましょう。
そうでないと正常に動作しませんので要注意です！
HTMLファイルの内容についての解説ですが、それほど難しい点はないと思います。
「nav」タグ内に「ul」タグと「li」タグを使ってメニューを構成しています。
上下にスライドさせるメニューについては、「li」タグの中に、「ul」タグと「li」タグをネストさせている点に注意が必要です。
次にCSSファイル（例では「style.css」）の内容です。
@charset "utf-8";
nav {
width: 100%;
}
ul, li {
list-style: none;
}
.menu-click, .menu-hover {
width: 80%;
margin: 0 auto;
}
.menu-click ul, .menu-hover ul {
display: none;
}
.menu-click div {
color: #FFFFFF;
background-color: #333333;
cursor: pointer;
}
.menu-hover div {
color: #FFFFFF;
background-color: #666666;
cursor: pointer;
}
.menu {
text-align: left;
margin: 0;
padding: 15px 50px;
}
.menu + ul {
margin: 0;
padding: 0;
}
.menu + ul li {
color: #000000;
background-color: #CCCCCC;
padding: 15px 80px;
}
スライドするメニュー「menu-click」セレクタと「menu-hover」セレクタにネストされた「ul」タグが、「display: none;」となっていることに注意してください。
メニューをクリックしたり、マウスポインタを上に置いたりするまでは、非表示となっているわけです。
初めの状態は「display: none;」としておかなくてはいけないのです。
他の部分は「margin」や「padding」、文字色や背景色を設定している程度です。
いたってシンプルです。
スライドするアコーディオンメニューjQueryについて
次にJavaScriptファイル（menu.js）の内容についてです。
今回のデモのように動作させるアコーディオンメニューはjQueryで書いていきます。
$(function() {
var mclick = $('.menu-click > li');
$(mclick).click(function() {
$(this).toggleClass('menu-open');
if ($(this).hasClass('menu-open')) {
$('ul', this).slideDown();
} else {
$('ul', this).slideUp();
}
});
var mhover = $('.menu-hover > li');
$(mhover).hover(function() {
$('ul:not(:animated)', this).slideDown();
}, function() {
$('ul', this).slideUp();
});
});
クリックすると下へスライドさせるjQuery
先のソースをもとに、クリックすると下へスライドするjQueryを解説していきます。
初めに、CSSセレクタ「menu-click」の子要素「li」タグ、つまり「div」タグで囲まれた「CLICK」の文字列箇所を用意した変数「mclick」に入れています。
次に、変数「mclick」に対して、「click」メソッドです。
「click」メソッドの処理内容を見ていきます。
まず注目すべきは、「toggleClass」メソッドです。
引数に「menu-open」を指定することで、要素にクラス「menu-open」が存在していれば付与、存在していなければクラス「menu-open」を取り除く処理を自動でしてくれます。
実際にクリックした要素に対し処理をしますので、「$(this)」を使用します。
次を見ていきましょう。
「hasClass」メソッド、対象の要素「$(this)」にクラス「menu-open」が存在していれば「True」を返し、存在していなければ「False」を返します。
続けて見てください。
$(‘ul’, this).slideUp();
対象の要素「$(this)」の子要素である「ul」タグに対し、スライドする処理が「slideDown」メソッド、「slideUp」メソッドとなるわけです。
それを踏まえた上で「条件分岐」（if）の処理を見てみましょう。
対象の要素「$(this)」にクラス「menu-open」が存在していれば、「slideDown」メソッド、存在していなければ、「slideUp」メソッドの処理を行います。
つまり下のようになるわけです。
$(‘ul’, this).slideDown();
} else {
$(‘ul’, this).slideUp();
}
マウスポインタを置くと下へスライドさせるjQuery
先ほどを同じように、CSSセレクタ「menu-hover」の子要素「li」タグ、つまり「div」タグで囲まれた「HOVER」の文字列箇所を用意した変数「mhover」に入れています。
次に、変数「mhover」に対する「hover」メソッドです。
A
}, function() {
B
});
「hover」メソッドは、カンマで区切ることで、マウスポインタを置いた時の処理とマウスポインタを外した時の処理を記述することができます。
対象の要素にマウスポインタを置くと「A」の処理を行い、マウスポインタが外れると「B」の処理を行うというわけです。
以下は、マウスポインタを置いた時の処理です。
「slideDown」メソッドは先に解説したとおりです。
この処理中の「$(‘ul:not(:animated)’, this)」とは、どういう意味でしょうか？
「アニメーションの途中（スライドしている最中）に、スライド処理を実行しない」という意味です。
「:not(:animated)」というちょっとした工夫を「slideDown」メソッドを使うときに入れてあげましょう。
以下は、マウスポインタを外した時の処理です。
これに関しては、「slideUp」メソッドなど、先に解説した処理と全く同じです。
まとめ
基本的なスライド動作するアコーディオンメニューの作成方法はいかがでしたでしょうか。
今回、解説させていただいたのは、複雑で難しいことをできる限り省いています。
中にはもっと凝った動きやデザインをやってみたいと思う方もいらっしゃると思います。
これらの基本をちゃんと理解しておけば、次のステップに入っていきやすいのではないでしょうか。
私もまだまだ発展途上。
お互い頑張って新しいことをどんどん吸収して、スキルアップに努めてまいりましょう。
最後まで、お付き合いいただき、ありがとうございました。