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.
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.
Daftar Isi Postingan
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
position:relative;
}
.mega-menu >ul >li {
position:static; /* tidak usah ditulis juga bisa */
}
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.
<ul>Isi dari Sub menu biasa</ul>
</li>
<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
<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.
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.
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.
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~
Cara Membuat Mega Dropdown Menu dengan CSS - BloggerIndo
[…] atau biasa juga disebut mega menu adalah jenis dropdown menu yang menampilkan dropdown yang besar. Dropdown besar tersebut biasanya berisi […]
Klinik Hipnoterapi
Terima kasih sangat bermanfaat
Syakir Rahman
Sama-sama
Agus
NICE *_*
boleh tanya mas…mas kalo buat web pake apa ya :/ ?
Syakir Rahman
Buat web? coba pelajari ini dulu mas 😀 http://www.syakirurohman.net/2014/03/belajar-webite-apa-itu-xampp-cara-menggunakannya.html
Prisma Try Laksana
Menarik nih mas, jadi pengen belajar hehe 🙂
Syakir Rahman
Tinggal di download aja mas itu, terus pelajari deh heheh 😀
widodo
keren mas menunya izin copas buat koleksi
Syakir Rahman
Yap.. Silahkan Mas 😀
aantamim.pun.bz
izin save page gan, semoga ilmunya agan bermanfaat :D.. share lagi efek css3nya dong 😉
Syakir Rahman
Sip, nanti di share tutorial yang lainnya 😀
hargatronik
sangat bermanfaat sekali, izin bookmark..
Syakir Rahman
Silahkan
sitrisno
Mas linknya taru di mana trimakasi
Syakir Rahman
Link yang mananya ya mas ?
knight_avatar
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)
Syakir Rahman
Oke gan
mas triez
Mas ada ga tempalte dengan 2 sidebar di bawa pots tp ga pake footer… Kalau ada mau dong trimakasi
Syakir Rahman
ngga ada mas, jarang template kaya begitu
mas triez
Mas pengen dong di bikinin tamplet blog seperti ini http://www.lele-lela.com
Syakir Rahman
Itu ngga cocok buat blogger, ngga umum.. saya hanya membuat template jika itu bisa digunakan banyak orang.. bukan orang-orang tertentu saja heheh.. kalo mau, paling masuknya ke jasa custom blogger template
mas triez
Berpa jasanya
mas triez
Gmn maz
Syakir Rahman
Mas triez, hubungi saya via facebook saja yaah : http://www.facebook.com/syakirurohman .. omonginnya disana biar lebih enak
triez
http://lele-la.tk/
mas triez
Ini email saya lamparkiz@gmail.com
mas triez
Piye mas
kadek
mas bagaiman cara , memasukanya di css?
Syakir Rahman
download aja itu projectnya, terus teliti filenya, nanti juga tau
ryan
gan. saya kan mau tarok isi di menu home. tapi koq marah kucar kacir jdi.
tolong bantuanna gan.
terimakasih
Syakir Rahman
Mungkin cssnya belum di masukin semua ?
nafas
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
Syakir Rahman
Bisa sih, kaya menu droopdownya bootstrap.. tapi yaa pakai javascript..
Ary
Terima Kasih, Postingannya sangat membantu.
Salam
http://www.ayaxx.com
muhammad abidzar
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
Syakir Rahman
untuk cssnya yaa di bagian css di template, sementara htmlnya di widget juga bisa saja, tapi lebih recommended di template htmlnya
Ali
Good artikel, bisa jadi bahan latihan menghias tampilan blog biar lebih terlihat responsiv
bagoes
ane pake buat belajar bikin web nih
izin juga buat utak atik ya gan
ditunggu update tutorial nya
Ashif
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..
Syakir Rahman
Maksudnya gimana yaah ? bisa disertakan link screenshotnya ?
Kang Ghani
ada yang responsivenya gak mas? kalau di tampilan mobile menunya jadi kepotong.
wahyudi
Assalamualaikum terimakasih atas ilmunya. Saya mrsa sngt terbantu..trus berbagi !!
ngawidian
mantap mas… thanks banget…
SUPRIYADI
IZIN UNDUH CONTOHNYA MAS,,,THANKS
mahesa
mas syakir
apa boleh saya ikut training bikin web pro >?
syakirurahman
Saya tidak buka training bikin web mas
Tiandi
maturunuwun mas Syakir, ijin download ya.,
semoga dimudahkan dlm rizki dan diberikan umur panjang bwt tetap berbagi..
sofyan
@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;
Media screen untuk tampilan mobilenya gak tersedia, soalnya sulit dibaca pada layar kecil, boleh ijin modifikasi gak ya, soalnya saya sudah buat model ini sebelumnya untuk template template modern untuk blogspot
inti dari 3 baris pada mega dropdown adalah pada ukuran lebar prosentasi 33.33%
Salam kenal, dan selamat hari raya idulfitri..
Syakir Rahman
Silahkan modifikasi sesuai kebutuhannya