Hallo, suda lama saya tidak memposting di blog ini yah. Kali
ini kita akan mengenal tentang pemrograman web yakni jquery. Sebelum kita masuk
langkah tutorial membuat vertical tab accordion alangkah ebih baik kita mengenal
dulu apa itu jquery.
Jquery itu sering dgunakan oleh para development web untuk
membuat halaman web yang ciamik, dinamis dan tentunya responsif. Jadi dengan
adanya jquery ini adalah library javascript untuk menangani event, animasi,
atau kombinasi dengan ajax serta banyak disediakan plugin untuk memperluas
fugsinya dengan berbagai metode. Adanya hal ini dapat kita menulis koding
sedikit tetapi memiliki banyak kegunaan karena fungsinya adalah mengautomasi
dan menyederhanakan perintah-perintah umum.
Cara penggunaanya adalah kita donwload dulu dquery di http://jquery.com dan nantinya akan kita panggil
dengan menggunakan perintah tag <script> di kodingan html kita dipadukan
dengan css html. Ukuran jquery yang kecil akan mudah digunakan karena tidak
memerlukan waktu loading yang lama dan bisa digunakan di banyak browser web
serta compatibel dengan css3.
Jadi nantinya accordion ini akan mempercantik, memperindah
dan dapat meringkas tampilan halaman web. Jika salah satu menu di klik maka
akan tampil submenu nya akan muncul, tetapi jika kita klik menu lain makan
submenu sebelumnya akan disembunyikan dan submenu yang kita pilih akan tampil. Disini
saya gunakan adalah menu mahasiswa FMIPA UNLAM BANJARBARU terdapat program
studi, angkatan, himpunan dan ukm yang ada dikamus tersebut.
Langkah pertama adalah dengan membuat kodingan html,
menambahkan css dan terakhir panggil dan gunakan jquerynya. Berikut adalah
source code dari ketiga komponen tersebut.
a. HTML
|
<body>
<ul id="nav">
<li><a
href="#">Prodi</a>
<ul>
<li><a
href="#">Matematika</a></li>
<li><a
href="#">Kimia</a></li>
<li><a
href="#">Biologi</a></li>
<li><a
href="#">Fisika</a></li>
<li><a
href="#">Farmasi</a></li>
<li><a
href="#">Ilmu Komputer</a></li>
<li><a
href="#">Anfarma</a></li>
</ul>
</li>
<li><a
href="#">Angkatan</a>
<ul>
<li><a
href="#">2011</a></li>
<li><a
href="#">2012</a></li>
<li><a
href="#">2013</a></li>
<li><a
href="#">2014</a></li>
<li><a
href="#">2015</a></li>
<li><a
href="#">2016</a></li>
</ul>
</li>
<li><a
href="#">Himpunan</a>
<ul>
<li><a
href="#">HIMATIKA</a></li>
<li><a
href="#">HIMAMIA</a></li>
<li><a
href="#">HIMABIO</a></li>
<li><a
href="#">HIMAFI</a></li>
<li><a
href="#">HIMAFARMA</a></li>
<li><a
href="#">HIMAKOM</a></li>
<li><a
href="#">HIMAANFARMA</a></li>
</ul>
</li>
<li><a
href="#">UKM</a>
<ul>
<li><a
href="#">SGO</a></li>
<li><a
href="#">MSC</a></li>
<li><a
href="#">FSI</a></li>
<li><a
href="#">TTG</a></li>
<li><a
href="#">UPK</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
b. CSS
|
<html>
<style>
#nav {
float: left;
width: 280px;
border-top: 1px solid #999;
border-right: 1px solid
#999;
border-left: 1px solid
#999;
}
#nav li a {
display: block;
padding: 10px 15px;
background: #ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid
#999;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none; // used to
hide sub-menus
}
#nav li ul li a {
padding: 10px 25px;
background: #ececec;
border-bottom: 1px dotted
#ccc;
}
</style>
|
c. JQuery
|
<head>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$('#nav > li >
a').click(function(){
if ($(this).attr('class')
!= 'active'){
$('#nav li
ul').slideUp();
$(this).next().slideToggle();
$('#nav li
a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
</head>
|
