CSS と HTML で作るチェックボックスを使用したメニュー

概要

CSS と HTML のみでチェックボックスを使用したメニューを作成する方法の説明と、ソースの解説をします。

目次
ソース
表示例
ソースの解説

ソース

HTML

<ul id="checkbox-menu">
<li><input id="menu-botton-checkbox1" type="checkbox" value="off">
<label id="checkbox1" for="menu-botton-checkbox1">コンテンツ1</label>
<ul id="menu1">
<li><a href="#">サブコンテンツ1</a></li>
<li><a href="#">サブコンテンツ2</a></li>
<li><a href="#">サブコンテンツ3</a></li>
<li><a href="#">サブコンテンツ4</a></li>
<li><a href="#">サブコンテンツ5</a></li>
</ul>
</li>
<li><input id="menu-botton-checkbox2" type="checkbox" value="off">
<label id="checkbox2" for="menu-botton-checkbox2">コンテンツ2</label>
<ul id="menu2">
<li><a href="#">サブコンテンツ1</a></li>
<li><a href="#">サブコンテンツ2</a></li>
<li><a href="#">サブコンテンツ3</a></li>
<li><a href="#">サブコンテンツ4</a></li>
<li><a href="#">サブコンテンツ5</a></li>
</ul>
</li>
<li><input id="menu-botton-checkbox3" type="checkbox" value="off">
<label id="checkbox3" for="menu-botton-checkbox3">コンテンツ3</label>
<ul id="menu3">
<li><a href="#">サブコンテンツ1</a></li>
<li><a href="#">サブコンテンツ2</a></li>
<li><a href="#">サブコンテンツ3</a></li>
<li><a href="#">サブコンテンツ4</a></li>
<li><a href="#">サブコンテンツ5</a></li>
</ul>
</li>
<li><input id="menu-botton-checkbox4" type="checkbox" value="off">
<label id="checkbox4" for="menu-botton-checkbox4">コンテンツ4</label>
<ul id="menu4">
<li><a href="#">サブコンテンツ1</a></li>
<li><a href="#">サブコンテンツ2</a></li>
<li><a href="#">サブコンテンツ3</a></li>
<li><a href="#">サブコンテンツ4</a></li>
<li><a href="#">サブコンテンツ5</a></li>
</ul>
</li>
</ul>

CSS

#checkbox-menu {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
font-size: 20px;
font-weight: bold;
width: 800px;
}
#checkbox-menu li {
float: left;
width: 200px;
position: relative;
}
#checkbox-menu li label {
color: #FFFFFF;
background-color: #0000FF;
cursor: pointer;
display: block;
padding: 5px;
}
#checkbox-menu li:hover label {background-color: #000080;}
#checkbox-menu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
height: 0px;
transition: height 0.2s;
position: absolute;
}
#checkbox-menu li ul a {
display: block;
text-decoration: none;
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#checkbox-menu li:hover ul a {background-color: #000080;}
#checkbox-menu li ul li:hover a {background-color: #008080;}
#checkbox-menu:after {
content: "";
clear: both;
display: block;
}
#menu-botton-checkbox1:checked ~ #menu1 {height: 200px;}
#menu-botton-checkbox2:checked ~ #menu2 {height: 200px;}
#menu-botton-checkbox3:checked ~ #menu3 {height: 200px;}
#menu-botton-checkbox4:checked ~ #menu4 {height: 200px;}
#menu-botton-checkbox1 {display: none;}
#menu-botton-checkbox2 {display: none;}
#menu-botton-checkbox3 {display: none;}
#menu-botton-checkbox4 {display: none;}

表示例

ソースの解説

HTMLの解説

<input id="menu-botton-checkbox1" type="checkbox" value="off">
<label id="checkbox1" for="menu-botton-checkbox1">コンテンツ1</label>

チェックボックスを非表示にするため、文字をクリックするとチェックボックスにチェックが入るようにする必要があります。そのため、「input」の id 名と「label」の for の文字列を同じにする必要があります。文字列が異なる場合、クリックしてもメニューが表示されなくなります。

CSSの解説

#checkbox-menu li ul {
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
height: 0px;
transition: height 0.2s;
position: absolute;
}

ドロップダウンメニューの高さに height: 0px; を指定し、高さを0にします。また、overflow: hidden; を指定することではみ出した部分を非表示にすることでドロップダウンメニューを非表示にします。さらに、transition: height 0.2s; でオンマウスでドロップダウンメニューを表示する際に何秒かけて表示するかを指定します。例の場合ですと、0.2s を指定しているため、0.2秒で表示するということになります。

#menu-botton-checkbox1:checked ~ #menu1 {height: 200px;}

チェックボックスにチェックが入った時のドロップダウンメニューの高さを height: 200px; のように指定します。これにより、チェックが入っていないときは高さが 0px だったメニューが、チェックが入った時には 200px で表示されるようになり、見た目としては表示されていなかったメニューが表示されるようになります。

上記のソースは一例であり、文字の大きさや色，幅等の指定はご自由に設定してください。また、上記解説以外の CSS の設定は好みに合わせてご自由に設定してください。