CSS – Menu Dropdown Horizontal Acordion


acordion
sudah lama gak posting soalnya disibukkan dengan project website.[sok sibuk hehehe :D]….
langsung aja sekarang saya akan memasang menu acordion menu droup down dengan css, menu ini bisa digunakan sebagai sitemap, daftar isi per-category, atau bisa ditaruh di sidebar website/blog sebagi menu tambahan. posting ini merupakan bagian dari menu project web yang saya kerjakan. seperti tampilan di atas.

berikut step by stepnya:
1. sobat buat file html dulu kasih nama index.html terus masukkan secript berikut kedalam index.html:
<html>
<head>     <title>Menu Acordion By: Hand Excel</title>
<link href=”sitemap.css” rel=”stylesheet” type=”text/css” media=”screen” />
<head>
<body>
<div class=”accordion”>
<ul>
<li><h3>SASTRA</h3><div> Isinya </div></li>
<li><h3>TEKNOLOGI</h3><div> Isinya </div></li>
<li><h3>Tips & Trik</h3><div> Isinya </div></li>
<li><h3>iklan</h3><div> Isinya  </div></li>
<li><h3>Bahasa Pemrograman</h3><div> Isinya  </div></li>
<li><h3>Lowongan Kerja</h3><div> Isinya  </div></li>
<li><h3>Awards</h3><div> Isinya  </div></li>
<li><h3>Others</h3><div>  Isinya  </div></li>
</ul>
</div>
</body>
</html>

2. buat file css-nya kasih nama style.css dan copas script berikut:
.accordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 550px; }
.accordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: 550px;     /* Decorative CSS */
/* CSS3 Transition Effect */
box-shadow:0 1px 4px #998900;
-webkit-box-shadow:0 1px 4px #998900;
-moz-box-shadow:0 1px 4px #998900;
border:1px solid #998900;
border-radius: 15px;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out; }
.accordion>ul>li>h3 {
text-align:center;
display:block;
margin: 0;
padding:10px;
height:19px;     /* Decorative CSS */

font-family: Flavors, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color:#000000;
background: #cccccc;     /* CSS3 Gradient Effect */
background: -moz-linear-gradient(50% 150% 90deg,#c5f507, #998900);
background: -webkit-gradient(linear, 10% 10%, 10% 100%, from(#998900), to(#c5f507));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#998900, endColorstr=#c5f507); /* IE 7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#998900, endColorstr=#c5f507)”;   /* IE 8 */
}
.accordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:200px;
}
.accordion>ul>li:hover {
height: 400px;
}
.accordion:hover>ul>li:hover>h3 {     /* Decorative CSS */
color:#fff;
background: #c5f507;     /* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #c5f507, #c5f507); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#c5f507)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#c5f507); /* IE 5.5 – IE 7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#c5f507)”;   /* IE 8 */
}
.accordion>ul>li>h3:hover {
cursor:pointer;
}

sudah selesai tinggal dijalankan.. oh ya jangan lupa file index.html dan style.css di jadikan dalam satu folder….

semoga membantu.. apa bila tidak work coba baca peraturan cara COPAS disidebar blog ini. trimakasih…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s