Cara Membuat Menu Sederhana Dengan jQuery UI
Halo teman – teman semuanya, selamat datang kembali di blog tips dan trik Source Code Aplikasi. Di artikel sebelumnya kita telah banyak membahas mengenai kegunaan – kegunaan jQuery dan Jquery UI, nah di artikel kali ini saya akan memberikan tips dan trik yaitu Cara Membuat Menu Sederhana Dengan jQuery UI. Dimana kita akan merancang fitur sederhana dengan menggunakan css yang telah di sediakan jQuery UI CSS dan biasanya kita load library nya atau dapat unduh di link di bawah ini
http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
Di pada jQuery UI CSS pastinya perlu pengetahuan kegunaan class yang terdapat di jQuery UI, kemudian di pada Jquery UI kita pun perlu memberikan library jQuery dan jQuery UI.
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js
Apabila semuanya telah di load baru kita tinggal menggunakannya saja, di bawah ini screen shoot yang nanti kita akan bikin
Bagus, kita lanjut di artikel kali ini mengenai Cara Membuat Menu Sederhana Dengan jQuery UI. Teman – teman dapat copy script html nya di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title> <strong>Cara Merancang Fitur Sederhana Dengan jQuery UI</strong></title>
</head>
<body>
<ul id=fitur>
<li><a href=#>Spring</a></li>
<li><a href=#>Hibernate</a></li>
<li><a href=#>JSF</a></li>
<li><a href=#>HTML5</a></li>
<li><a href=#>Java</a>
<ul>
<li><a href=#>Java IO</a></li>
<li><a href=#>Swing</a></li>
<li><a href=#>Jaspr Reports</a></li>
</ul>
</li>
</ul>
</body>
</html>
Kemudian save dengan nama index.html, dan jalankan di browsernya. Karenanya hasil sementara seperti gambar di bawah ini
Baru kita tambahkan kegunaan jQuery UI nya dengan memanggil id=”fitur” dan menambahkan kegunaan jQuery UI CSS nya, load terlebih dahulu library nya
Kemudian kita masukkan script jQuery UI CSS nya
<script>
$(function() {
var fitur = $(#fitur) .fitur();
$( #fitur ) .fitur(focus, null, $( #fitur ) .fitur().find( .ui-menu-item:last ));
$(fitur).mouseleave(function () {
fitur.fitur('collapseAll') ;
});
});
</script>
Apabila telah save dan refres di browsernya, karenanya hasilnya seperti gambar di bawah ini
Tampilan masil dengan ukuran 100%, kita rubah lebih kecil saja supaya enak di lihat
<style>
.ui-menu {
width: 200px;
}
</style>
Apabila telah save dan refresh di browsernya, karenanya hasilnya sesuai seperti screen shoot di atas.
Bagus, demikianlah di tips kali ini mengenai Cara Membuat Menu Sederhana Dengan jQuery UI kita berjumpa kembali di artikel yang akan datang, semoga bermanfaat bagi teman – teman yang baru saja belajar mengenai jQuery mungkin dapat di jadikan refrensi bagi pembelajarannya. Terimakasih dan Hingga Jumpa
Sumber https://kursuswebsite.org
