Desember 27, 2010   Accordion , Hover , Tab View

MENU DENGAN EFEK ACCORDION DAN HOVER

Menu Ini Akan Terbuka Saat di Hover, Yakni Ketika Mouse di Arahkan dan Menu Ini Tidak Memiliki Efek Jquery dan Scriptnya Hanya Berupa CSS Sa...

Menu Ini Akan Terbuka Saat di Hover, Yakni Ketika Mouse di Arahkan dan Menu Ini Tidak Memiliki Efek Jquery dan Scriptnya Hanya Berupa CSS Saja.

Lihat Demonya Klik di Sini.

Berikut Kode CSS Untuk Menu dg Efek Hover Accordion

<div class="verticalaccordion"><ul>
<li>
<h3>JUDUL I</h3>
<div>TULISANMU I</div>
</li>
<li>
<h3>JUDUL II</h3>
<div>TULISANMU II</div>
</li>
<li>
<h3>JUDUL III</h3>
<div>TULISANMU III</div>
</li>
<li>
<h3>JUDUL IV</h3>
<div>TULISANMU IV</div>
</li>
</ul>
</div>
<style type='text/css'>
.verticalaccordion>ul {
list-style:none;
width: 280px;
}
.verticalaccordion>ul>li {
display:block;
color: #fff;
padding:0px;
overflow: hidden;
border:0px solid #000;
list-style:none;
height:39px;
width: 280px;
background:#005588;
}
.verticalaccordion>ul>li>h3 {
display:block;
padding:10px;
border-top:#fff 0px solid;
border-bottom:#fff 0px solid;
font-family: Arial;
text-decoration:none;
text-transform:uppercase;
color: #005588;
background: #cccccc;
background: -moz-linear-gradient( top, #999999, #cccccc);
margin-left: -0px;
}
.verticalaccordion>ul>li>div {
padding:0px;
font-size:13px;
border: 0px solid #000;
margin-bottom:5px;
margin-top:5px;
margin-right:10px;
margin-left:10px;
}
.verticalaccordion>ul>li:hover {
height: AUTO;
overflow: hidden;
padding: 0px;
}
.verticalaccordion:hover>ul>li:hover>h3 {
color:#fff;
background: #000000;
background: -moz-linear-gradient( top, #454545, #000000);
}
.verticalaccordion>ul>li>h3:hover {
cursor:pointer;}
</style>

Kode CSS di Atas Kamu Copy dan Pastekan di HTML/JavaScript (Rancangan, Elemen Laman, Tambah Gadget dan Pilih HTML/Java Script. dan Pastekan CSSnya di HTML/Java Script Tersebut)
Sebelumnya Ganti Tulisan yang di Buat Tebal di Atas dg Sesukamu.
Tidak Mengerti dg Maksud di Atas??? Klik di Sini Untuk Lihat Tutorialnya.