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. Show 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 :
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 DividerClass .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 HeaderClass .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 itemsClass .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 PositionUntuk 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. DropupJika kamu ingin menu dropdown meluas ke atas, bukan ke bawah, ubah elemen <div> dengan class = "dropdown" menjadi "dropup": <!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>
Share LabelsPemrograman WebsiteLabels: Pemrograman Website Share Pemrograman Java : Cara Membuat Matriks Pada JavaDecember 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 ArrayNovember 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 GUINovember 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 |