21 June, 2017

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?

4 Komentar

Ini baru keren, besok-besok kalo butuh pasti bakal ke pake banget.Makasih ya Igniel udah share hehe

mampir juga ya! diansaurs.blogspot.com

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

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

Iya asli Sukabumi.
Akang dari Sukabumi juga?
Diikuti aja tutorial dasarnya di Google kang. Kalo tutorial Blogspot pasti banyak :)

Komen pakai akun asli tidak akan menurunkan harga diri kok. Buat apa pakai pakai kloningan :)