Cara Sederhana Membuat Tombol Menu Dropdowns

Tombol adalah suatu alat yang dimana fungsinya apabila ditekan akan menjalankan perintah yang telah disetel atau diatur.
Menu adalah suatu alat yang dimana fungsinya untuk membagi kategori atau halaman tertentu yang telah disetel atau diatur.
Dropdowns adalah suatu alat yang dimana fungsinya untuk menampilkan sub menu kebawah.

Jadi jika kita simpulkan Tombol Menu Dropdowns adalah Suatu alat yang berada pada Menu dan terdapat fungsi menampilkan sub menu pada Tombol tersebut.

Lihat Juga: Membuat Fading Buttons Dengan Memanfaatkan Fungsi Hover Opacity

Result:Press

Yang perlu Anda lakukan untuk Membuat Tombol Menu Dropdowns sebagai berikut:

1. Login ke blogger.com.
2. Cari kode </head> pada Tema > Edit HTML.
3. Copas (copy-paste) kode di bawah ini sebelum kode </head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

4. Cari kode </style> pada Tema > Edit HTML.
5. Copas (copy-paste) kode di bawah ini sebelum kode </style>.

.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.btn:hover, .dropdown:hover .btn {
  background-color: #0b7dda;
}

6. Bila sudah memasang style button pada Tema > Edit HTML, sekarang simpan tema Anda.

Lihat juga: Cara Membuat Button on Image Yang Sangat Elegan

Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).

<button class="btn">Tombol</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid #0d8bf2">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Cobalah kreasikan sendiri di sini Tryit Editor

Artikel Pencarian Terkait:

• Cara Membuat Menu CSS Dropdown Sederhana
• Cara Membuat Menu Dropdown Sederhana
• Membuat Menu Dropdown Sederhana Dengan CSS
• Cara Membuat Menu Dropdown CSS Mudah
• Cara Bikin Dropdown Menu Sederhana - HTML CSS