Vertical Mega Menu adalah salah satu UI website yang saat ini sering kali digunakan, terutama pada website-website yang kaya konten dan memiliki sitemap yang cukup kompleks. Vertical Mega Menu berbentuk sekumpulan menu yang disusun secara vertical, yang ketika salah satunya di sentuh oleh cursor (hover) akan menampilkan isi dari menu tersebut yang dapat berupa kumpulan link, paragraph dan bahkan gambar.
Untuk lebih jelasnya, anda dapat melihat contoh vertical mega menu pada gambar di bawah ini.
Konsep
Sebelumnya, di blog ini saya pernah membahas 2 tutorial menu yaitu Multilevel Dropdown Menu dan Mega Dropdown Menu. Pada dasarnya, konsep vertical mega menu ini sama dengan mega dropdown menu, hanya saja orientasinya dibuat berbeda.
Pada mega dropdown menu, daftar menunya berbentuk horizontal dan sub-content dari masing-masing menu-nya berada di bawah. Sedangkan pada vertical mega menu, daftar menunya berbentuk vertikal dan sub-content masing-masing menunya berada di sebelah kanan.
Kelebihan vertical mega menu dibandingkan dengan mega menu biasa adalah dapat menampung lebih banyak menu karena orientasinya vertikal. Berapapun menu yang ditambahkan akan terlihat bagus.
Markup HTML
Markup HTML pada vertical mega menu sama dengan mega menu biasa. Dalam setiap tag <li> menu utama, terdapat nama menu dalam tag <a> dan tag <div> untuk isi sub menu tersebut.
<a href=”#”>Multivitamin & Suplemen</a>
<div class=”mega-submenu”>
isi dari sub menu
</div>
</li>
CSS
Vertical mega menu memiliki 2 kondisi, yaitu pada saat menu tidak di tunjuk/sentuh kursor (hover), dan saat di tunjuk/sentuh kursor. Masing-masing kondisi tersebut membutuhkan kode css yang berbeda agar sesuai dengan yang kita harapkan.
Berikut adalah kode CSS pada kondisi sebelum menu di-hover :
.mega-menu {
float: left;
width: 30%;
position: relative;
margin:30px auto;
}
.mega-menu >ul {
position: relative;
background-color: #e9e9e9;
display: block;
position: relative;
}
.mega-menu >ul >li {
display: block;
width: 100%;
height:55px;
}
.mega-menu >ul >li >a {
padding:17px;
color:#333;
text-decoration: none;
width:100%;
display: block;
overflow: hidden;
position: relative;
border-bottom:1px solid #ccc;
}
.mega-menu >ul >li:last-child >a {
border-bottom: 0;
}
.mega-menu >ul >li >a:before, .mega-menu >ul >li >a:after {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all 0.5s;
}
.mega-menu >ul >li >a:before {
position: absolute;
right:0;
top:0;
bottom:0;
width:60px;
background-color: transparent;
content: “”;
}
.mega-menu >ul >li >a:after {
position: absolute;
width: 0;
height: 0;
border:4px transparent solid;
border-left:7px #333 solid;
right:23px;
top:25px;
content: “”;
}
.mega-menu >ul >li .mega-submenu {
width:0;
visibility: hidden;
position: absolute;
-webkit-transition:width 0.3s;
-moz-transition:width 0.3s;
transition:width 0.3s;
}
Kode yang saya highlight dengan warna merah adalah kode untuk menyembunyikan sub mega menu agar tidak muncul saat menu tidak di hover. Selebihnya adalah styling biasa untuk layout, warna, font dan sebagainya.
Sedangkan, untuk membuat sub mega menu tampil saat kursor menunjuk salah satu menu, maka diperlukan kode css berikut ini :
.mega-menu >ul >li:hover a:before {
background-color:#1E9ECF;
}
.mega-menu >ul >li:hover a:after {
border-left-color:#fff;
}
.mega-menu >ul >li:hover .mega-submenu {
top:0;
right:0;
left: 100%;
z-index: 99;
padding:20px 30px;
background-color: #fff;
color:#fff;
border:3px solid #1E9ECF;
overflow: hidden;
visibility: visible;
width:800px;
height: 100%;
}
Kode yang saya highlight warna merah berfungsi untuk menampilkan sub mega menu dengan lebar 800 pixel.
Untuk kode yang lebih lengkap, anda bisa lihat pada tab dibawah ini.
See the Pen Vertical Mega Menu with Pure CSS by Syakir Rahman (@syakirurahman) on CodePen.
Anda juga bisa bereksperimen dengan merubah-ubah kode secara langsung pada pens tersebut. Jika ingin lebih bebas, anda juga bisa mendownload pens tersebut dengan link dibawah ini :
Itulah cara membuat vertical mega menu dengan pure css. Bagaimana menurut anda ? Jangan lupa di share jika menurut anda bermanfaat 🙂
Terima kasih.
~Muhammad Syakirurohman~