Kita akan membuat menu dengan gaya lainnya, yaitu menu accordion. Accordion sebenarnya adalah komponen asli jquery. Namun, kali ini kita akan menggunakan plugin hrzaccordion dan ddaccordion untuk membuat menu accordion ini.
HORIZONTAL MENU
Untuk membuat horizontal menu accordion ini kita menggunakan hrzaccordion plugin. Silahkan ikuti langkah berikut.
1. Buat susunan direktori project Horizontal Accordion Menu yang isinya sebagai berikut :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- Jquery.hrzAccordion.js
- Style.css
2. Silahkan download dan letakkan gambar berikut ini di folder images :
3. Ketik kode css seperti berikut lalu beri nama style.css.
body { font-family:Arial, Helvetica, sans-serif; }
.test{ display: none; }
.container { width:50%; }
.container ul { list-style-type: none; margin: 0; padding:0px; }
.container li { display: inline; margin: 0px; padding:0px; }
.contentContainer { padding-left: 10px; float: left; width:0px; height: 310px; overflow:hidden; }
.contentInnerWrapper { text-align: justify; padding: 20px; }
.handle { float: left; width: 38px; height: 310px; margin: 1px; margin-right: -10px; background: url(images/header.png) repeat-y; }
.handleOver { background: url(images/header-active.png) repeat-y; }
.handleSelected { background: url(images/header-active.png) repeat-y; }
.test{ display: none; }
.container { width:50%; }
.container ul { list-style-type: none; margin: 0; padding:0px; }
.container li { display: inline; margin: 0px; padding:0px; }
.contentContainer { padding-left: 10px; float: left; width:0px; height: 310px; overflow:hidden; }
.contentInnerWrapper { text-align: justify; padding: 20px; }
.handle { float: left; width: 38px; height: 310px; margin: 1px; margin-right: -10px; background: url(images/header.png) repeat-y; }
.handleOver { background: url(images/header-active.png) repeat-y; }
.handleSelected { background: url(images/header-active.png) repeat-y; }
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery, dan hrzAccordion plugin. Ketik kode berikut di antara tag <head>.
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.hrzAccordion.js"></script>
<title>Horizontal Accordion</title>
</head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.hrzAccordion.js"></script>
<title>Horizontal Accordion</title>
</head>
5. Kita buat 4 buah menu utama beserta content-nya. Ketik kode berikut di antara tag <body>.
<body>
<ul class="test">
<li><div class="handle"><img src='images/title1.png'></div>
<h3>HTML</h3><hr />
<p>HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.</p>
</li>
<li><div class="handle"><img src='images/title2.png'></div>
<h3>PHP</h3><hr />
<p>PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis.</p>
</li>
<li><div class="handle"><img src='images/title3.png'></div>
<h3>Mysql</h3><hr />
<p> MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL.</p>
</li>
<li><div class="handle"><img src='images/title4.png'></div>
<h3>Apache</h3><hr />
<p>Server HTTP Apache adalah server web yang dapat dijalankan di banyak sistem operasi yang berguna untuk melayani dan memfungsikan situs web.</p>
</li>
</ul>
</body>
<ul class="test">
<li><div class="handle"><img src='images/title1.png'></div>
<h3>HTML</h3><hr />
<p>HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.</p>
</li>
<li><div class="handle"><img src='images/title2.png'></div>
<h3>PHP</h3><hr />
<p>PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis.</p>
</li>
<li><div class="handle"><img src='images/title3.png'></div>
<h3>Mysql</h3><hr />
<p> MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL.</p>
</li>
<li><div class="handle"><img src='images/title4.png'></div>
<h3>Apache</h3><hr />
<p>Server HTTP Apache adalah server web yang dapat dijalankan di banyak sistem operasi yang berguna untuk melayani dan memfungsikan situs web.</p>
</li>
</ul>
</body>
* Biru : Menu utama.
* Orange : Konten.
6. Selanjutnya kita buat kode jquery untuk membuat menu horizontal accordion ini. Ketik kode berikut diantara tag <head>.
<head>
. . . . . .
<script type="text/javascript">
$(document).ready(function() {
$(".test").hrzAccordion({
eventTrigger:"mouseover",
openOnLoad:"3",
openSpeed: 1000,
closeSpeed: 1000,
handlePositionArray : "left,left,left,right"
});
});
</script>
<title>Horizontal Accordion</title>
</head>
. . . . . .
<script type="text/javascript">
$(document).ready(function() {
$(".test").hrzAccordion({
eventTrigger:"mouseover",
openOnLoad:"3",
openSpeed: 1000,
closeSpeed: 1000,
handlePositionArray : "left,left,left,right"
});
});
</script>
<title>Horizontal Accordion</title>
</head>
Keterangan Kode :
Untuk membangkitkan menu horizontal accordion, kita panggil method hrzAccordion(). Disini kita atur beberapa parameter untuk mendapatkan variasi fitur menu horizontal accordion ini. Kita buat supaya menu terbuka ketika cursor berada di atas menu dengan mengatur parameter evenTrigger:"mouseover". Pada saat halaman web di-load pertama kali, kita atur supaya menu nomor 3 sudah terbuka melalui parameter openOnLoad:"3". Kita perlambat kecepatan animasi membuka dan menutup menunya lewat parameter openSpeed dan closeSpeed. Semakin besar nilai parameternya, semakin lambat animasinya. Parameter handlePositionArray menunjukkan posisi menu terhadap content-nya ketika terbuka, dimana secara default posisinya adalah left.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar