Cara menggunakan bootstrap dropdown

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):


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 

Share

Labels

Pemrograman Website

Labels: Pemrograman Website

Share

Pemrograman Java : Cara Membuat Matriks Pada Java

December 20, 2017

Pengertian umum dari matriks adalah type data yang mengacu sekumpulan elemen bertipe sama melalui 2 indeks (baris & kolom). Atau ada juga yang mengartikan matriks sebagai array dua dimensi. Jika array satu dimensi hanya terdiri satu baris dan beberapa kolom sedangkan matriks memiliki baris dan kolom lebih dari satu. Jika ingin mendapat dasar pembahasan dan contoh algoritma matriks bisa dilihat pada artikel  Pembahasan Dan Contoh Algoritma Matriks . Dalam artikel tersebut dijelaskan konsep dasar dari algoritma matriks tanpa  berkaitan dengan bahasa pemrograman apapun. Kembali ke pembahasan kita kali ini, yaitu membuat Cara Membuat Matriks Pada Java. Berikut adalah code seluruh program dari pembuatan matriks pada java. import java.util.Scanner; public class Array { public static void main(String[] args) { int jumlahBaris, jumlahKolom; Scanner scanner = new Scanner(System.in); System.out.print("Masukan Jumlah indeks baris martriks : &

Share

Read more

Pembahasan Dan Contoh Algoritma Array

November 30, 2017

Array adalah type data yang mengacu sekumpulan elemen  bertipe sama melalui indeks. Memiliki sifat tersusun secara terurut dan memiliki indeks. Contoh :   A : array[1..10] of char  TNamaHari : array[1..7] of string TJumHari : array[1..12] of integer Contoh Pemakaian Array Program NamaHari Kamus TNamaHari :  array[1..7] of string HariKe : integer Algoritma   TNamaHari[1]←”Senin”   TNamaHari[2]←”Selasa”   TNamaHari[3]←”Rabu”   TNamaHari[4]←”Kamis”   TNamaHari[5]←”Jumat”   TNamaHari[6]←”Sabtu”   TNamaHari[7]←”Minggu”   input (HariKe)   output(TNamaHari[HariKe]) Contoh di atas adalah contoh array dengan jumlah indeks 7, dan setiap indeks diisi dengan nama-nama hari. Mengisi array bisa dilakukan dengan membuat sistem/algoritma pengulangan sampai jumlah indeks array yang dibutuhkan atau tersedia. Lalu disetiap pengulangan dimasukan nilai data pada indeks array. Skema Pemrosesan Array Skema pemrosesan array :     Inisialisasi i traversal [1..NMax]  

Share

Read more

Pemrograman Java : Cara getText dan setText Pada Java GUI

November 26, 2016

Pada Java GUI untuk mendapatkan text yang user input kamu harus mengambil text dari text area atau bisa juga text field. Untuk melakukannya bisa menggunakan fungsi getText() yang ada pada Java. getText() adalah fungsi yang ada pada Java untuk mengambil teks yang diinput pada form. Lalu untuk memunculkan sebuah teks pada text area atau text field  dapat menggunakan fungsi setText(). Akan diberikan contoh form sebagai berikut untuk lebih memahami penggunaan setText() dan getText() pada Java. Berikut adalah Cara getText dan setText Pada Java GUI : Buatlah form pada JFrame seperti gambar diatas. Caranya hanya tinggal klik kanan pada package yang diinginkan new-->JFrame Form... Lalu buat form seperti berikut: Berikan nama variabel pada text field  sesuai kegunaan. Contohnya text field  jurusan akan diberi nama variabel "jurusan". Caranya klik kanan pada text field yang dikehendaki lalu pilih Change variable name. Ini untuk memudahkan menggunakan va