Hampir semua web aplikasi yang dibuat terdapat menu untuk mengelola konten sehingga memudahkan pengunjung atau user dalam menggunakannya. Posisi menu di suatu aplikasi bermacam-macam ada yang diletakan di atas, di samping kanan atau kiri. Pada kesempatan ini kita akan membuat menu sederhana dengan bantuan JQuery dan semoga kedepannya bisa dikembangkan menjadi lebih menarik dan efektif.
1. Kita buat sintak HTML nya yang berisi list menu
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Sub Menu 4-1</li>
<li>Sub Menu 4-2</li>
<li>Sub Menu 4-3</li>
</ul>
</li>
<li>Menu 5</li>
<li>Menu 6
<ul>
<li>Sub Menu 6-1
<ul>
<li>Sub Menu 6-1-1</li>
<li>Sub Menu 6-1-2</li>
<li>Sub Menu 6-1-3</li>
</ul>
</li>
<li>Sub Menu 6-2
<ul>
<li>Sub Menu 6-2-1</li>
<li>Sub Menu 6-2-2</li>
<li>Sub Menu 6-2-3</li>
</ul>
</li>
<li>Sub Menu 6-3</li>
</ul>
</li>
<li>Menu 7</li>
</ul>
2. Kemudian kita buat sintak JQuerynya sebagai berikut,
<link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/jquery-1.10.2.js"></script>
<script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#menu").menu();
});
</script>
3. Supaya panjang kolom list tidak terlalu lebar, kita tambahkan sedikit style CSS seperti berikut,
.ui-menu { width: 200px; }
4. Berikut sintak keseluruhan
<html>
<head>
<link rel="stylesheet" href="code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/jquery-1.10.2.js"></script>
<script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#menu").menu();
});
</script>
<style>
.ui-menu { width: 200px; }
</style>
</head>
<body>
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Sub Menu 4-1</li>
<li>Sub Menu 4-2</li>
<li>Sub Menu 4-3</li>
</ul>
</li>
<li>Menu 5</li>
<li>Menu 6
<ul>
<li>Sub Menu 6-1
<ul>
<li>Sub Menu 6-1-1</li>
<li>Sub Menu 6-1-2</li>
<li>Sub Menu 6-1-3</li>
</ul>
</li>
<li>Sub Menu 6-2
<ul>
<li>Sub Menu 6-2-1</li>
<li>Sub Menu 6-2-2</li>
<li>Sub Menu 6-2-3</li>
</ul>
</li>
<li>Sub Menu 6-3</li>
</ul>
</li>
<li>Menu 7</li>
</ul>
</body>
</html>
Untuk melihat demonya bisa dilihat di link Berikut
No comments:
Post a Comment