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.
Keyword yang banyak dicari :
- jquery navigasi
- buat accordion pake jquery
- navigasi jquery
- script bikin navigasi website yang keren
- membuat script accordion
- navigasi menu
- accordion
- script jquery pilihan
- script navigasi web
- script untuk membuat accordion pada wordpress
- script website sekolah gratis
- membuat menu dengan jquery untuk web
- membuat menu dengan jquery ui
- accordion jquery ui
- contoh menu menu web company profile
- desain web dengan navigasi
- Gratis Script navigasi
- jquery untuk navigasi web
- membuat accordion
- membuat accordion jquery