Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Tutorial CSS

Cara Membuat Mega Dropdown Menu dengan CSS

Syakir Rahman
Last updated on Agustus 8th, 2018
49 Comments
Mega Dropdown Menu

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

DEMODOWNLOAD

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~

49 thoughts on “Cara Membuat Mega Dropdown Menu dengan CSS”

Tinggalkan Balasan

© Copyright Devaradise. All rights reserved. Theme: Devaradise 2020 by Syakir Rahman.