Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat Dropdown dengan Bootstrap.
Dropdown Dasar
Sebuah menu dropdown adalah menu toggleable yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar yang tersedia.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Class .dropdown digunakan untuk menunjukkan menu dropdown.</p>
<p>Menggunakan class .dropdown-menu untuk benar-benar membangun menu dropdown.</p>
<p>TUntuk membuka menu dropdown, gunakan tombol atau link dengan class .dropdown-toggle dan data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropdown
<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>
Keterangan
- Claas .dropdown menunjukkan menu dropdown.
- Untuk membuka menu dropdown, gunakan tombol atau link dengan class .dropdown-toggle dan atribut data-toggle="dropdown".
- Class .caret menciptakan ikon tanda sisipan panah, Yang menunjukkan bahwa tombol adalah sebuah dropdown.
- Tambahkan class .dropdown-menu ke elemen <ul> untuk benar-benar membangun menu dropdown.
Divider Dropdown
Class .divider digunakan untuk link yang terisah dalam menu dropdown dengan pembatas horisontal tipis.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Class .divider digunakan untuk link yang terisah dalam menu dropdown dengan pembatas horisontal tipis:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
<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>
Dropdown Header
Class .dropdown-header digunakan untuk menambahkan header kedalam menu dropdown.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Class .dropdown-header digunakan untuk menambahkan header kedalam menu dropdown:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
<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>
Menonaktifkan dan Mengaktifkan Item
Sorot item dropdown tertentu dengan class .active (menambahkan warna latar belakang biru).Untuk menonaktifkan item dalam menu dropdown, gunakan class .disabled (mendapat warna teks abu-abu terang dan "tidak-parkir-tanda" icon di hover).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Class .active menambahkan warna latar belakang biru untuk link aktif.</p>
<p>Class .disabled menonaktifkan item dropdown (warna teks abu-abu).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
<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>
Posisi Dropdown
Ke kanan-menyelaraskan dropdown, tambahkan class .dropdown-menu right dengan elemen .dropdown-menu.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstra</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Ke kanan-menyelaraskan dropdown, tambahkan class .dropdown-menu right dengan elemen .dropdown-menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropdown
<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>
Dropup
Jika Anda ingin menu dropdown untuk memperluas ke atas bukan ke bawah, mengubah elemen <div> dengan class ="dropdown" ke "dropup".Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropup</h2>
<p>Class .dropup membuat menu dropdown memperluas ke atas bukan ke bawah:</p>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropup
<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>
Aksesibilitas dropdown
Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup atribut role dan aria-* saat membuat menu dropdown.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdown</h2>
<p>Class .dropdown digunakan untuk menunjukkan menu dropdown.</p>
<p>Menggunakan class .dropdown-menu untuk benar-benar membangun menu dropdown.</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorial
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Sekian Cara Membuat Dropdown dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon