Cara Membuat Dropdown Menu

07/11/2017    Risman Hakim    76     Website

Dalam dunia website kita tahu bahwa banyak sekali layout ataupun desain yang sangat bervariasi, salah satu contoh desain didalam website adalah menu, menu pada suatu website sangatlah banyak jenisnya, mulai dari desain menu standar, sidebar menu dan dropdown menu. Begitupun dalam hal pembuatannya kita bisa kombinasikan dengan menggunakan HTML 5 dan CSS 3 ataupun dengan penambahan kode jQuery sebagai animasinya. Nah, berbicara tentang desain menu, berikut ini akan saya share bagaimana cara membuat dropdown menu. Seperti yang kita ketahui dropdown menu merupakan desain menu yang mempunyai turunan atau multiple menu, biasanya ciri khas dari menu ini adalah ketika kita arahkan kursor terhadap salah satu menu yang tersedia akan menampilkan menu turunannya lagi kebawah.
Pada kasus ini saya akan membuat dropdown menu sederhana dengan HTML 5 dan CSS 3, buat kalian yang sedang belajar membuat menu alangkah baiknya untuk menyimak dan mengikuti langkah-langkahnya berikut ini.

Kode HTML 5 : Cara Membuat Dropdown Menu

Baik, langkah pertama untuk membuat dropdown menu adalah kita wajib membuat struktur menu terlebih dahulu dengan kode HTML 5 berikut ini.

<body>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Category</a>
                <ul class="sub1">
                    <li><a href="">Category 1</a></li>
                    <li><a href="">Category 2</a></li>
                    <li><a href="">Category 3</a></li>
                    <li><a href="">Category 4</a></li>
                </ul>
            </li>
            <li><a href="">Blog</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
    </nav>
</body>

Struktur HTML 5 dalam membuat dropdown menu harus diperhatikan dengan baik agar menu yang ditampilkan berjalan dengan baik, pastikan kalian menulis kode HTML 5 sama seperti kode yang saya buat diatas, kalian bisa menyalin untuk memastikan struktur kodenya sama.

Kode CSS 3 : Cara Membuat Dropdown Menu

Setelah membuat struktur HTML 5 seperti diatas, langkah selanjutnya adalah kita akan mendesain tampilan dan membuat dropdown menu dengan kode CSS 3 berikut ini.

* {margin:0; padding:0}

body {     
    background-color:#2c3e50;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#fff;
}

nav {
    height:50px;
    background-color:#d35400;
    line-height:50px;
    position:relative;
    top:80px;
    width:750px;
    margin:auto;
}

nav ul {
    list-style:none;
}
nav ul li a {
    float:left;
    width:150px;
    color:#fff;
    text-decoration:none;
    display:block;
    text-align:center;
}
nav ul li a:hover {
    background-color:#e67e22;
    display:block;
}
/*css untuk menu hover dropdown*/
nav ul li:hover .sub1 {display:block}
nav ul .sub1 {
    display:none;
    position:absolute;
    left:150px;
    top:50px;
    background-color:#d35400;
}
.sub1 a:hover { color:#fff }

Pada kode CSS 3 diatas kita bisa lihat pada bagian kode CSS 3 berikut.

/*css untuk menu hover dropdown*/
nav ul li:hover .sub1 {display:block}
nav ul .sub1 {
    display:none;
    position:absolute;
    left:150px;
    top:50px;
    background-color:#d35400;
}
.sub1 a:hover { color:#fff}

Kode diatas adalah proses dimana dropdown menu terjadi, dimana kita telah set display block untuk menampilkan menu turunannya atau dropdown menu.

Hasil akhir : Cara Membuat Dropdown Menu

jika telah semua kode HTML 5 dan CSS 3 diketikan dengan benar, simpan filenya kemudian bisa kalian lihat pada browser masing-masing dan lihat hasilnya. Maka akan terlihat desain dropdown menu seperti pada gambar dibawah ini.

Cara Membuat Dropdown Menu

Baiklah, cukup sekian tutorial sederhana mengenai bagaimana cara membuat dropdown menu, semoga bermanfaat dan selamat mencoba.

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More