人気ブログランキング | 話題のタグを見る

アコーディオンメニュー

CSSだけでメニューが開いたり閉じたりするアコーディオンを作る!javascript不要』という記事があったので、真似して HTML edit E で試してみた。

まずチェックボタンを作る。id は chk1 にしておく。

<input type="checkbox" id="chk1">

実行して確認。次にチェックボタンの下に ul 要素を作る。Emmet のおかげで、ul>li{item $}*3 を展開すればできる。

<input type="checkbox" id="chk1">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

この ul 要素をチェックボタンの状態で表示したり、隠したりしたいので、次のような CSS を作成する。セレクタに + を使ってチェックボックスの隣の要素を表すのがミソだ。

<input type="checkbox" id="chk1">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<style>
input[type="checkbox"]:checked+ul {
height: 0;
overflow: hidden;
}
</style>

実行して、チェックボックスをクリックすると ul 要素が隠れるのがわかる。なぜ、display: none; を使わなかったかは実験するとわかる。次に label 要素を作ってチェックボタンに関連づける。チェックボタンより前に label 要素を作成しないと、ul 要素を隠すことはできない。

<label for="chk1">label 1</label>
<input type="checkbox" id="chk1">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<style>
input[type="checkbox"]:checked+ul {
height: 0;
overflow: hidden;
}
</style>

確認して実行すると、label 要素をクリックすると ul 要素が隠れるのがわかる。最後に、チェックボタンを見えなくして、ul 要素のマージンを0にして形を整える。また、ul 要素も一つ増やす。

<label for="chk1">label 1</label>
<input type="checkbox" id="chk1">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<label for="chk2">label 2</label>
<input type="checkbox" id="chk2">
<ul>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<style>
input[type="checkbox"]:checked+ul {
height: 0;
overflow: hidden;
}
ul {
margin: 0;
}
input[type="checkbox"] {
display: none;
}
</style>

メニュー全体を nav 要素の中に入れて、スタイルシートのセレクタにも nav を親要素につければ、セレクタの名前空間にも影響は出ない。上の説明では、わかりやすいように ul のリスト要素はただのテキストにしたが、リンクを張ってもいい。その時は、Emmet で

ul>li*3>a

を展開すれば骨格ができる。

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

デザイン性を問うなら、jQuery を利用するところだろうが、簡単なホームページなら、こちらの方が動作の中身がわかっているだけ安心できる。

by tnomura9 | 2016-01-11 21:25 | JavaScript | Comments(0)
<< Emmet を使って思ったこと label のfor属性 >>