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.
VERTICAL 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: #f6f6f6; border-bottom: 1px solid #ccc; }
.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: #000; 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; }
.vertical, .vertical li { width: 200px; }
.vertical li:hover ul, .vertical li.sfHover ul { left: 200px; top: 0; }
.vertical .sf-sub-indicator { background-position: -10px 0; }
.vertical a > .sf-sub-indicator { background-position: 0 0; }
.vertical a:focus > .sf-sub-indicator, .vertical a:hover > .sf-sub-indicator, .vertical a:active > .sf-sub-indicator, .vertical li:hover > a > .sf-sub-indicator, .vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 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: #f6f6f6; border-bottom: 1px solid #ccc; }
.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: #000; 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; }
.vertical, .vertical li { width: 200px; }
.vertical li:hover ul, .vertical li.sfHover ul { left: 200px; top: 0; }
.vertical .sf-sub-indicator { background-position: -10px 0; }
.vertical a > .sf-sub-indicator { background-position: 0 0; }
.vertical a:focus > .sf-sub-indicator, .vertical a:hover > .sf-sub-indicator, .vertical a:active > .sf-sub-indicator, .vertical li:hover > a > .sf-sub-indicator, .vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; }
4. Buat sebuah file html dan beri nama index.html. 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 6 buah menu utama dengan 2 level sub-menu karena pada style.css kita hanya mengatur maksimal untuk 2 level sub-menu. Ketik kode berikut di antara tag <body>. Untuk membuat menu menjadi vertical, pada tag <ul>, attribute class menjadi "menu vertical".
<body>
<ul class="menu vertical">
<li><a href="#a">Books</a>
<ul>
<li><a href="#">TextBook</a></li>
<li><a href="#">Magazines</a></li>
</ul>
</li>
<li><a href="#a">Movies</a>
<ul>
<li><a href="#">Animation</a></li>
<li><a href="#">Comedy</a></li>
<li><a href="#">Action</a></li>
</ul>
</li>
<li><a href="#">Music</a>
</li>
<li><a href="#">Games</a>
</li>
<li><a href="#a">Electronics</a>
<ul>
<li><a href="#">TV & Video</a></li>
<li><a href="#">Computer</a>
<ul>
<li><a href="#">PC Desktop</a></li>
<li><a href="#">Tablet</a></li>
<li><a href="#">Notebook</a></li>
</ul>
</li>
<li><a href="#">Communication</a></li>
</ul>
</li>
<li><a href="#">Home, Kitchen & Furniture</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