「サイドナビゲーションのアコーディオンメニュー（ドロップダウンメニュー）作成方法」

前回はヘッダー部のグローバルメニューのアコーディオンメニュー（ドロップダウン式）を作成しましたので、続いてサイドメニューのナビゲーションをアコーディオン化したいと思います。

前回に引き続き、HTMLとCSSのみの記述で作成します。

※ヘッダー部のアコーディオンメニューはこちらでまとめています。↓

https://denkenmusic.com/「グローバルナビのアコーディオンメニュー（ド

以前にHTMLとCSSのみで簡易的なホームページの作成方法についてまとめました。※全6回の最終回の記事はこちらになります。↓　その際、ヘッダー部のグローバルメニューは多層化していなかったので、今回はアコーディオンメニュー（ドロップダウンメニュー）を追加してみました。今回もHTMLとCSSのみ追加記述で可能になります。階層はシングルとなっていますが、仕組みさえ理解できれば後は応用でさらに多層化する事が可能です。それでは以前に作成したホームページのファイルを加工したいと思います。※使用するHTML,CSSファイルは冒頭の...

それでは前回のHTML、CSSファイルに追加記述して作成したいと思います。

1 HTML
- 1.1 <label>タグと<input>タグを使用する
2 CSS
- 2.1 アコーディオンメニューにスタイリング
3 「サイドナビゲーションのアコーディオンメニュー（ドロップダウンメニュー）作成方法」まとめ

HTML

<label>タグと<input>タグを使用する

<div id="nav-content">
          <div class="cp_menu">
<label for="cp_menu_bar1">home</label>
<input type="radio" name="radio" id="cp_menu_bar1" class="accordion" />
<ul id="link1">
	<li><a href="index.html">home</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
</ul>
<label for="cp_menu_bar2">あああああ</label>
<input type="radio" name="radio" id="cp_menu_bar2" class="accordion" />
<ul id="link2">
	<li><a href="b.html">あああああ</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
</ul>
<label for="cp_menu_bar3">いいいいい</label>
<input type="radio" name="radio" id="cp_menu_bar3" class="accordion" />
<ul id="link3">
	<li><a href="c.html">いいいいい</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
</ul>
<label for="cp_menu_bar4">ううううう</label>
<input type="radio" name="radio" id="cp_menu_bar4" class="accordion" />
<ul id="link4">
	<li><a href="d.html">ううううう</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
</ul>
<label for="cp_menu_bar5">えええええ</label>
<input type="radio" name="radio" id="cp_menu_bar5" class="accordion" />
<ul id="link5">
	<li><a href="e.html">えええええ</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
	<li><a href="">submenu</a></li>
</ul>
</div>
      </div>

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

</ul>

<label for="cp_menu_bar2">あああああ</label>

<li><a href="b.html">あああああ</a></li>

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

</ul>

<label for="cp_menu_bar3">いいいいい</label>

<li><a href="c.html">いいいいい</a></li>

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

</ul>

<label for="cp_menu_bar4">ううううう</label>

<li><a href="d.html">ううううう</a></li>

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

</ul>

<label for="cp_menu_bar5">えええええ</label>

<li><a href="e.html">えええええ</a></li>

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

</ul>

</div>

<div id=”nav-content”>直下の記述をごっそり入れ替えます。

というのも、ブロック要素でのアコーディオン化はインライン要素のアコーディオンメニューにくらべて複雑になります。

ポイントは<label>タグと<input>タグになります。

<lavel>はテキストボックスと項目を結びつける要素で、<input>はテキストボックスなどの要素になります。

あとは各項目と子要素に個別のIDを振り分けておきます。

CSSでスタイリングすることにより、ブロック要素にて項目別でのアコーディオン表示が可能となります。

CSS

アコーディオンメニューにスタイリング

.cp_menu {
	max-width: 360px;
	margin: 0 auto;
	padding: 0;
}
.cp_menu a {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
.cp_menu label {
	display: block;
	position: relative;
	margin: 0 0 2px 0;
	padding: 12px;
	line-height: 1;
	color: #ffffff;
	background: #1b2538;
	cursor: pointer;
}
.cp_menu label::before {
	position: absolute;
	content: '▼';
	color: white;
	right: 0.5em;
	top: 25%;
}
.cp_menu input {
	display: none;
}
.cp_menu ul {
	margin: 0;
	padding: 0;
	background: black;
	list-style: none;
}
.cp_menu li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}
/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li,
#cp_menu_bar2:checked ~ #link2 li,
#cp_menu_bar3:checked ~ #link3 li,
#cp_menu_bar4:checked ~ #link4 li,
#cp_menu_bar5:checked ~ #link5 li {  
max-height: 46px;
opacity: 1;
}

.cp_menu {

max-width: 360px;

margin: 0 auto;

padding: 0;

}

.cp_menu a {

display: block;

padding: 10px;

text-decoration: none;

color: #000000;

line-height: 1;

}

.cp_menu label {

display: block;

position: relative;

margin: 0 0 2px 0;

padding: 12px;

line-height: 1;

color: #ffffff;

background: #1b2538;

cursor: pointer;

}

.cp_menu label::before {

position: absolute;

content: '▼';

color: white;

right: 0.5em;

top: 25%;

}

.cp_menu input {

display: none;

}

.cp_menu ul {

margin: 0;

padding: 0;

background: black;

list-style: none;

}

.cp_menu li {

overflow-y: hidden;

max-height: 0;

transition: all 0.5s;

}

/*リストが増えたらULごとに追加してください*/

#cp_menu_bar1:checked ~ #link1 li,

#cp_menu_bar2:checked ~ #link2 li,

#cp_menu_bar3:checked ~ #link3 li,

#cp_menu_bar4:checked ~ #link4 li,

#cp_menu_bar5:checked ~ #link5 li {

max-height: 46px;

opacity: 1;

}

CSSのレスポンシブ記述部（一番下部）に追加で記述します。

上部の記述はメニューのスタイリングになります。

一番下の記述が、項目ごとのアコーディオンメニューを表示させる記述になるので、項目が増えれば、IDを変え追加すればOKです。

完成はこんな感じになります。クリックで再生します。↓