Cara Membuat Menu accordion

Salam Bloger..
kali ini saya akan menjelas kan Cara Membuat Menu Accordion,Di mana Menu Accordion
ini menggunakan CSS3 di blog tanpa Java Script.

Langkah awal membuat Menu accordion ini adalah sebagai berpikut:

1. Masuk ke edit html
2. jangan centang Expand Widget Templates
3. Masukan kode di bawah tepat di atas kode ]]></b:skin>

/*accordion menu ********************/ .verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 500px; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 500px; /* Decorative CSS */ background-color:#f0f0f0; /* CSS3 Transition Effect */ 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; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; /* Decorative CSS */ border-top:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; color: #000; background: #cccccc; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 280px; } .verticalaccordion:hover>ul>li:hover>h3 { /* Decorative CSS */ color:#fff; background: #000000; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ } .verticalaccordion>ul>li>h3:hover { cursor:pointer;}

Save template

Itu belum selesai sob,, sekarang kita akan membuat menunya langkahnya adalah:

1.Masuk ke page element/element laman
2.Klik add a gadget
3.Lalu cari HTML/ java script dan masukan kode dibawah ini:

Klik save dan lihat hasilnya

"Selamat mencoba"
semoga bermanfaat

Saran Dan Kritik Anda Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Tutorial Blog Ini...

Categories: blog Share

Show 0 Comments

dhuniaqu

Pages

Cara Membuat Menu accordion

Blogger templates

Popular Posts

Text Widget

Total Tayangan Halaman

Label

Link sahabatqu

popuri

About

visitors

clustrmaps

Like Box

Twitter badge

Ads 468x60px

Featured Posts Coolbthemes

Blogger news

Popular Posts

Blogroll

Popular Posts