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 atau copy 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>
<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>
.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>
<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>
<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 praktekan dan perhatikan, efek saat 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.
Nah sekarang giliran kalian untuk mengembangkannya lagi supaya lebih menarik.
Jika ada pertanyaan silakan berkomentar.
Jangan Lupa like dan share.
Belajar Pemrograman di fajaryusuf.com aja. :)
Jangan Lupa like dan share.
Belajar Pemrograman di fajaryusuf.com aja. :)
MATERI JQUERY
Jika anda baru dalam belajar jquery belajarlah dari materi pertama :
Materi ke-1 : Mengenal lebih JQUERY
Materi ke-2 : Memahami Selector,Install, dan Latihan
Materi ke-3 : Event
Materi ke-4 : Effect
Materi ke-5 : Berkreasi dengan Plugin
Materi ke-6 : Datepicker
Materi ke-7 : Accordion
Jika anda baru dalam belajar jquery belajarlah dari materi pertama :
Materi ke-1 : Mengenal lebih JQUERY
Materi ke-2 : Memahami Selector,Install, dan Latihan
Materi ke-3 : Event
Materi ke-4 : Effect
Materi ke-5 : Berkreasi dengan Plugin
Materi ke-6 : Datepicker
Materi ke-7 : Accordion
Comments