Cara Membuat Dropdown Menu Menggunakan Bulma

Teman-teman pada artikel kali ini saya akan mencoba membahas Cara Membuat Dropdown Menu Menggunakan Bulma. Class dropdown adalah class yang disediakan oleh bulma untuk membuat suatu dropdown yang dimana kita bisa menggunakannya untuk menaruh konten pilihan atau bisa juga link ke page lainnya.

Untuk lebih lengkapnya mari kita langsung parkatekan Cara Membuat Dropdown Menu Menggunakan Bulma:

1. Pertama

anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

2. Kedua

anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Hero Bulma</title>
  <!--link ke css bulma-->
  <link rel="stylesheet" type="text/css" href="bulma-0.5.0/css/bulma.css">
  <link rel="stylesheet" type="text/css" href="bulma-0.5.0/css/bulma.css.map">
  <link rel="stylesheet" type="text/css" href="bulma-0.5.0/docs/css/bulma-docs.css">
  <!--link ke font-awesome-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>DUMET School</span>
      <span class="icon is-small">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        WEB Master
      </a>
      <a class="dropdown-item">
        WEB Design
      </a>
      <a href="#" class="dropdown-item">
        WEB Ptogramming
      </a>
      <a href="#" class="dropdown-item">
        Graphic Design
      </a>
    </div>
  </div>
</div>

<script src="bulma-0.5.0/docs/_javascript/bulma.js"></script>
<script src="bulma-0.5.0/docs/_javascript/main.js"></script>
<script src="bulma-0.5.0/docs/_javascript/index.js"></script>

</body>
</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Lalu klik tombolnya maka akan muncul menu dropdownnya

Class dropdown adalah class yang memudahkan kita membuat dropdown menu. Dengan bulma kita dapat dengan mudah membuat dropdown menu tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat dropdown menu menggunakan class dropdown pada bulma.

Sekian pembahasan kali ini tentang Cara Membuat Dropdown Menu Menggunakan Bulma. Semoga bermanfaat.

Cara Membuat Dropdown Menu Menggunakan Bulma

Kategori