Menu Accordion
Menu akordion dapat dibuat dengan javascript library jquery, namun disini kita hanya menggunakan CSS untuk membuat menu akordion yang cukup responsive.
Berikut ini coding HTML dan CSS-nya.
<html>
<head>
<title>Menu Akordion Dengan CSS</title>
<style type="text/css">
*{font-family:Helvetica,Arial,sans-serif;}
#container
{ margin:left;
background-color:#f0f0f0;
width:300px;
padding:10px;
border-radius:15px;
}
.akordion h3 + div
{ height:0;
overflow:hidden;
-webkit-transition:height 0.3s ease-in;
background-color:#ffffff;
border-radius:10px;
}
.akordion :target h3 + div
{ height:100px;
padding-left:10px;
}
.akordion .section.large:target h3 + div
{ overflow: auto;}
div.section
{ background-color:#c0c0c0;
padding:5px;
border:0px solid;
}
a:link {text-decoration:none;}
.akordion a:hover
{text-decoration:underline; color:#ff0000;}
</style>
</head>
<body>
<h1>Menu Akordion Dengan CSS</h1>
<hr>
<br>
<div id="container">
<div class="akordion">
<h2>List Menu</h2>
<div id="satu" class="section">
<h3><a href="#satu">Menu Satu</a></h3>
<div><ul>
<li>Sub Menu Satu</li>
<li>Sub Menu Dua</li>
<li>Sub Menu Tiga</li>
</ul></div>
</div>
<div id="dua" class="section">
<h3><a href="#dua">Menu Dua</a></h3>
<div><ul>
<li>Sub Menu Satu</li>
<li>Sub Menu Dua</li>
<li>Sub Menu Tiga</li>
</ul></div>
</div>
<div id="tiga" class="section">
<h3><a href="#tiga">Menu Tiga</a></h3>
<div><ul>
<li>Sub Menu Satu</li>
<li>Sub Menu Dua</li>
<li>Sub Menu Tiga</li>
</ul></div>
</div>
</div>
</div>
</body>
</html>
Kuncinya adalah pada pseudo class selector :target di CSS.
pada class akordion diberikan pseudo class target ke elemen h3 dan div
.akordion :target h3 + div
Ketika link “satu” pada tag h3 di click maka URL akan menuju ke fragment identifier #satu dengan demikian div id=satu akan bekerja membuka section class=satu. Begitu juga ketika link dua atau tiga di click.
Selamat mencoba.