Teknik Dasar Membuat Menu Navigasi Dropdown Dengan CSS

Cara Membuat Menu Navigasi Dengan CSS - igniel.com

Saya selalu pengen bikin tutorial tentang edit template, mempercantik blog, dan hal-hal lain yang berhubungan dengan tampilan antar muka / user interface. Tapi selalu berujung males, karena struktur blog setiap orang pasti berbeda. Belum tentu yang saya tulis akan berhasil 100% di template masing-masing.

Tapi kali ini saya mau coba bikin. Tutorialnya banyak beredar diluaran sih, tapi semoga masih ada yang membutuhkan. Ini dia cara membuat menu navigasi dropdown menggunakan CSS murni.

Terima kasih buat yang kirim email dan request soal tutorial membuat menu navigasi responsif di blog. Kamu bikin saya terpacu membuat tutorial ini.

Cara Membuat Menu Dropdown Dengan CSS Tanpa Javascript - igniel.com

Cara Membuat Menu Navigasi Dropdown CSS Tanpa Javascript

Poin pentingnya adalah, menu dropdown akan muncul ketika kita menyorot menu utamanya. Dan ini bisa dilakukan hanya menggunakan CSS, alias tanpa Javascript. Udah pasti bagus dong, karena penggunaan Javascript yang terlalu banyak akan membuat kecepatan loading blog berkurang.

1. Kode CSS
Tambahkan barisan kode ini "sebelum" </style>
/* Style tombol utama */
.dropbtn {
    background-color: #008c5f;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Warna background dari tombol utama ketika isi konten dropdown ditampilkan */
.dropdown:hover .dropbtn {
    background-color: #006947;
}

/* Isi dari <div> - Diperlukan untuk memposisikan isi konten dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Isi konten dropdown (disembunyikan) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2f303f;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Link di dalam menu dropdown */
.dropdown-content a {
    color:#fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Warna link di dalam dropdown ketika disorot */
.dropdown-content a:hover {
 background-color:#008c5f;
 color: #fff !important;
}

/* Tampilkan isi konten dopdown ketika disorot */
.dropdown:hover .dropdown-content {
    display: block;
}

2. Kode HTML
HTML ini adalah kode untuk membuat menu navigasi dropdown basic (dasar). Tulis dimana saja, tergantung kamu mau menampilkannya dimana. Yang jelas harus disimpan "setelah" <body>
<div class="dropdown">
  <button class="dropbtn">Menu Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Demo / Preview

Sorot atau arahkan mouse ke tombol berikut. Maka nanti akan muncul menu dropdownnya. Bagaimana membuat dropdown bertingkat? Nah, itu ulik sendiri lagi ya Emoticon nyengir - igniel.com



That's it. Gampang kan? Hanya saja, ini teknik dasarnya. Pada akhinya harus kamu sesuaikan sendiri dengan template yang dipakai. Yang penting kamu sudah tahu teknik dasar untuk membuat menu dropdown dengan CSS ini kan?

Artikel Terkait

8 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • audi sw
    14 Januari, 2022
    Profil: https://draft.blogger.com/profile/01231570565589206063
    kalau mau buat dropdown nya 3 gimana
  • technologydevelopment.info
    20 November, 2021
    Profil: https://draft.blogger.com/profile/11405170450622362643
    terimakasih informasinya sangat berguna mbak,
    mbak request dong mbak buat menu yang bisa di scrool kesamping terus menu itu juga drop down.. saya coba tapi gak bisa terus!
    • Admin@technologydevelopment.info
      21 November, 2021
      Profil: https://draft.blogger.com/profile/03854716840156980498
      Iya itu mbak, saya juga butuh seperti itu.. Buat cover menu yg banyak.. Yg gak mungkin tampil semua
  • Ozik Jarwo
    08 Agustus, 2017
    Profil: https://draft.blogger.com/profile/17745819766519032109
    Terima kasih banyak mba, izin bookmark. Saya suka bener soalnya baca-baca referensi tentang tutorial/penjelasan HTML, CSS, JS, PHP, dan kawan-kawannya. Salam bang Jarwo hehe.
  • Megaroid.com
    23 Juli, 2017
    Profil: https://draft.blogger.com/profile/15011347593751344275
    Wih hebat nih kamu...kamu asli orang sukabumi yah...
    Saya Masih baru Dalam blog
    Giman caranya buat blog dan bisa mengerti coding. .
    Maaf saya cuma nanya Terimakasih
    • Igniel
      23 Juli, 2017
      Profil: https://draft.blogger.com/profile/09199170379661896200
      Iya asli Sukabumi.
      Akang dari Sukabumi juga?
      Diikuti aja tutorial dasarnya di Google kang. Kalo tutorial Blogspot pasti banyak :)
  • Unknown
    13 Juli, 2017
    Profil: https://draft.blogger.com/profile/12795197063470635414
    Tutornya mantep kal, Templatnya jga keren kak, sesuai dengan ilmu yg di share, ada buktinya hehe

    Komen balik kak di
    Www dot yukgas dot id
  • Unknown
    22 Juni, 2017
    Profil: https://draft.blogger.com/profile/18374131999741666301
    Ini baru keren, besok-besok kalo butuh pasti bakal ke pake banget.Makasih ya Igniel udah share hehe

    mampir juga ya! diansaurs.blogspot.com