Cara Membuat Mega Menu Drop Down Di Blog

Posted on May 10, 2013

Mega Menu Bar

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.

Perbedaan Munu Drop Down
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.
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>
Penjelasan Mega menu

    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.

    19 comments:

    1. mantab nih, jadi mirip sub menu gitu ya

      ReplyDelete
    2. ini ada batasannya kagak gan untuk jumlah menu drop down nya

      ReplyDelete
    3. apakah ukuran width mempengaruhi jumlah sub menu yang bisa digunakan ?

      ReplyDelete
    4. cocok buat masukin kategori blog ya

      ReplyDelete
    5. @review Jujujr: Tidak Ada, bila sobat ingin menambahkan terus ini tetap akan compatible dan dapat berjalan dengan baik.

      @tutorial jitu: Tidak, ukuran widht tidak akan mempengaruhi sub menu. Bila sub menu ingin ditambahkan sesuai keinginan tetap bisa.

      ReplyDelete
    6. Terimakasih sobat, saya coba dulu tutorialnya

      ReplyDelete
    7. bagus juga idenya nih biar bisa menghemat menu dropdown..
      :)

      ReplyDelete
    8. liat demonya terus ada slidenya, keren gan.. nanti kapan-kapan di coba..

      ReplyDelete
    9. jd lebih besar gitu ea sob?
      hmm, kyakx cocok buat blogku...

      ReplyDelete
    10. heleh ruwet ah, bawaan template ajah

      ReplyDelete
    11. @Achmed Islamic Hernawan: iya sob memang terlihat lebih besar dibandingkan dengan yang lainnya...

      @Hanif: Mana sob yang ruwet, kalo bisa saya bantu. Pertanyaan yang relevan dan masuk akal pasti saya jawab sebisa saya.

      @All: makasih sudah berkunjung dan meninggalkan jejaknya di blog ini :)

      ReplyDelete
    12. Terimakasih gan artikel tutorialnya :)

      ReplyDelete
    13. Kapan-kapan mau coba praktekin juga ah.

      ReplyDelete
    14. nanti coba ah semoga aja bagus hasil nya

      ReplyDelete
    15. Lihat demonya keren banget Mas
      Scriptnya kusimpan...., ijin ya...

      ReplyDelete
    16. Gede bgt sob...bookmark dulu :D

      ReplyDelete
    17. wow its great tips for me ...its work...

      ReplyDelete