Membuat Mega Menu dengan CSS

Hay guys! Dalam tutorial kali ini kita akan membahas tentang cara membuat mega menu dengan CSS murni. Mega menu biasanya digunakan pada website perusahaan/e-commerce, tapi menjadi lebih populer karena mega menu merupakan cara yang bagus untuk menampilkan/ mengatur konten. Mari kita mulai dengan markup HTML…

Markup HTML

Buatlah unordered list dengan class “nav” (<ul>), kemudian untuk setiap item menu kita akan menambahkan list item (<li>) dengan tag anchor (<a>) didalamnya. Jika Anda ingin item menu menjadi mega menu hanya menambahkan <div> dibagian dalam <li>.

<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Reset dan Style Konten Dasar

Sebagai style default yang berbeda satu sama lain, kita akan menambahkan beberapa style reset untuk menjaga konsistensi antara mereka dan menghindari masalah dikemudian hari.

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.nav a { text-decoration: none; }
 
.nav li { list-style: none; }

Kemudian kita akan menambahkan beberapa style dasar untuk container menu dan float list item ke kiri untuk menunjukan pada baris yang sama.

.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
 
.nav > li {
    display: block;
    float: left;
}

Styling Link Menu

Kita akan mulai dengan style umum seperti padding, height, posision dll. Kemudian kita akan mengatur style typography seperti font size, color, text shadow, dll. Kita juga akan mengatur warna background dan left border dan right border. Untuk tetap menjaga style transisi yang halus kita akan menambahkan transition CSS. Perhatikan bahwa kita mengatur properti yang sama lima kali, ini diperlukan karena properti ini tidak sepenuhnya diterapkan disemua browser, dan sebagai properti ini pada pengujian, semua browser yang berbeda menggunakan awalan roperti before. Jadi jika Anda ingin support pada beberapa browser saat ini dan yang lebih lama menggunakan prefiks ini.

.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

Dalam kondisi hover kita hanya akan mengubah warna background. Untuk menyelesaikan styling link menu kita akan menambahkan bulatan sudut ke link pertama menggunakan : first-chile pseudo selektor dan menghapus left border.

.nav > li:hover > a { background: #4b4441; }
 
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}

Styling Form Search

Kita akan mulai dengan form container : atur position pada relatif, tambahkan left border seperti pada link menu dan atur lebar untuk pewarisan. Dengan menetapkan lebar untuk pewarisan akan menggunakan lebar dari form child inputan.

.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}

Kemudian kita akan style input teks : float ke kiri, atur ketinggian, padding, dll. Untuk menyembunyikan input teks kita akan mengatur lebar untuk 1px dan menghapus padding kanan dan kiri. Pada kondisi :hover dan :focus kita akan memperbarui lebar dan nilai padding.

.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
 
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
 
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

Style untuk mengirimkan inputan mirip dengan input teks, kita hanya akan menetapkan lebar dan tinggi, menambahkan background icon dan sudut bulat menggunakan properti border-radius. Kita juga telah mengatur transisi untuk kedua input agar memiliki beberapa animasi yang halus dan bagus.

.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
 
    background: #372f2b url(../img/search-icon.png) no-repeat center center;
 
    border-radius: 0 3px 3px 0;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

img1

Mega dropdown

Mega dropdown merupakan salah satu bagian yang paling penting. Kita akan mulai dengan menetapkan posisi ke absolut, lebar 100%, display block dan value atas dan kiri. Kemudian kita akan menyembunyikan dropdown menggunakan properti opacity, visibilitas dan overflow. Setelah itu kita akan menambahkan warna background, sudut bulat dan beberapa transisi. Alasan kita akan menggunakan tiga properti ini untuk menyembunyikan dropdown dan tidak menggunakan display:none karena jika kita menggunakannya, transisi tidak akan berfungsi.

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
 
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
 
    background: #ffffff;
    border-radius: 0 0 3px 3px;
 
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

Untuk menampilkan dropdown pada hover kita perlu mengatur opacity ke 1 dan properti visibilitas overflow pada visible.

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

Beberapa Konten

Seperti menu yang mendukung setiap konten dalam bahasa apapun (html,php,js,dll). Untuk contoh ini kita akan membuat layout kolom dasar dengan beberapa list link didalamnya. Tambahkan kode html berikut didalam mega dropdown (<div>).

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
 
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3 class="orange">Related Categories</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Diapers</a></li>
    </ul>
 
    <h3 class="orange">Brands</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
    </ul>
</div>

Kemudian kita akan menambahkan beberapa style dasar untuk konten ini. Kita akan mengatur lebar setiap kolom menjadi 20%, padding 2,5% dan float kolom ke kiri. Untuk menyelesaikannya kita akan menambahkan beberapa style typography untuk judul dan link.

.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
 
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
 
.nav .nav-column h3.orange { color: #ff722b; }
 
.nav .nav-column li a {
    display: block;
    line-height: 26px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666; }

DEMO

preview4

 

Comments

comments