Cara Membuat Mega Menu

Berbicara masalah menu, mungkin anda bosan dengan tampilan menu seperti biasanya. Mungkin juga anda ingin menjajal menu lain yang lebih atraktif dan menarik. Sekarang coba menu yang satu ini, dijamin anda bakalan puas. Sesuai namanya, mega menu adalah menu dengan penyimpanan yang banyak dan disertai dengan jquery, sehingga tampilannya akan buka tutup seperti slider dari bagian perbagian. Ok gak usah panjang lebar ngomongnya...saya yakin anda akan bosan nantinya. Sekarang mari kita bahas cara membuat mega menu. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di atas kode ]]></b:skin>

ul.ldd_menu{ z-index:999;  margin:0px;  padding:0;  display:block;  height:50px;  background-color:#D04528;  list-style:none;  font-family:"Trebuchet MS",sans-serif;  border-top:1px solid #EF593B;  border-bottom:1px solid #EF593B;  border-left:10px solid #D04528;  -moz-box-shadow:0px 3px 4px #591E12;  -webkit-box-shadow:0px 3px 4px #591E12;  -box-shadow:0px 3px 4px #591E12}
ul.ldd_menu a{ text-decoration:none}
ul.ldd_menu >li{ float:left;  position:relative}
ul.ldd_menu >li >span{ z-index:999;  float:left;  color:#fff;  background-color:#D04528;  height:50px;  line-height:50px;  cursor:default;  padding:0px 20px;  text-shadow:0px 0px 1px #fff;  border-right:1px solid #DF7B61;  border-left:1px solid #C44D37}
ul.ldd_menu .ldd_submenu{ z-index:999;  position:absolute;  top:50px;  width:550px;  display:none;  opacity:0.95;  left:0px;  font-size:10px;  background:#C34328;  border-top:1px solid #EF593B;  -moz-box-shadow:0px 3px 4px #591E12 inset;  -webkit-box-shadow:0px 3px 4px #591E12 inset;  -box-shadow:0px 3px 4px #591E12 inset}
a.ldd_subfoot{ z-index:999;  background-color:#f0f0f0;  color:#444;  display:block;  clear:both;  padding:15px 20px;  text-transform:uppercase;  font-family:Arial,serif;  font-size:12px;  text-shadow:0px 0px 1px #fff;  -moz-box-shadow:0px 0px 2px #777 inset;  -webkit-box-shadow:0px 0px 2px #777 inset;  -box-shadow:0px 0px 2px #777 inset}
ul.ldd_menu ul{ list-style:none;  float:left;  border-left:1px solid #DF7B61;  margin:20px 0px 10px 30px;  padding:10px}
li.ldd_heading{ font-family:Georgia,serif;  font-size:13px;  font-style:italic;  color:#FFB39F;  text-shadow:0px 0px 1px #B03E23;  padding:0px 0px 10px 0px}
ul.ldd_menu ul li a{ font-family:Arial,serif;  font-size:10px;  line-height:20px;  color:#fff;  padding:1px 3px}
ul.ldd_menu ul li a:hover{ -moz-box-shadow:0px 0px 2px #333;  -webkit-box-shadow:0px 0px 2px #333;  box-shadow:0px 0px 2px #333;  background:#AF412B}

Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
var $menu = $(&#39;#ldd_menu&#39;);
$menu.children(&#39;li&#39;).each(function(){
var $this = $(this);
var $span = $this.children(&#39;span&#39;);
$span.data(&#39;width&#39;,$span.width());
$this.bind(&#39;mouseenter&#39;,function(){
$menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
$span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
$this.find(&#39;.ldd_submenu&#39;).slideDown(300);
});
}).bind(&#39;mouseleave&#39;,function(){
$this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
$span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
});
});
});
</script>

Selanjutnya masukkan kode berikut di bawah kode <div id='header-wrapper'>

<ul class='ldd_menu' id='ldd_menu'>
<li>
<span>Vacations</span><!-- Increases to 510px in width-->
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Location</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
<li>
<span>Tourists</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>By Download</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Category</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<ul>
<li class='ldd_heading'>By Theme</li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
<li><a href='masukkan link anda di sini'>judul</a></li>
</ul>
<a class='ldd_subfoot' href='#'> + New Deals</a>
</div>
</li>
</ul>

Silahkan ikuti petunjuk edit pada kode di atas.
Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"