Home » , , , » Cara Membuat Menu JQuery Accordion

Cara Membuat Menu JQuery Accordion

Cara Membuat JQuery Accordion Menu
Semangat buat berbagi Tips And Trik Blog ke sahabat blogger mania, Kali Lora Malunk Blog akan berbagi trik mengenai Membuat Menu  JQuery Accordion ini menggunakan kode javascript yang sangat sederhana sekali.

Tips ini akan membantu membangkitkan efek jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain yang sangat menarik sekali.

Untuk Melihat Hasil Yang sudah Terjadi Silahkan Klik : D E M O

Mari kita memasuki tahap pembelajaran :

Langkah 1
Cari kode ]]></b:skin> pada "Edit Template"

Langkah 2
Copy Paste kode javascript dibawa ini dan letakkan di bawah kode ]]></b:skin>

<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
return false;
});
});
</script>

















Langkah 3
Memasukkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>


.boxtama {
background:#333;
width: 220px;
margin: 0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-top:3px solid #777;
font-size:12px;
}
.boxtama .wadah {
margin: 0 0 5px 2px;
padding: 0;
overflow: hidden;
font-size: 16px;
width: 214px;
clear: both;
background: #bbb;
border: 1px solid #d6d6d6;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.boxtama .wadah .anakwadah {
padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
padding: 5px 0;
margin: 5px 0;
font:12px normal;
color:#000;
}
.boxtama .wadah h3 {
font: 18px normal Georgia;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ddd;
color: #993333;
}
.boxtama .wadah img {
float: left;
margin: 10px 8px 0px 0;
padding: 3px;
background: #ddd;
border: 1px solid #444;
width:60px;
height:60px;
}
.boxtama .wadah .anakwadah ul {
padding:0;
margin:0;
list-style:none;
}
.boxtama .wadah .anakwadah li {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
background-position:5px 5px;
list-style:none;
margin:0px;
padding:0px;
border-bottom:1px dotted #999;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.boxtama .wadah .anakwadah li:hover{
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
background-position:10px 5px;
}
.boxtama .wadah .anakwadah li a {
font-family:Trebuchet MS;
padding:0 0 0 25px;
font-size:11px;
color:#222;
font-weight:500;
text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
color:red;
}
h4.sedul {
padding: 0;
margin: 0 0 5px 0;
background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
height: 36px;
line-height: 36px;
width: 220px;
font-size: 14px;
font-weight: bold;
float: left;
}
h4.sedul:hover { /* hor.png */
padding: 0;
margin: 0 0 5px 0;
background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
background-position:-1px 0;
border-right:1px solid #999;
}
h4.sedul a {
background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
background-position:8px 5px;
border-left:2px solid #fff;
border-right:2px solid #fff;
font-family:Droid Serif;
font-size:14px;
color:/*silver*/ #003366;
text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
display: block;
padding: 0 0 0 45px;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
h4.sedul a:hover {
background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
background-position:8px 5px;
color:red;
text-shadow:0px 1px 1px #888;
opacity:1.0;
filter:alpha(opacity=100);
}
h4.active {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}


Langkah 4
Melanjutkan dengan mencari kode <head> . Letakkan kode Jquery dibawah ini tepat diatasnya kode . <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


Langkah 5
Simpan Template / (Save Template)

Langkah 6
Masuk ke menu Rancangan Add Gadget "HTML/Javascript"

Langkah 7
Lalu Copy paste kode dibawah ini, ke kolom "HTML/JavaScript"


<div style="float:left;background:#111;padding:3px;border:2px solid #666;">

<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Tutorial Blog Up To Date</h3>
<ul class="accor">
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-related-posts-slide-out-boxez.html" target="_blank">Membuat Related Posts</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/mempercantik-tampilan-entri-popular-new.html">Modifikasi Entri Populer</a></li>
<li><a href="http://lora-malunk.blogspot.com">Tips And Trik Blog</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-google-custom-seacrh-sendiri.html" target="_blank">Membuat Google Custom</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-foto-menjadi-teks.html">Foto Menjadi Teks</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-memanggil-robot-mbah-google-ke.html">Memanggil Robot Google</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-mengatasi-feedburner-yang-error.html" target="_blank">Tips Feedburner Eror</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-slide-show-foto-dengan-efek.html">Membuat Slide Show</a></li>
<li><a href="http://lora-malunk.blogspot.com">Lora Malunk Blog</a></li>
</ul>
</div>
</div></div></div>



Catatan Akhir :

- Ganti URL yang saya cetak tebal dan berwana merah dengan URL Artikel Anda.

- Untuk merubah lebar kolom (width) : Anda harus merubah kode dibawah ini dan angka tersebut mempunyai selisih 6px dengan yang di atas dan di bawahnya:

.boxtama {
width: 220px;

.boxtama .wadah {
width: 214px;

h4.sedul {
width: 220px;



Silahkan dibaca juga Tutorial yang lain yang sangat menarik dan patut dipelajari bersama. Melalui link di bawah ini:



Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

4 Mei 2012 11.04

keren sob, nice share

Terimakasih Rudy Hartono atas Komentarnya di Cara Membuat Menu JQuery Accordion

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger