Tag Archives: akordion

Membuat Menu Akordion Dengan CSS

Leave a reply
Menu Accordion

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.