今回は、スマートフォンなどのメニューにもよく使われるアコーディオンメニューの多階層用コードを記載したいと思います。
正直ネットで検索すれば、たくさん出てくるソースコードですので、いまさら感がありますが、基本的に掲載されているコードは飾り(CSS)などがしっかりされているので、初心者さんから見ると複雑にみえてしまったりするモノが多いです。
また、掲載されているサンプルコード自体が、理想通りの状態であればそのままコピペして、使用すれば問題ないのですが、自分のサイトデザインに合わせて埋め込みたい場合や、余計な機能が付いていると、あまり詳しくない人だと、どこを変えれば？どこのコードを外してイイのか、わからなかったりするモノです。
ですので、ここでは１番シンプルな形で掲載したいと思います。
１．HTMLファイル
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!--アコーディオンメニュー部分 start-->
<nav id="accordion">
<ul>
<!--1階層アコーディオン start-->
<li><span>menu1 ▼</span>
<ul class="close">
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
</li>
<!--1階層アコーディオン end-->
<!--2階層アコーディオン start-->
<li><span>menu2 ▼</span>
<ul class="close">
<li><a href="#">menu2.1</a></li>
<li><a href="#">menu2.1</a></li>
<li><span>menu2.1 ▼</span>
<ul class="close">
<li><a href="#">menu2.2</a></li>
<li><a href="#">menu2.2</a></li>
</ul>
</li>
</ul>
</li>
<!--2階層アコーディオン end-->
<li><a href="#">menu3</a></li>
</ul>
</nav>
<!--アコーディオンメニュー部分 end-->
</header>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
1階層と2階層のアコーディオンメニューのHTMLコードです。
1階層だけしか必要なければ、1階層の部分のコードを必要な分だけ繋げてコピーすればよいですし、1階層と2階層どちらも混ぜて使う場合は、上手く組み合わせて貼り付けます。
使うid,classは「accordion」と「close」の２つです。
idとclassを設置する場所があっていれば、名前は「accordion」や「close」ではなくてかまいません。
id=”accordion”とは<nav id=”accordion”>〜</nav>と言うタグに囲われてる範囲をaccordionの範囲と呼びます！と言う決め事です。
1つのHTMLファイルの中で、同じ名前のidは存在してはいけないので、例えばヘッダーメニューでアコーディオンメニューを使って、フッターメニューでもアコーディオンメニューを使うなどと言った、1つのHTMLファイル内で複数アコーディオンメニューを使う場合は、id=”accordion”の部分をclass=”accordion”書き換えて使用します。
いやだったら、最初からclassにしたらイイじゃないか！とツッコミを入れたくなる人もいるかもしれませんが、話がどんどんそれていってしまうので、放っておきます。
class=”close”とは<ul class=”close”>〜</ul>と言うタグに囲われてる範囲をcloseの範囲と呼びます！と言う決め事です。
意図的にアコーディオンメニューの中身を最初から開いておきたいと言う場合もあるでしょうが、基本的にスマホサイトなどではスペースを取りたくない為にアコーディオンメニューは閉じた状態にしておきたいモノです。
次のCSSファイルの説明でしますが、class=”closeはメニューを隠しておくための記載です。
あとはファイル下部に、
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
とコードがありますが、今回のアコーディオンメニューにはjQueryを使用しますので、このコードが必要となります。
２．CSSファイル
ul li {
list-style: none;
cursor:pointer;
}
.close{
display: none;
}
これだけです。
ul li タグには、リストマーク(テキスト最初に付く「･」みたいなやつ)が付かないようにするための指定とマウスオンした時に、カーソルが指マークに変わるように指定してあるだけです。
HTMLファイルの部分でふれた、closeには「display: none;」と指定することで非表示にしました。
３．JSファイル
$(function () {
$('#accordion li span').click(function() {
$(this).next('ul').slideToggle();
});
});
これだけです。
id=”accordion”の範囲の中にあるli要素の中のspan要素部分をクリックする度に、そのspan要素の次に配置されているul要素を非表示にしたり、表示したりする。
と言う命令文になっています。
４．デモ
Menuをクリックすると、階層っぽく右にズレて表示されますが、これはCSSをリセットしていないので、ulにpaddingが効いているせいです。
自分でお好みのCSSを設定しましょう。