Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.
» » » Menu Accordion Vertikal dengan CSS3 dan jQuery

15 komentar

proBlogiz
Menu Accordion Vertikal dengan CSS3 dan jQuery

Simple Menu Accordion Vertikal dibuat dengan menggunakan CSS3 serta memakai jQuery minimalis untuk menggeser daftar link-link. Menu akordion ini sangat tepat bagi yang ingin menghemat space atau ruang di blog Anda. Tutorial Desian Blog kali ini membahas cara membuat menu accordion (menu sliding) vertikal yang sederhana dan ringan, yang dapat Anda gunakan sebagai menu navigasi di sidebar atau juga sebagai widget lainnya.

Simple Menu Accordion Vertikal keren dan simple ini juga kompatibel pada semua major browser termasuk IE8 (best on Mozilla Firefox and Chrome). Penggunaan CSS3 dan HTML yang sederhana memudahkan Anda berkreasi sendiri dengan warna, background, font serta merubah link-link daftar menu sesuai kebutuhan Anda. jQuery dibutuhkan untuk membuka (menggeser) menu dan sub menu pada Menu Accordion tersebut.

Ok, sebelum lebih jauh membahasnya coba lihat dulu demo menu keren ini :

Langkah Membuat Menu Accordion Vertikal

1. HTML

Pertama-tama kita membuat kode HTML sederhana untuk daftar menu sebagai berikut:

<div id="accordian">
<ul>
<li>
   <h3>NAMA MENU</h3>
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
<li><a href="#">LINK4</a></li>
</ul>
</li>
</div>

Contoh diatas menu yang sangat sederhana, kode HTML dapat Anda rubah sendiri nama-nama menunya seperti NAMA MENU, link-link LINK1, LINK2, dll. sesuai dengan niche Blog Anda. Jika Anda ingin menambah link menu cukup tambah kode berikut :
<li><a href="#">LINK</a></li>


Saya sendiri membuat daftar menu sesuai dengan blog Problogiz, seperti contoh Demo diatas. Tentu Anda dapat merubahnya sendiri sesuai blog Anda. Kode menu HTML final akan terlihat seperti dibawah ini: 
<div id="accordian">
<ul>
<li>
   <h3>TUTORIAL</h3>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
   <h3>OPTIMASI BLOG</h3>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO on Page</a></li>
<li><a href="#">Pagerank</a></li>
<li><a href="#">ALEXA Rank</a></li>
<li><a href="#">Speed Test</a></li>
</ul>
</li>
<li>
   <h3>BLOG TOOLS</h3>
<ul>
<li><a href="#">Kode Warna HTML</a></li>
<li><a href="#">Check SERP</a></li>
<li><a href="#">Check Pagerank</a></li>
<li><a href="#">CSS Editor</a></li>
<li><a href="#">HTML Editor</a></li>
<li><a href="#">Parse HTML</a></li>
<li><a href="#">Analisa Blog</a></li>
</ul>
</li>
<li class="active">
   <h3>LABEL</h3>
<ul>
<li><a href="#">Tutorial Blogger</a></li>
<li><a href="#">Tutorial SEO</a></li>
<li><a href="#">Desain Blog</a></li>
<li><a href="#">Tip dan Trik</a></li>
<li><a href="#">Search Engine</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Informasi</a></li>
</ul>
</li>
</ul>
</div>

  • Anda dapat mengedit nama menu : <h3>TUTORIAL<h3>, LABEL....dst sesuai keinginan.
  • Menu item atau link-link juga sesuaikan dengan kebutuhan Anda.
  • Perhatikan kode yang berwarna pink : <li class="active">
  • Ini berarti menu akan dibiarkan tetap terbuka, seperti contoh DEMOnya. Jika ingin menutupnya hapus saja kode class="active" dan gantikan dengan kode <li> saja.

2. CSS

Menu accordion (menu sliding) ini didesain tampak apik dengan menggunakan CSS3, dan memudahkan untuk berkerja dengan warna-warna, ukuran menu untuk menyesuaikan blog (sidebar), memungkinkan memberi sentuhan selera Anda bahkan Anda juga dapat mengimpor jenis font yang Anda mau atau menambahkan icon pada menu.

note: untuk menambahkan icon atau font sendiri Anda dapat mencarinya di http://fortawesome.github.io/Font-Awesome.

<style>
/*Basic reset*/
* {margin: 0; padding: 0;}

#accordian {
 background: #AF5224;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #A71C0C; 
 background: linear-gradient(#A71C0C, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 12px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #4D1A0A;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}
</style>

Kostum CSS yang mungkin Anda bisa rubah:

  • background: #AF5224;- warna background menu
  • width: 250px;- lebar menu
  • background: #A71C0C; 
  • background: linear-gradient(#A71C0C, #002535);-warna gardient background pada nama menu
  • font-size: 12px;-ukuran font
  • background: #4D1A0A;- warna hover menu item link
  • color: white;-warna font

3.jQuery

Nah bagian ini kita menempatkan fungsi jQuery untuk membuat list menu dapat membuka dan menutup jika di klik atau menggeser keatas dan kebawah (slide up and slide down). Berikut script jQuery sliding sederhana : 

<script>

/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})
</script>

Selesai!! Nah sekarang Anda hanya menggabungkan semua kode-kode diatas (HTML, CSS dan jQuery) jadi satu, dan masukkan/letakkan sebagai widget, seperti final kode dibawah ini.

Final Kode Menu Accordion Vertikal

Complete Code: 
<div id="accordian">
<ul>
<li>
   <h3>TUTORIAL</h3>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li>
   <h3>OPTIMASI BLOG</h3>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">SEO on Page</a></li>
<li><a href="#">Pagerank</a></li>
<li><a href="#">ALEXA Rank</a></li>
<li><a href="#">Speed Test</a></li>
</ul>
</li>
<li>
   <h3>BLOG TOOLS</h3>
<ul>
<li><a href="#">Kode Warna HTML</a></li>
<li><a href="#">Check SERP</a></li>
<li><a href="#">Check Pagerank</a></li>
<li><a href="#">CSS Editor</a></li>
<li><a href="#">HTML Editor</a></li>
<li><a href="#">Parse HTML</a></li>
<li><a href="#">Analisa Blog</a></li>
</ul>
</li>
<li class="active">
   <h3>LABEL</h3>
<ul>
<li><a href="#">Tutorial Blogger</a></li>
<li><a href="#">Tutorial SEO</a></li>
<li><a href="#">Desain Blog</a></li>
<li><a href="#">Tip dan Trik</a></li>
<li><a href="#">Search Engine</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Informasi</a></li>
</ul>
</li>
</ul>
</div>
<style>
/*Basic reset*/
* {margin: 0; padding: 0;}

#accordian {
 background: #AF5224;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 /*Some cool shadow and glow effect*/
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 /*fallback for browsers not supporting gradients*/
 background: #A71C0C; 
 background: linear-gradient(#A71C0C, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
 list-style-type: none;
}
/*links*/
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 12px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 /*transition for smooth hover animation*/
 transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
 background: #4D1A0A;
 border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}
</style>
<script>
/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})
</script>

Cara Pasang Menu Accordion Vertikal di Blogger 

  • Masuk Blogger > pilih Tata Letak
  • Klik Add a Gadget atau Add a Page element
  • Pilih HTML/JavaScript widget
  • Paste semua kode Menu Accordion Vertikal tersebut (kode CSS + HTML+jQuery) dalam HTML/JavaScript widget
  • Klik Save
  • Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan di sidebar kanan atau kiri. 
  • lihat gambar dibawah :
Artikel Terkait Lainnya:
Click here for comments

15 komentar

avatar
abey
25 April 2013 pukul 08.32 delete

ajib gan infonya,,izin nyimak ya....

REPLY
avatar
Unknown Author
25 April 2013 pukul 12.30 delete

terima kasih master atas artikel nya, mantap. Salam.

REPLY
avatar
SEO Newbie
25 April 2013 pukul 17.10 delete

mantab sekali ulasannya :D

Jangan Lupa Komentar Baliknya ya Gan..

REPLY
avatar
Unknown Author
25 April 2013 pukul 22.04 delete

sama2 mas, semoga membantu:)

REPLY
avatar
Unknown Author
25 April 2013 pukul 22.05 delete

sama2, ok sob
pasti saya berkunju8ng juga:)

REPLY
avatar
Marlon Alamo
25 April 2013 pukul 22.45 delete

Selamat,..sob. Post sobat yang ini langsung saya pakai. Mau nanya juga nih kawan. 1.TAB VIEW pada widget. 2.HEADLINE NEWS. Saya menggunakan Template Johny Ribet dari Mas Kollis/Mas Template.
Thanks B 4 It.

REPLY
avatar
Unknown Author
25 April 2013 pukul 23.43 delete

thanks mas udh mampir?
maksudnya cara buat tab view? headline? ato gimn?

REPLY
avatar
Raja SEO
26 April 2013 pukul 14.19 delete

Mantab Keren :D

Jangan Lupa Komentar Baliknya Ya Sobat...

REPLY
avatar
Admin
16 Mei 2013 pukul 16.56 delete

keren mas bro, ane lagi nyari buat di blog yudithea.blogspot.com. tanks mas bro share ilmunya.

REPLY
avatar
Unknown Author
16 Mei 2013 pukul 18.18 delete

ok Sob, selamat dicoba:)

REPLY
avatar
Sunandar
8 Juni 2013 pukul 19.03 delete

gan kalo misalnya masukan script widget gitu bisa ga ? jadi ga link doang.. thanks ditunggu balasannya di http://nandarious.blogspot.com

REPLY
avatar
Unknown Author
9 Juni 2013 pukul 03.37 delete

ya bisa, itu kan udah dibuat widget, Anda copy semua code finalnya dan tambahkan HTML/Javascript di tata letak Blogger

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|