Beranda / BLOGGER

Teknik Dasar Membuat Menu Navigasi Dropdown Dengan CSS

Posting Komentar

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?






















Tidak ada komentar untuk "Teknik Dasar Membuat Menu Navigasi Dropdown Dengan CSS"

Posting Komentar