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

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • audi sw
    14/1/22
    Profil: https://www.blogger.com/profile/01231570565589206063
    kalau mau buat dropdown nya 3 gimana
  • technologydevelopment.info
    20/11/21
    Profil: https://www.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!
    • MasakanBoenda (Dini)
      21/11/21
      Profil: https://www.blogger.com/profile/03854716840156980498
      Iya itu mbak, saya juga butuh seperti itu.. Buat cover menu yg banyak.. Yg gak mungkin tampil semua
  • Ozik Jarwo
    8/8/17
    Profil: https://www.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/7/17
    Profil: https://www.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/7/17
      Profil: https://www.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/7/17
    Profil: https://www.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/6/17
    Profil: https://www.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