Cara Membuat Mega Dropdown Menu dengan CSS

Mega Dropdown Menu, atau biasa juga disebut mega menu adalah jenis dropdown menu yang menampilkan dropdown yang besar. Dropdown besar tersebut biasanya berisi banyak sekali link, dan terkadang juga memiliki paragraf. Mega Menu biasanya digunakan pada situs-situs besar yang memiliki banyak sekali konten dan jenis halaman sehingga membutuhkan navigasi yang banyak, seperti situs-situs pemerintahan. Jadi, Mega Menu kurang cocok jika diterapkan pada blog.

Pada kesempatan kali ini, saya akan memberikan tutorial tentang bagaimana membuat mega dropdown menu dengan css, tanpa javascript. Tutorial ini ditujukan untuk web programmer pemula atau yang ingin menambah ilmu mengenai teknik-teknik CSS.

Mega Menu Dropdown

Karena tutorial ini lebih saya tujukan untuk web programmer juga, jadi bawaannya agak sedikit berbeda dengan posting-posting saya sebelumnya. Pada tutotial ini saya akan menjelaskan detail-detailnya dan lebih gamblang mengungkapkan istilah-istilah pemrograman karena saya asumsikan anda mengerti.

Mulai dari sini, sebaiknya anda membaca sambil membuka file html dan css yang bisa anda download lewat link di atas. Silahkan buka lewat source code editor kesayangan anda, kita akan membedahnya bersama-sama.

Konsep

Konsep membuat mega dropdown menu ini, sama dengan dropdown menu css yang pernah saya bahas sebelumnya, yaitu menggunakan pseudo class :hover pada selector tag <li>. Perbedaannya, terletak pada properti position: untuk tag <li> dan markup HTML untuk dropdownnya.

Perbedaan Tipe Posisi antara Mega menu dan Dropdown biasa

.mega-menu >ul {
position:relative;
}
.mega-menu >ul >li {
position:static; /* tidak usah ditulis juga bisa */
}
.rdropdown-menu-biasa >ul >li {
position:relative;
}

Properti position: untuk tag <li> pada dropdown menu biasa, mempunyai value relative;, sedangkan pada mega dropdown menu itu dibuat static; (position:static; adalah posisi default sehingga tidak usah dituliskan). Sebagai gantinya, tag <ul> atau container untuk menu utama harus diberi posisi relative. Hal ini agar dropdown menu yang memiliki posisi absolute mempunyai lebar maksimal alias full-width, tidak dibatasi dengan lebar <li>.

Untuk memahami karakteristik dari tiap posisi, anda bisa membaca posting ini : Mengenal CSS position.

Perbedaan Markup HTML

Perbedaan mega menu dengan dropdown menu biasa juga terletak pada markup sub menunya. Jika sub menu biasa menggunakan tag <ul>, lain halnya dengan sub mega menu yaitu dengan tag <div>. Begitupun dengan isinya, sub menu biasa hanya berisi daftar link dengan tag <li><a href="#">Sub menu</a></li>, sedangkan isi dari sub mega menu bisa bebas di isi apa saja.

<li><a href=”#”>Menu Induk</a>
<ul>Isi dari Sub menu biasa</ul>
</li>
<li><a href=”#”>Menu Induk</a>
<div>Isi dari sub mega menu</div>
</li>

Kode

Setelah memahami konsep dan perbedaan mega menu dari dropdown menu biasa, sekarang kita akan lebih lanjut lagi pada pembahasan kodenya. Kita mulai dari kode HTML-nya.

HTML

<div class=”mega-menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Profile</a>
<div class=”menu-detail profile”>
<div class=”section section-1″>
<h3 class=”section-title”>Section 1</h3>
<div class=”section-content”>
<p>Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Mad wasim do metam la giu dolor. Dolor la samoi jud huuta la qui. Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Dolor la samoi jud huuta la qui.Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor.</p>
</div>
</div>
<div class=”section links”>
<h3>Links</h3>
<ul>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>About Blog</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Contact/Hire Me</a></li>
<li><a href=”#”>Curriculum Vitae</a></li>
</ul>
</div>
<div class=”section social-media”>
<h3>Social Media Profile</h3>
<ul>
<li class=”facebook”><a href=”#”>Me on Facebook</a></li>
<li class=”twitter”><a href=”#”>Me on Twitter</a></li>
<li class=”googleplus”><a href=”#”>Me on Google+</a></li>
<li class=”linkedin”><a href=”#”>Me on LinkedIn</a></li>
<li class=”dribbble”><a href=”#”>Me on Dribbble</a></li>
</ul>
</div>
</div>
</li>
<li><a href=”#”>Categories</a>
<div class=”menu-detail categories”>
<div class=”section seo”>
<h3><a href=”#”>Search Engine Optimization</a></h3>
<ul>
<li><a href=”#”>Link Building</a></li>
<li><a href=”#”>SEO Tools</a></li>
<li><a href=”#”>SEO News</a></li>
<li><a href=”#”>Study Cases</a></li>
<li><a href=”#”>SEO On-page</a></li>
</ul>
</div>
<div class=”section copywrite”>
<h3><a href=”#”>Blogging</a></h3>
<ul>
<li><a href=”#”>Blogger Tricks & Tutorial</a></li>
<li><a href=”#”>Wordpress Tricks & Tutorial</a></li>
<li><a href=”#”>Content Strategies</a></li>
<li><a href=”#”>Make Money Blogging</a></li>
<li><a href=”#”>Blog Design</a></li>
</ul>
</div>
<div class=”section im”>
<h3><a href=”#”>Internet Marketing</a></h3>
<ul>
<li><a href=”#”>List Building</a></li>
<li><a href=”#”>Copy Writing</a></li>
<li><a href=”#”>Social Media Marketing</a></li>
<li><a href=”#”>Content Marketing</a></li>
<li><a href=”#”>Interview the Gurus</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>

Tidak banyak yang bisa saya jelaskan dari kode HTMLnya. Yang jelas container untuk kode isi sub menu-nya saya beri nama class ‘menu-detail‘. Isi sub menu saya bagi menjadi 3 bagian (section).

CSS

Untuk Kode CSS, akan saya bagi beberapa bagian agar lebih mudah untuk di jelaskan. Pertama-tama, kita akan bedah untuk styling menu sebelum di hover.

.mega-menu, .mega-menu >ul {
position: relative;
background-color: #333;
height: 50px;
}
.mega-menu >ul >li {
display: inline-block;
padding:15.5px 0;
overflow: hidden;
}
.mega-menu >ul >li >a {
padding:17px;
color:#eee;
text-decoration: none;
}
.mega-menu >ul >li:hover {
background-color: #3399dd;
-webkit-transition:ease 0.3s;
}
.mega-menu .menu-detail {
height: 0;
visibility: hidden;
opacity: 0;
position: absolute;
}

Seperti yang anda lihat di atas, saya memberikan warna merah pada beberapa baris kode terakhir. Kode tersebut adalah untuk styling sub mega menu (dengan selector .menu-detail) sebelum di hover.

position:absolute; adalah posisi mutlak yang harus anda tambahkan pada sub menu. Sedangkan, visibility:hidden; dan opacity:0 ditambahkan agar sub menu bisa memiliki efek transisi pada saat di hover.

Agar saat menu disentuh (hover) anda bisa melihat efek transisi di mana sub mega menu dibuka seperti tirai, maka tinggi sub menu diberi nilai 0 (height:0). Selanjutnya, pada saat menu disentuh (hovered), tinggi sub mega menu tersebut harus diberi nilai fixed. Pada tutorial ini saya memberi nilai 300 piksel (height:300px), seperti yang bisa anda lihat pada kode selanjutnya di bawah ini.

.mega-menu >ul >li:hover >div.menu-detail {
opacity: 1;
height: 300px;
width:100%;
visibility: visible;
top:50px;
right:0;
left: 0;
z-index: 99;
background-color: #252525;
color:#fff;
-webkit-transition:height 1s;
-moz-transition:height 1s;
transition:height 1s;

border-top:3px solid #3399dd;
overflow: hidden;
}

Kode yang saya beri warna oren, adalah kode-kode kebalikan dari styling .menu-detail sebelum disentuh (hover). Fungsinya untuk menampilkan sub mega menu saat menu induk disentuh mouse.

Kode berwarna hijau ditambahkan untuk posisi sub mega menu. Jarak bagian atas sub menu diberi nilai 50 piksel (top:50px) karena tinggi container untuk menu induk 50 piksel juga (lihat kode css pertama pada baris 4). Sedangkan, kanan dan kirinya diberi nilai 0 piksel agar rata kanan dan kiri (full-width).

Kode berwarna biru adalah agar membuat sub mega menu yang tampil saat menu induk disentuh akan menumpuk di atas elemen lain, atau tidak terhalang oleh elemen yang ditumpukinya. Jika masih terhalang, perbesar nilainya menjadi 9999, atau lebih besar lagi.

Kode berwarna merah adalah kode efek transisi, dalam hal ini untuk browser mozilla (-moz-), google chrome jadul (-webkit-) dan browser lain yang support.

Selanjutnya, tinggal styling untuk isi sub mega menu-nya.

.menu-detail .section {
padding:20px;
}
@media (min-width: 768px){
.menu-detail.profile .section-1 {
width:40%;
float: left;
}
.menu-detail.profile .links {
width:20%;
float: left;
}
.menu-detail.profile .social-media {
width:40%;
float: left;
}
.menu-detail.categories .seo {
width:33.33%;
float: left;
}
.menu-detail.categories .copywrite {
width:33.33%;
float: left;
}
.menu-detail.categories .im {
width:33.33%;
float: left;
}}
.menu-detail .links ul li {
padding:10px 0;
display: block;
}
.menu-detail .links ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail .links ul li a:hover {
color:#2c73cc;
}.menu-detail .social-media ul li {
display: block;
margin-bottom: 5px;
}
.menu-detail .social-media ul li a{
color:#fff;
text-decoration: none;
display: block;
width: 100%;
padding:7px 10px;
}
.social-media li.facebook {
background-color: #48649f;
}
.social-media li.twitter {
background-color: #3399dd;
}
.social-media li.googleplus {
background-color: #cc3333;
}
.social-media li.linkedin {
background-color: #2c73cc;
}
.social-media li.dribbble {
background-color: #dd3355;
}
.menu-detail.categories .section h3 a{
color:#fff;
}
.menu-detail.categories .section ul li {
padding:10px 0;
display: block;
}
.menu-detail.categories .section ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail.categories .section ul li a:hover {
color:#2c73cc;
}

Saya kira tidak ada yang perlu dijelaskan untuk kode ini karena anda bisa memodifikasinya sesuka hati dan itu tidak akan berpengaruh pada work atau tidaknya tutorial ini.

Selesai.

Oh iya, sebelum anda pergi saya ingin bertanya :

Apakah penjelasan saya di atas bisa dimengerti ?

Maklum, ini pertama kalinya saya menjelaskan sebuah trik/tutorial serinci ini. Tolong dijawab di komentar yaah, disertai alasan dan sarannya kalau bisa. Demi kebaikan penjelasan pada posting selanjutnya. hehehe

Semoga bermanfaat.

~Muhammad Syakirurohman~

44 Comments

  1. Terima kasih sangat bermanfaat

  2. NICE *_*
    boleh tanya mas…mas kalo buat web pake apa ya :/ ?

  3. Menarik nih mas, jadi pengen belajar hehe 🙂

  4. keren mas menunya izin copas buat koleksi

  5. izin save page gan, semoga ilmunya agan bermanfaat :D.. share lagi efek css3nya dong 😉

  6. sangat bermanfaat sekali, izin bookmark..

  7. Mas linknya taru di mana trimakasi

  8. keren gan. pengen belajar tp ribet kayana. ninggalin jejak dulu lah. di tunggu tapak kaki nya d blog saya gan. sxan kasih saran modif template blog saya. (mewek)

  9. Ini email saya lamparkiz@gmail.com

  10. Piye mas

  11. mas bagaiman cara , memasukanya di css?

  12. gan. saya kan mau tarok isi di menu home. tapi koq marah kucar kacir jdi.
    tolong bantuanna gan.
    terimakasih

  13. Mas saya mau nanya untuk membuat drop down menu tetapi harus diklik dahulu menunya baru keluar sub-menunya gimana ya Mas? Maaf sedikit OoT, terima kasih

  14. Terima Kasih, Postingannya sangat membantu.
    Salam
    http://www.ayaxx.com

  15. maaf mas mau tanya masukinkode html sama css nya kalo di bloger di mana?
    soalnya pas saya masukin kodenya ke tata letak trus tambahkangadget menu drop downnya ga sesuai sama yang di atas.
    mohon balasan nya maklum masih newbie

  16. Good artikel, bisa jadi bahan latihan menghias tampilan blog biar lebih terlihat responsiv

  17. ane pake buat belajar bikin web nih
    izin juga buat utak atik ya gan
    ditunggu update tutorial nya

  18. menarik nih artikelnya,
    tadi saya coba tambahin beberapa menu disampingnya tapi kok jadi tidak sama ya antara satu menu dengan menu yang lain (jadi bergerak ke kiri kanan jika mouse dipindah dari satu menu kemenulainya) kenapa ya? mohon pencerahanya master..

  19. ada yang responsivenya gak mas? kalau di tampilan mobile menunya jadi kepotong.

  20. Assalamualaikum terimakasih atas ilmunya. Saya mrsa sngt terbantu..trus berbagi !!

  21. mantap mas… thanks banget…

  22. IZIN UNDUH CONTOHNYA MAS,,,THANKS

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *