Iso Web Id Tutorial Komputer
Related Articles
jquery Mega menu sebuah dropdown menu yang dapat menampung banyak sub menu dalam satu dropdown menu, tentu saja ini sangat menghemat ruang dari pada dropdown menu biasa. Sama seperti website ini pada menu Category menggunakan Mega menu dengan sedikit bantuan dari jquery tentunya 
, Sulitkah membuat dropdown menu? tentu saja tidak hanya sedikit sekali bermain – main dengan javascript kebanyakan seluruh design dikerjakan pada CSS, jika kalian sudah sedikit mengerti CSS akan sangat membantu pembuatan mega menu ini.
OK langsung saja kita Implementasi :
1. Buat 1 file misal index.html isi pada body (<body>) seperti dibawah
<div id=”wrap”>
<div id=”header”>
<div class=”top”>Judul website</div>
<ul class=”nav”>
<li class=”first parent”><a href=”#”>Home</a></li>
<li class=”parent” id=”scat“>
<a href=”#”>Categories</a>
<ul class=”categories” id=”categories“>
<li class=”fleft” id=”fleft”><a href=”#”>Elektronik</a>
<ul class=”subcategories”>
<li><a href=”#”>LG LCD TV 29 inch </a></li>
<li><a href=”#”>Samsung Mesin cuci 9 Kg </a></li>
<li><a href=”#”>Polytron Grand DVD </a></li>
<li><a href=”#”>LG LED TV 21 Inch </a></li>
</ul>
</li>
<li class=”fleft” id=”fleft”><a href=”#”>Komputer</a>
<ul class=”subcategories”>
<li><a href=”#”>Acer Aspire one</a></li>
<li><a href=”#”>Dell Inspiron</a></li>
<li><a href=”#”>Asus Eeepc</a></li>
<li><a href=”#”>Toshiba</a></li>
</ul>
</li>
<li class=”fleft” id=”fleft”><a href=”#”>Fashion</a>
<ul class=”subcategories”>
<li><a href=”#”>Baju muslim</a></li>
<li><a href=”#”>Mukenah putih</a></li>
</ul>
</li>
<li class=”fleft” id=”fleft”><a href=”#”>Hardware & Software</a>
<ul class=”subcategories”>
<li><a href=”#”>Motherboard Gigabyte</a></li>
<li><a href=”#”>LAN Card Dlink</a></li>
</ul>
</li>
</ul>
</li>
<li class=”parent”><a href=”#”>About us</a></li>
<li class=”parent”><a href=”#”>Contact us</a></li>
</ul>
<div class=”clear”></div>
</div>
</div>
Kode diatas hanya sebuat Tag HTML biasa tidak perlu saya jelaskan mengenai hal ini.
2. Buat file css pada folder css beri nama style.css isi seperti dibawah
body{background:url(../images/bg_top.png) repeat-x;padding:0;margin:0;}
#wrap{margin:0 auto;width:800px;}
#header .top{height:76px;line-height:76px;text-align:center;font:bold 18px Tahoma;color:#FFF;}
ul.nav{list-style:none;margin:3px 0 0 0;padding:0;}
ul.nav li.parent{float:left;margin:0;border-left:1px solid #999;}
ul.nav li a{display:block;padding:5px 10px;text-decoration:none;color:#666;font:normal 10px Sans serif, Helvetica, Arial;}
ul.nav li a:hover{display:block;text-decoration:underline;}
.clear{clear:both;}
ul.nav li.first{border-left:none;margin:0;padding:0}
.categories { display:none; position:absolute; padding:10px; width:500px;
background-color:#FFF; border:1px solid #999; border-bottom-left-radius:8px;
border-bottom-right-radius:8px; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 100;
}
.categories li.first{padding-top:0;}
.categories li.last{padding-bottom:0;}
.categories li{list-style:none;padding:2px 5px 1px 13px;}
.categories li.fleft{float:left;width:230px;}
.categories li a{background-color:#F5F5F5;padding:5px;}
.categories li ul.subcategories{font-size:10px;margin:0;padding:0 0 0 5px;}
.categories li ul.subcategories li a{background:none;padding:2px 0;}
Sama halnya dengan ini saya tidak perlu menjelas panjang lebar karena kalian bisa memperlajarinya di w3cschool
3. Pada Tag Head (<head>) kalian isi dengan
<link rel=”stylesheet” type=”text/css” href=”./css/style.css”> // link ke file css yang tadi sudah kita buat
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.2.min.js”></script> // jalankan Framework jquery untuk membantu kita membuat Mega menu
<script type=”text/javascript”>
$(function(event){ // Awal penulisan jquery framework
$(‘ul.nav #scat’).hover(function(){ // Apabila pada ID scat terdapat Mouse diatasnya kejakan fungsi dibawahnya
$(“#categories”).css(‘display’, ‘block’); // Tampilkan ID Categories (Mega menu) pada Layar
}, function(){
$(“#categories”).css(‘display’, ‘none’); // Bila Mouse keluar dari ID scat hidden ID Categories
});
});
</script>
Naah dari sini kalian sudah dapat melihat hasilnya akan tetapi pada CSS terdapat file image bg_top.png? ya benar image tersebut untuk background dari website. Loh Mega menunya kok sama seperti punya websie ini? Heee iya bener emang sama, karena teman saya tertarik dengan Mega menu website ini jadi sekalian untuk dibuat Artikel 
DEMO | DOWNLOAD
