Cara Membuat Mega Menu Drop Down Di Blog

Cara Membuat Mega Menu Drop Down Di Blog-Sebenarnya apa sih mega menu drop down itu? Mungkin pertanyaan tersebut yang pertama kalo terlintas setelah membaca judul di atas. Pertama kali terpikirkan mungkin menu drop down biasa yang tidak ada keistimewa-annya. Tanpa ada suatu keunikan tersendiri dengan yang lain, mungkin hanyalah tampilan yang sedikit diubah-ubah.

Segala prasangka tersebut dapat dilempar sejauh mungkin. Mega menu di sini adalah menu bar yang memiliki lebih dari satu subbab menu dalam tiap menu utama yang ditampilkan. Menu ini berbeda bila dibandingkan dengan menu drop down biasanya, karena biasanya satu menu utama akan menampilkan sub menu-sub menu lainnya tanpa menampilkan secara langsung subbab menu tersebut. Bingung ya? Untuk lebih jelasnya anda bisa membandingkan kedua gambar di bawah ini beserta penjelasannya.

Klik Untuk Memperbesar

Sudah sedikit mengerti kah perbedaannya? Bila tetap belum masuk ke otak (alias pusing) bisa tanya lewat komentar. O iya jangan lupa untuk nge-like FP blog ini dengan alamat facebook.com/netfori.

Bagi yang tertarik membuat menu drop down ekstra besar di blog tersebut, silahkan menyimak cara-caranya. Untuk melihat hasilnya silahkan klik link di bawah ini.

Demo Live

---

Cara Membuat

1. Masukkan kode css di bawah ini di atas kode ]]></b:skin> 

ul.ldd_menu{
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{
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{
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{
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;
}

2. Masukkan kode html di bawah melalui tambah widget atau dengan cara:

• Layout/Tata Letak > Add a Gadget
• Pilih HTML/Javascript > Masukkan kode di bawah ini tanpa menggunakan judul. Jangan lupa tambahkan gadget dan letakkan di bagian atas/ dekat dengan 'pages-menu'

<ul id="ldd_menu" class="ldd_menu">

<li>

<span style="width: 67px;">Blog</span>

<!-- Increases to 510px in width-->

<div class="ldd_submenu" style="display: none;">

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

<li><a href="#">Nano-nano</a></li>

</ul>

<ul>

<li class="ldd_heading">Isi</li>

<li><a href="#">SEO</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span style="width: 76px;">Lengkapnya</span>

<div class="ldd_submenu" style="display: none;">

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

<li><a href="#">Nano-nano</a></li>

</ul>

<ul>

<li class="ldd_heading">Isi</li>

<li><a href="#">SEO</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span style="overflow: hidden; width: 67px;">Seputar Blog</span>

<div class="ldd_submenu" style="display: none;">

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

<li><a href="#">Nano-nano</a></li>

</ul>

<ul>

<li class="ldd_heading">Isi</li>

<li><a href="#">SEO</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>

<script type="text/javascript" src="https://sites.google.com/site/blognetfori/archive/megamenudropdown.js"></script><div style="clear:both;"></div>

Berikut kode yang harus disesuaikan dengan kebutuhan:

1. Kode warna merah: Masukkan kata untuk Menu Utama.
2. Kode warna biru: Masukkan kata untuk sub menu yang diinginkan.
3. Kode warna ungu: Masukkan kata untuk subbab menu. 
4. Kode warna kuning: Masukkan kata tambahan yang diinginkan.
5. Kode warna hijau: Masukkan url tujuan yang diinginkan.

NB: Bila menu bar tidak berfungsi seperti contoh,  kode yang berwarna biru muda dihapus saja.

Penting untuk diperhatikan, jika menempatkan kode HTML di atas melalui HTML/Javascript kacau, maka dapat melalui:

• Template > Edit Template
• Cari kode <div id="content-wrapper"> dan letakkan tepat di atasnya.

Sekian penjelasan singkat ini, mohon maaf bila ada salah kata. Jika artikel ini menarik silahkan untuk dikopas dengan syarat yang tertera di bawah. Saya sangat terbantu jika anda mengeklik FP Facebook yang berada di sidebar sebelah kiri tersebut. Jangan lupa subscribe email anda untuk mendapatkan update artikel terbaru dari Blog Netfori. Terimakasih. Lihat juga Ganti Teks pada Labels dengan Gambar Menarik dan Load Posting Otomatis dan Scroll Tidak Terbatas di Blog. Tips ini didapat dari ini dan dikembangkan oleh ini. Sekian.

Artikel Terkait :

Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.
<a href="http://netfori.blogspot.com/2013/05/cara-membuat-mega-menu-drop-down-di-blog.html">Cara Membuat Mega Menu Drop Down Di Blog</a>

Get Free Unlimited Post Update !

Jika Anda tertarik untuk Berlangganan artikel ini
Silahkan masukkan alamat email anda: