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.
VERTICAL MENU
Untuk membuat vertical menu accordion ini kita bisa menggunakan ddaccordion plugin. Silahkan ikuti langkah berikut.
1. Buat susunan direktori project Vertical Accordion Menu yang isinya sebagai berikut :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- ddaccordion.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: Helvetica, Arial, sans-serif; font-size: 16px; }
.menu { width: 180px; }
.menu .menuheader { font: bold; color: white; background: url(images/header.png) repeat-x center left; margin-bottom: 0px; padding: 4px 4px 4px 10px; cursor: hand; cursor: pointer; height:20px; border-bottom: 1px solid #FFFFFF; }
.menu .openmenu { background: url(images/header.png) repeat-x center left; }
.menu .menuheader:hover { background: url(images/header.png) repeat-x center left; }
.menu ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; }
.menu ul li { padding-bottom: 4px; }
.menu ul li a { color: #000000; display: block; padding-left: 20px; text-decoration: none; border-bottom: 1px solid #dadada; }
.menu ul li a:hover { background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.menu { width: 180px; }
.menu .menuheader { font: bold; color: white; background: url(images/header.png) repeat-x center left; margin-bottom: 0px; padding: 4px 4px 4px 10px; cursor: hand; cursor: pointer; height:20px; border-bottom: 1px solid #FFFFFF; }
.menu .openmenu { background: url(images/header.png) repeat-x center left; }
.menu .menuheader:hover { background: url(images/header.png) repeat-x center left; }
.menu ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; }
.menu ul li { padding-bottom: 4px; }
.menu ul li a { color: #000000; display: block; padding-left: 20px; text-decoration: none; border-bottom: 1px solid #dadada; }
.menu ul li a:hover { background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
4. Buat sebuah file html dan beri nama index.html. Panggil file css, library jquery, dan ddaccordion 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="ddaccordion.js"></script>
<title>Menu 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="ddaccordion.js"></script>
<title>Menu Accordion</title>
</head>
5. Kita buat 6 buah menu utama. Ketik kode berikut di antara tag <body>.
<body>
<div class="menu">
<div class="menuheader">Books</div>
<ul class="submenu">
<li><a href="#">Audiobooks</a></li>
<li><a href="#">Textbooks</a></li>
<li><a href="#">Magazines</a></li>
</ul>
<div class="menuheader">Electronics</div>
<ul class="submenu">
<li><a href="#">TV</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">GPS</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Handphone</a></li>
</ul>
<div class="menuheader">Sport</div>
<ul class="submenu">
<li><a href="#">Fitness</a></li>
<li><a href="#">Athletic</a></li>
<li><a href="#">Bike</a></li>
<li><a href="#">Golf</a></li>
</ul>
<div class="menuheader">Automotive</div>
<ul class="submenu">
<li><a href="#">Parts</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Wheels</a></li>
<li><a href="#">Motorcycle</a></li>
</ul>
<div class="menuheader">Pets</div>
<div class="menuheader">Kids & Baby</div>
<div>
</body>
<div class="menu">
<div class="menuheader">Books</div>
<ul class="submenu">
<li><a href="#">Audiobooks</a></li>
<li><a href="#">Textbooks</a></li>
<li><a href="#">Magazines</a></li>
</ul>
<div class="menuheader">Electronics</div>
<ul class="submenu">
<li><a href="#">TV</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">GPS</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Handphone</a></li>
</ul>
<div class="menuheader">Sport</div>
<ul class="submenu">
<li><a href="#">Fitness</a></li>
<li><a href="#">Athletic</a></li>
<li><a href="#">Bike</a></li>
<li><a href="#">Golf</a></li>
</ul>
<div class="menuheader">Automotive</div>
<ul class="submenu">
<li><a href="#">Parts</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Wheels</a></li>
<li><a href="#">Motorcycle</a></li>
</ul>
<div class="menuheader">Pets</div>
<div class="menuheader">Kids & Baby</div>
<div>
</body>
* Biru : Menu utama.
* Hijau : Sub-menu.
* Merah : Alamat URL / halaman yang dituju.
6. Ketik kode jquery berikut ini diantara tag <head> untuk membuat menu accordion.
<head>
. . . . . .
<script type="text/javascript">
ddaccordion.init({
headerclass: "menuheader",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 500,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openmenu"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
});
</script>
<title>Menu Accordion</title>
</head>
. . . . . .
<script type="text/javascript">
ddaccordion.init({
headerclass: "menuheader",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 500,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openmenu"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
});
</script>
<title>Menu Accordion</title>
</head>
Keterangan Kode :
Method ddaccordion.init() dipanggil untuk membuat efek menu accordion dengan mengatur beberapa parameter penting. Parameter headerclass menentukan menu utama yang akan ter-expand. Parameter contentclass menentukan sub-menu dari headerclass. Parameter revealtype menentukan bagaimana cara meng-expand menu yang klik atur, yaitu dengan cara di-klik. Parameter lain seperti animatedspeed menentukan kecepatan animasinya.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar