CSS

Cara Membuat Menu CSS Dropdown Sederhana

Cara Membuat Menu CSS Dropdown Sederhana

Pengenalan

User Experience (UX/pengalaman pengguna) dan kecepatan akses (load time) sebuah website adalah hal yang sangat penting. Itu sebabnya mengapa Anda sebaiknya tidak membebani website Anda dengan aksesoris tambahan seperti JavaScript atau gambar-gambar dengan ukuran yang besar. Namun, bagaimana jika Anda ingin memiliki menu CSS dropdown yang sederhana? Kabar baiknya, Anda tidak membutuhkan tambahan JavaScript apapun untuk membuatnya, cukup dengan CSS saja. Dalam tutorial ini Anda akan mempelajari bagaimana cara membuat menu CSS dropdown sederhana dengan mudah.

Yang Anda butuhkan

Sebelum memulai panduan ini, yang Anda butuhkan adalah:

  • Akses ke control panel hosting Anda

Langkah 1 – Membuat file HTML

Pertama, Anda harus membuat file HTML baru (kosong) terlebih dahulu. Dalam tutorial ini kita akan membuat sebuah file baru yang bernama menu.html. Kita akan menggunakan File Manager untuk membuatnya. Namun, hasil yang sama juga bisa Anda dapatkan dengan menggunakan aplikasi FTP client. Buat file menu.html di komputer Anda dan upload ke akun hosting Anda menggunakan aplikasi FTP.
createmenuh

Langkah 2 – Menambahkan kode menu HTML

Menu yang akan kita buat terdiri dari 1 elemen induk bernama Main Menu dan 5 sub-elemen. Dengan mengganti URL di dalam atribut href, Anda bisa menghubugkan setiap sub-menu/Child Menu ke halaman-halaman yang berbeda di website Anda. Anda mungkin akan melihat bahwa setiap elemen memiliki class yang berbeda – dropdown, mainmenubtn dan dropdown-child. Class dibutuhkan untuk menerapkan rule CSS yang berbeda.

 

<div class="dropdown">
  <button class="mainmenubtn">Main menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
    <a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
    <a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
    <a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
    <a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
  </div>
</div>

Menu HTML akan terlihat seperti ini bila tanpa rule CSS:
plainmenu

Seperti yang Anda lihat, menu HTML yang polos belum dioptimasi dan tampilannya pun masih tidak menarik. Namun, kita akan segera membuat rule CSS dan mengganti tampilannya di langkah berikutnya.

Langkah 3 – Membuat CSS dan Efek Dropdown

Kita akan memberikan style untuk kode HTML dengan menggunakan rule CSS berikut ini:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
 
.mainmenubtn:hover {
    background-color: red;
    }
 
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Seperti yang bisa Anda lihat, class .dropdown-child memiliki rule CSS display:none. Namun, begitu pengunjung mengarahkan kursor (hover) ke (.dropdown:hover) ke induk menu, rule CSS akan langsung berganti menjadi display:block. Ini akan memberikan efek dropdown di menu kita.

Berikut ini adalah tampilan akhir dari file menu.html:

 

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Main menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
    <a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
    <a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
    <a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
    <a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
  </div>
</div>
</body>
</html>

Di contoh ini kita akan menggunakan internal stylesheet, artinya style CSS akan kita letakkan di file HTML yang sama. Anda juga bisa mencoba beberapa cara lain untuk mengubungkan file CSS ke HTML.

Setelah Anda selesai, hasilnya akan terlihat seperti ini:
css dropdown menu

Jangan ragu untuk mencoba berbagai variasi CSS. Anda bisa mengganti warna, ukuran, dll. Sesuaikan semuanya dengan kebutuhan Anda.

Kesimpulan

Setelah menyelesaikan tutorial ini Anda kini telah mempelajari bagaimana cara membuat menu dropdown sederhana hanya dengan menggunakan CSS. Kode yang disediakan dalam tutorial ini sangat ringan dan tidak akan memperberat website Anda sedikitpun.

4 Comments

Click here to post a comment

  • Mau nanya nih bang, sya udah coba nih, tpi drop downnya mengganggu tampilan web apabila diarahlan ke menu drop downnya,.
    Nah Supaya gao merubah tampilan webnya gmana bang y ?

    • Mohon maaf, Pak Imam, belum ada tutorial seperti yang Bapak inginkan. Namun, menjadi pertimbangan kami untuk di kemudian hari menulis tutorial dengan topik terkait. Link lain yang mungkin bisa menjadi referensi https://www.hostinger.co.id/tutorial/perbedaan-inline-css-external-css-dan-internal-css/
      Terima kasih 🙂

  • sangat membantu dan berguna sekali pada tutorial di atas gan. Menambah wawasan saya untuk melakukan bloging dan memodifikasi menu di template blog saya. Berkunjung balik gan, salam kenal ya.
    Wassalam !.

  • Makasih gan, artikelnya sangat membantu. Kalau boleh kasih saran, mungkin bisa dibuatkan video tutorialnya juga biar lebih jelas..

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln