cara membuat menu Dropdown pada web responsif menggunakan Bootstrap

Menu Dropdown adalah menu yang berisi submenu dan submenu akan muncul jika tombol menu ditekan. Dan jika menu tersebut dibuat pada web responsif maka tampilan menu akan menyesuaikan dengan ukuran layar device yang digunakan untuk membuka halaman web. Dengan membuat menu pada web responsif memungkinkan pengunjung web yang membuka halaman web menggunakan smartphone akan mendapat tampilan desain web yang baik dan rapih, sehingga memudahkan pengunjung menjelajahi halaman sebuah web responsif.

Lalu bagaimana cara membuat menu Dropdown pada web responsif menggunakan Bootstrap? Kamu tinggal memanggil class untuk menu Dropdown yang disediakan oleh Bootstrap. Berikut adalah uraian bagaimana cara membuat menu Dropdown pada web responsif menggunakan Bootstrap :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tekan menu di bawah</h2>                                        
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Jika kamu buka pada halaman web akan menjadi seperti berikut:

Lalu ketika kamu tekan tombol menu tersebut maka submenu akan tampil seperti berikut:

Perhatikan penjelasan berikut :

Class .dropdown menunjukkan menu dropdown.

Untuk membuka menu dropdown, gunakan tombol atau tautan dengan class .dropdown-toggle dan atribut data-toggle = "dropdown".

class .caret membuat ikon tanda panah , yang menunjukkan bahwa tombolnya adalah dropdown.

Tambahkan class .dropdown-menu ke elemen <ul> untuk benar-benar membangun menu dropdown.

Point-point di atas adalah catatan yang harus kamu implementasikan pada menu dropdown menggunakan Bootstrap. Dengan dasar tersebut kamu sudah bisa membuat menu Dropdown pada web responsif menggunakan Bootstrap. Tapi masih ada beberapa jenis menu Dropdown menggunakan class yang disediakan Bootstrap bisa dipakai untuk membuat berbagai variasi menu yang mungkin kamu butuhkan. Berikut adalah beberapa jenis menu Dropdown menggunakan class yang disediakan Bootstrap.

1. Dropdown Divider

Class .divider digunakan untuk memisahkan tautan di dalam menu dropdown dengan batas horizontal tipis:

Berikut adalah uraiannya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdown Divider</h2>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Perhatikan pada tag <li class="divider"></li>. Di sini class divider digunakan untuk membuat menu Dropdown Divider.

2. Dropdown Header

Class .dropdown-header digunakan untuk menambahkan header di dalam menu dropdown:

Berikut adalah uraiannya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdown Header</h2>
  <p>Kelas .dropdown-header digunakan untuk menambahkan header di dalam menu dropdown:</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Dropdown header 1</li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Dropdown header 2</li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Perhatikan pada tag <li class="dropdown-header">Dropdown header 1</li>. Di sini class dropdown-header digunakan untuk membuat menu Dropdown header .

3. Disable dan Active items

Class .active (menambahkan warna latar belakang biru).

Untuk menonaktifkan item di menu dropdown, gunakan class .disabled (warna teks menjadi abu-abu terang dan ikon "no-parking-sign" di hover atau saat panah kursor menunjuknya):

contoh menu Disable dan Active items Bootstrap

Berikut adalah uraiannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns Disable dan Active items</h2>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Normal</a></li>
      <li class="disabled"><a href="#">Disabled</a></li>
      <li class="active"><a href="#">Active</a></li>
      <li><a href="#">Normal</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Perhatikan pada tag
<li class="disabled"><a href="#">CSS</a></li> <li class="active"><a href="#">HTML</a></li>
Di sini class disabled dan class active digunakan untuk membuat menu Disable dan Active items .

4. Dropdown Position

Untuk posisi di kanan dropdown, tambahkan class .dropdown-menu-right ke elemen dan .dropdown-menu:

Berikut adalah uraiannya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdown Position</h2>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Perhatikan pada tag <ul class="dropdown-menu dropdown-menu-right">. Di sini clas .dropdown-menu-right dan .dropdown-menu digunakan untuk membuat menu Dropdown Position.

5. Dropup

Jika kamu ingin menu dropdown meluas ke atas, bukan ke bawah, ubah elemen <div> dengan class = "dropdown" menjadi "dropup":

Berikut adalah uraiannya:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropup</h2>
  <p>Jika kamu ingin menu dropdown meluas ke atas, bukan ke bawah, <br/>ubah elemen div dengan class = "dropdown" menjadi "dropup":</p><br/><br/><br/><br/><br/><br/><br/>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Perhatikan pada tag <div class="dropup">. Di sini clas .dropup digunakan untuk membuat menu dropup.

Artikel Bootstrap lainnya :
Membuat desain web responsif menggunakan Bootstrap
cara membuat menu responsif pada web menggunakan Bootstrap + menu Dropdown

Teknologi, Pendidikan dan Informasi Menarik

Search This Blog