以前、スマートフォンなどのメニューにもよく使われるアコーディオンメニューを、jQueryを使用した形で制作致しましたが、今回はjQueryを使用せず、CSSのみで制作した多階層のアコーディオンメニューコードを記載します。
「なるべくscriptは使いたくない」「jQueryが使える環境ではない」「多階層のアコーディオンをCSSだけで作ると滑らかに開閉せず困っている」などの理由がある方に役立つコードになると思います。
また、jQueryで制作した時もそうでしたが、CSSでの装飾はほとんどせずに、シンプルな形で掲載致しますので、使用する場合は自身のサイトにあった装飾を各自でお願い致します。
１．HTMLファイル
HTML
Copied
COPY
<!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 class="accordion">
<!--1階層アコーディオン start-->
<label for="menu1">menu1 ▼</label>
<input type="checkbox" id="menu1" class="toggle" />
<ul>
<li><a href="#">menu1.1</a></li>
<li><a href="#">menu1.1</a></li>
</ul>
<!--1階層アコーディオン end-->
<!--2階層アコーディオン start-->
<label for="menu2">menu2 ▼</label>
<input type="checkbox" id="menu2" class="toggle" />
<ul>
<li><a href="#">menu2.1</a></li>
<li><a href="#">menu2.1</a></li>
<label for="menu2_1">menu2.1 ▼</label>
<input type="checkbox" id="menu2_1" class="toggle" />
<ul>
<li><a href="#">menu2.2</a></li>
<li><a href="#">menu2.2</a></li>
</ul>
</ul>
<!--2階層アコーディオン end-->
<a href="#">menu3</a>
</nav>
<!--アコーディオンメニュー部分 end-->
</header>
</body>
</html>1階層と2階層のアコーディオンメニューのHTMLコードです。
1階層だけしか必要なければ、1階層の部分のコードを必要な分だけ繋げてコピーすればよいですし、1階層と2階層どちらも混ぜて使う場合は、上手く組み合わせて貼り付けます。
ポイントとしましては、inputのcheckboxを使用して表示と非表示を切り替えているコトです。
また、inputの上にlabelタグを付け、「labelタグ内にfor=”menu1″」を設置し直下の「inputのid=”menu1″」と結びつけるコトで「menu1 ▼」のタイトル部分の領域のどこをクリックしても反応するようにしています。
２．CSSファイル
CSS
Copied
COPY
.accordion ul {
list-style: none;
margin:0;
}
label{
cursor: pointer;
}
.toggle{
display: none;
}
.toggle + ul{
max-height: 0;
overflow: hidden;
transition: all .5s ease;
}
.toggle:checked + ul{
max-height: 500px;
transition: all 2s ease-in;
}さすがにjQueryを使用する時よりは多くなりますが、基本はこれだけになります。
ポイントとしましては、max-heightを使用しクリックした後に現れるulタグの高さを500pxに設定するコトです。
実際は500pxである必要はないのですが、実際に必要とする高さより大きめの数字を入れないと中身が見切れると言う不具合が起きます。
アコーディオンメニューを制作する時に、開閉する時の動作をスムーズに、滑らかに開閉出来るようにしたいと思うと、jQueryを使用する形であれば簡単に出来るのですが、CSSのみで制作しようとするとちょっとした壁に当たります。
jQueryであれば、開閉の際に使うCSSのコードは「display:none;」と「display:block;」を切り替えて、開閉させるのですが、CSSのみのアコーディオンメニューで開閉の切り替えをjQueryの時と同じようにdisplayの切り替えで行うと、CSSに「transition」を使用してもスムーズには開閉しません。
それでもイイよと言う方であれば、記述コードも少なくて済みますし、displayの切り替えで良いのですが、滑らかな感じが欲しい場合は、「max-height: 0;」と「overflow: hidden;」を使用する形でメニューの中身を隠さないとなりません。
高さの指定に「max」を使用するのが上記でも述べましたが大きなポイントで、通常の「height」だとキチンと開く高さを設定しないといけなかったり、入っているメニューの量によって各ulタグの高さを変えないとならなくなってしまいます。
どういうコトかと言うと「menu1 ▼」の中にはメニューが２つだけど、「menu2 ▼」の中にはメニューが５つなどの場合、「menu1 ▼」に合わせて開いた時のulタグのheightを40pxにした場合、「menu2 ▼」は100px必要なので、途中までしか開かなくなってしまうのです。
その為に「menu2 ▼」のulタグに高さを改めて指定し直したり、さらに多階層、「menu2 ▼」の中に階層があれば、それに合わせてまた高さをと設定していくと、かなり記述が増えてしまいますし、計算もめんどくさいモノです。
開く高さを「height:auto;」で解決出来れば良いのですが、それだとスムーズに開閉はしません。
しかし「max-height」を使用し、大きめに高さをしておくとスムーズに開閉し、問題を解決してくれるのです。
３．デモ
以上、後はお好みで装飾してくださいませ。