Accordion Menu

Membuat Transparant Accordion Effect Dengan CSS3

20.13,3 Comments


Kali ini saya ingin kembali mengajak anda untuk membuat sebuah "Accordion Menu". Dan karena Accordion kali ini sangat simple dan saya buat tanpa background alias Transparant, Jadi saya kasih nama "Transparant Accordion Effect Dengan CSS3".

Bentuknya sama kaya gambar diatas, atau klo mau liat demonya secara langsung, silahkan klik link demo dibawah ini:


Lantas bagaimana cara membuatnya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

/* CSS Accordion styles */
dl
{
padding: 10px;
min-width: 660px;
}
a.ie { background: transparent; text-decoration: none; }
dl dt
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid #000;
margin: 0;
}
dl dt a,
dl a.ie dt
{
color: #000;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
}
dl dd
{
color: #000;
margin: 0;
height: 0;
overflow: hidden;
-webkit-transition: height 1s ease;
}
dl dd p
{
padding: 10px;
margin: 0;
}
dl dd:target
{
height: auto;
}
dl a.ie:hover dd,
dl a.ie:focus dd
{
height: auto;
color: #000 !important;
}

@media (-webkit-transition) {
dl dd:target
{
height: 6.667em;
}
}


6. Jika sudah, beralihlah dan cari kode <body> dan letakkan Kode HTML dibawah ini tepat sesudah atau dibawah kode tersebut:

<dl>
<dt><a href='#Section1'>Section 1</a></dt>
<dd id='Section1'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href='#Section2'>Section 2</a></dt>
<dd id='Section2'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href='#Section3'>Section 3</a></dt>
<dd id='Section3'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href='#Section4'>Section 4</a></dt>
<dd id='Section4'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
</dl>


7. Save template anda dan lihat hasilnya.

Selamat Mencoba...




hosting indonesia

You Might Also Like

3 komentar:

  1. Assalamu'alaikum Kang,
    Djangan Pakies pernah pake template accordion punya sama saya lupa, tampilannya asyik.

    semangat berkarya ya Kang

    Oot: masalah form komentar klasik padahal template DjP padahal bawaan blogger, aneh ya Kang. Ato saya yang oon hhhhh

    BalasHapus
  2. bung ferdinand, kalo mau kirim ceritanya silakan aja... masih ada kesempatan... kirimin ke immanuel.lubis@gmail.com

    BalasHapus
  3. @ Djangan Pakies: Walaikum Salam Kang, Nggeh aku yo pernah liat template Accordionmu yg di Blog satu lagi hhe.

    OOT:ya pastinya bukan sampean seng OON kang, lha wong aku juga biasanya gtu, Related postku ae ketiban tuh makanya sekalian tak delete karena udah gak terlalu penting hhe..

    @ Noeel-Loebis : OK Nuel... langsung ku kirim...

    BalasHapus