Thursday, June 9, 2016

jQuery : Accordion

Accordion

Salah satu fungsi dari jQuery adalah membuat Accordion menu dimana Accordion menu ini dapat meringkas tampilan dan juga dapat memperindah tampilan web anda. Pada artikel ini saya akan membuat Accordion sederhana yang kita ciptakan disini membutuhkan sedikit fungsi jQuery tanpa plugin. Oke langsung saja yang pertama kita akan membuat daftar list untuk menu yang akan kita buat.

Ketikkan listing program berikut :

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
</body>
</html>

Berikut syntax css sederhananya yang saya buat :

<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>


Selanjutnya untuk membuat efek acordionnya tambahkan ini :

<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>

Skrip Lengkapnya

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>
</body>
</html>

Hasilnya :




Coba anda peraktekan dan perhatikan, efek saaat satu menu di klik, maka submenu nya akan dimunculkan. Sekarang coba jika salah satu menu yang lainnya di klik, maka submenu sebelumnya akan di sembunyikan lagi dan submenu pada menu yang di klik akan muncul.

Nah sekarang giliran kalian untuk mengembangkannya lagi supaya lebih menarik.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Bejar Pemrograman di fajaryusuf.com aja. :)

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

Cobalah untuk memilih Pelajaran Pemrograman dan belajar dari Materi Pertama
EmoticonEmoticon


TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.

https://smallseotools.com/