Dalam membuat aplikasi berbasis web, dropdown menu adalah fasilitas yang harus ada untuk memudahkan pemakai aplikasi menggunakan aplikasi. Dengan menggunakan framework Bootstrap, kita dapat membuat dropdown menu dengan mudah.
Source code utama membuat membuat dropdown menu dapat dilihat pada contoh berikut ini:
<li>
<a data-toggle=”dropdown” data-target=”#” href=”#”>
Paket website <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Bisnis</a></li>
<li><a href=”#”>Corporate</a></li>
</ul>
</li>
Tampilan terkait source code di atas adalah:
Kemudian untuk source code lengkapnya adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Dropdown mudah</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<ul class=”nav nav-pills”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li>
<a data-toggle=”dropdown” data-target=”#” href=”#”>
Paket website <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Bisnis</a></li>
<li><a href=”#”>Corporate</a></li>
</ul>
</li>
<li>
<a data-toggle=”dropdown” data-target=”#” href=”#”>
Paket Aplikasi <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>ERP</a></li>
<li><a href=”#”>HRD</a></li>
<li><a href=”#”>CRM</a></li>
</ul>
</li>
</ul>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba22.html dengan tampilan di bawah ini:
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#dropdowns .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
