Menu dropdown biasa digunakan jika suatu website memiliki banyak halaman menu. Tujuan penggunaan menu dropdown adalah menyederhanakan tampilan menu website agar terlihat lebih ringkas dan terorganisir. Kita akan mencoba membuat dropdown menu menggunakan jquery dan superfish plugin.
HORIZONTAL MENU
1. Buat direktori project Dropdown menu yang isinya sebagai berikut :
- Folder images
- Index.html
- Jquery-1.4.2.min.js
- Superfish.js
- Style.css
2. Silahkan download dan letakkan gambar berikut ini di folder images :
3. Ketik kode css berikut lalu beri nama style.css.
body { font: 14px Helvetica, Sans-Serif; }
.menu, .menu * { margin: 0; padding: 0; list-style: none; }
.menu { line-height: 1.0; }
.menu ul { position: absolute; width: 14em; }
.menu ul li { width: 100%; }
.menu li { float: left; position: relative; }
.menu a { display: block; position: relative; }
.menu li:hover ul, .menu li.sfHover ul { left: 0; }
ul.menu li li:hover ul, ul.menu li li.sfHover ul { left: 14em; top: 0; }
.menu { float: left; }
.menu a { padding: 0.5em 0.5em; text-decoration: none; }
.menu li { background: #000; border-right: 1px solid #333; }
.menu li li { background: #f6f6f6; border-bottom: 1px solid #ccc; border-right: none; }
.menu li li li { background: #f6f6f6; border-bottom: 1px solid #ccc; border-right: none; }
.menu li a, .menu li a:visited { color: #fff; font-weight:bold; }
.menu li li a, .menu li li a:visited { color: #000; font-weight:100; }
.menu li li li a, .menu li li li a:visited { color: #000; font-weight:100; }
.menu li:hover, .menu li.sfHover, .menu a:focus, .menu a:hover, .menu a:active { background: #F3D673; outline: 0; }
.menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; }
.sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('images/arrows.png') no-repeat -10px -100px; }
a > .sf-sub-indicator { top: .8em; background-position: 0 -100px; }
.menu ul a > .sf-sub-indicator { background-position: 0 0; }
.menu, .menu * { margin: 0; padding: 0; list-style: none; }
.menu { line-height: 1.0; }
.menu ul { position: absolute; width: 14em; }
.menu ul li { width: 100%; }
.menu li { float: left; position: relative; }
.menu a { display: block; position: relative; }
.menu li:hover ul, .menu li.sfHover ul { left: 0; }
ul.menu li li:hover ul, ul.menu li li.sfHover ul { left: 14em; top: 0; }
.menu { float: left; }
.menu a { padding: 0.5em 0.5em; text-decoration: none; }
.menu li { background: #000; border-right: 1px solid #333; }
.menu li li { background: #f6f6f6; border-bottom: 1px solid #ccc; border-right: none; }
.menu li li li { background: #f6f6f6; border-bottom: 1px solid #ccc; border-right: none; }
.menu li a, .menu li a:visited { color: #fff; font-weight:bold; }
.menu li li a, .menu li li a:visited { color: #000; font-weight:100; }
.menu li li li a, .menu li li li a:visited { color: #000; font-weight:100; }
.menu li:hover, .menu li.sfHover, .menu a:focus, .menu a:hover, .menu a:active { background: #F3D673; outline: 0; }
.menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; }
.sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('images/arrows.png') no-repeat -10px -100px; }
a > .sf-sub-indicator { top: .8em; background-position: 0 -100px; }
.menu ul a > .sf-sub-indicator { background-position: 0 0; }
4. Panggil file css, library jquery, dan superfish 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="superfish.js"></script>
<title>Dropdown menu</title>
</head>
5. Kita buat 5 buah menu utama dengan 2 level sub-menu karena pada style.css kita hanya mengatur style maksimal 2 level sub-menu. Ketik kode berikut di antara tag <body>.
<body>
<ul class="menu">
<li><a href="#">Books</a>
<ul>
<li><a href="#">TextBook</a></li>
<li><a href="#">Magazines</a></li>
</ul>
</li><li><a href="#">Movies, Music & Games</a>
<ul>
<li><a href="#">Movie</a>
<ul>
<li><a href="#">Animation</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Comedy</a></li>
</ul>
</li>
<li><a href="#">Music</a></li>
<li><a href="#">Games</a></li>
</ul>
</li><li><a href="#">Electronics</a>
<ul>
<li><a href="#">TV & Video</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Musical Instruments</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Car Electronics & GPS</a></li>
</ul>
</li>
<li><a href="#">Home & Garden</a></li>
<li><a href="#">Pet Supplies</a></li>
</ul>
</body>
<ul class="menu">
<li><a href="#">Books</a>
<ul>
<li><a href="#">TextBook</a></li>
<li><a href="#">Magazines</a></li>
</ul>
</li><li><a href="#">Movies, Music & Games</a>
<ul>
<li><a href="#">Movie</a>
<ul>
<li><a href="#">Animation</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Comedy</a></li>
</ul>
</li>
<li><a href="#">Music</a></li>
<li><a href="#">Games</a></li>
</ul>
</li><li><a href="#">Electronics</a>
<ul>
<li><a href="#">TV & Video</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Musical Instruments</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Camera</a></li>
<li><a href="#">Car Electronics & GPS</a></li>
</ul>
</li>
<li><a href="#">Home & Garden</a></li>
<li><a href="#">Pet Supplies</a></li>
</ul>
</body>
* Merah : Link halaman yang dituju.
* Biru : Menu utama.
* Hijau : Sub-menu.
6. Selanjutnya kita buat kode jquery untuk membuat menu dropdown ini. Ketik kode berikut diantara tag <head>.
<head>
. . . . . .
<script type="text/javascript">
jQuery(function(){
jQuery('ul.menu').superfish({
animation: {opacity:'show',height:'show'},
speed: 'slow',
autoArrows: true
});
});
</script>
<title>Dropdown menu</title>
</head>
. . . . . .
<script type="text/javascript">
jQuery(function(){
jQuery('ul.menu').superfish({
animation: {opacity:'show',height:'show'},
speed: 'slow',
autoArrows: true
});
});
</script>
<title>Dropdown menu</title>
</head>
Keterangan Kode :
Untuk membuat menu dropdown, kita panggil method superfish(). Method ini bisa dipanggil tanpa parameter apapun. Namun, kali ini kita atur beberapa parameter yang ada. Pada parameter animation, kita atur untuk mengaktifkan animasi fade-in dan slide-down ketika cursor berada di atas menu dengan kecepatan animasi yang lambat. Parameter autoArrows, kita set 'true' agar muncul tanda panah ketika suatu menu/sub-menu memiliki sub-menu di dalamnya.
7. Coba buka index.html pada web browser. Letakkan cursor di atas salah satu menu.
Selamat Mencoba. . .
Comment Now
0 komentar