Dengan widget accordion jQuery UI kita juga dapat merancang navigasi menu website. Script yang dipakai untuk navigasi menu ini adalah:
var pilihan= {
navigation: true
};
$(“#accordionku”).accordion(pilihan);
Kita akan membuat file-file di dalam folder menu. Coding lengkapnya seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Accordian</title>
<link rel=”stylesheet” href=”../css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<div id=”accordionku”>
<h2>
<a href=”about.html”>About Us</a>
</h2>
<div>
<a href=”about.html#company”>Our Company</a>
<br/><a href=”about.html#visi”>Visi Misi</a>
<br/><a href=”about.html#core”>Our Core</a>
</div>
<h2>
<a href=”product.html”>Product</a>
</h2>
<div>
<a href=”product.html#hemat”>Paket Hemat</a>
<br/><a href=”product.html#hemat”>Paket Bisnis</a>
<br/><a href=”product.html#exclusive”>Exclusive</a>
</div>
<h2>
<a href=”client.html”>Client</a>
</h2>
<div>
<a href=”client.html#retail”>Retail</a>
<br/><a href=”client.html#corporate”>Corporate</a>
<br/><a href=”client.html#goverment”>Government</a>
</div>
</div><!–end of accordionku–>
<script src=”../development-bundle/jquery-1.6.2.js”>
</script>
<script src=”../development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”../development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”../development-bundle/ui/jquery.ui.accordion.js”>
</script>
<script>
(function($){
var pilihan= {
navigation: true
};
$(“#accordionku”).accordion(pilihan);
})(jQuery);
</script>
</body>
</html>
Silahkan simpan file tersebut ke sebagai menu/about.html, menu/product.html dan client.html.
Demo file about.html bisa dilihat di http://aris.proweb.asia/menu/about.html seperti gambar berikut ini:
Demo file product.html bisa dilihat di http://aris.proweb.asia/menu/product.html seperti gambar di bawah ini:
Demo file client.html bisa dilihat di http://aris.proweb.asia/menu/client.html seperti gambar di bawah ini:
Untuk penjelasan lebih lanjut mengenai accordion jQuery UI silahkan mengunjungi http://jqueryui.com/demos/accordion/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.