Cara sederhana membuat menu tab accordion
Untuk membuat tab accordion sederhana langkah pertama
bukalah sebuah notepad, kemudian copy lah code dibawah ini
<html>
<head>
<title>
... 201453014 ... </title>
<style
type="text/css">
#acc{background:#ffffff;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc
h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px
10px;margin:0;color:#222; text-shadow:0px 1px 1px #fff; border-bottom:2px solid
#444;}
#acc h3 a{color:#555} #acc h3 a:hover{color: red}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px
0px;display:none; border-bottom:2px solid #222;}
#acc :target h3 + .post
{display:block;height:150px;overflow:auto;} #acc :target h3 a{color:#aa5500
</style>
</head>
<body>
<div
id="acc"> <div id="isi1">
<h3><a
href="#isi1"> Buah-Buahan</a></h3>
<div
class="post">
<ul>
<li><a href="http://bibitbunga.com/wp-content/uploads/2014/12/jeruk-mandarin.jpg">Jeruk</a></li>
<li><a href="http://www.pertanianku.com/wp-content/uploads/2015/08/Mangga-Sumber-Vitamin-dan-Mineral.jpg">Mangga</a></li>
<li><a href="http://producemadesimple.ca/wp-content/uploads/2015/06/rambutan-square.jpg">Rambutan</a></li>
</ul>
</div> </div>
<div
id="isi2">
<h3><a
href="#isi2">Bunga</a></h3>
<div
class="post">
<ul>
<li><a href="http://manfaat.co.id/wp-content/uploads/2015/02/Manfaat-Bunga-Melati.jpg">Melati</a></li>
<li><a href="https://izzanisa22m2k.files.wordpress.com/2013/11/red-rose-wallpapers-by-cool-wallpapers-121.jpg">Mawar</a></li>
<li><a
href="http://sehatdokter.com/wp-content/uploads/2015/06/Manfaat-Bunga-Kamboja.jpg">Kamboja</a></li>
</ul>
</div> </div>
<div
id="isi3">
<h3><a
href="#isi3">Hewan Karnivora</a></h3>
<div
class="post">
<ul>
<li><a href="http://artimimpi-az.com/wp-content/uploads/2015/10/Arti-Mimpi-Digigit-dan-Dikejar-Harimau-Masuk-Rumah.jpg">Harimau</a></li>
<li><a href="http://3.bp.blogspot.com/-aOVyyvDo6pY/TptUn-N7dqI/AAAAAAAAAjs/p9V-B3f_DCE/s1600/Lion%2Bwallpapers%2Bfor%2Bdesktop%2B2.jpg">Singa</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/5/5a/Canis_lupus_265b.jpg">Serigala</a></li>
</ul>
</div> </div>
</body>
</html>
Ubah text yang berwarna hijau menjadi kategori yang diinginkan, warna biru untuk
nama jenis dari kategori, dan merah untuk link yang dituju.
Setelah selesai simpan notepad dengan ekstensi file .html,
kemudian jalankan program tersebut.
Selamat mencoba !!!
0 Response to "Cara sederhana membuat menu tab accordion"
Post a Comment