-->
›

Cara Membuat Menu Navigasi Dropdown di Blog

By Wednesday, August 2, 2017 5 Comments
Cara Membuat Menu Navigasi Dropdown di Blog - Hallo sobat semuanya 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.

Cara Membuat Menu Navigasi Dropdown

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?


Okey sobat sampai disini dulu itulah Cara Membuat Menu Navigasi Dropdown di Blog , Semoga Bermanfaat Oke, Jika ada yang kurang jelas mohon ditanyakan di komentar ya Sobat :) tunggu di artikel berikutnya ya Sobat SalamSukses.

5 Responses to "Cara Membuat Menu Navigasi Dropdown di Blog"

1. Gunakan komentar yang relevan
2. Kata-kata kita adalah cermin kerpribadian diri kita
3. Sangat tidak disarankan untuk mengirim link aktif di komentar.

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel