Setelah kita membuat menu dengan mudah menggunakan Bootstrap, artikel kali ini akan membuat dropdown menggunakan icon. Dengan tampilan icon ini akan memudahkan pemakai aplikasi kita membayangkan apa yang akan dikerjakan dengan aplikasi kita.
Sebagai contoh source code utama kita adalah:
<li>
<a data-toggle=”dropdown” data-target=”#” href=”#”>
Paket website <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”><span class=”glyphicon glyphicon-shopping-cart”></span> Basic</a></li>
<li><a href=”#”><span class=”glyphicon glyphicon-bookmark”></span> Bisnis</a></li>
<li><a href=”#”><span class=”glyphicon glyphicon-stats”></span> Corporate</a></li>
</ul>
</li>
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 Icon</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=”#”><span class=”glyphicon glyphicon-shopping-cart”></span> Basic</a></li>
<li><a href=”#”><span class=”glyphicon glyphicon-bookmark”></span> Bisnis</a></li>
<li><a href=”#”><span class=”glyphicon glyphicon-stats”></span> Corporate</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/coba23.html dengan tampilan seperti berikut ini:
Informasi lebih lanjut silahkan mengunjungi:
1. http://getbootstrap.com/components/#glyphicons .
2. http://getbootstrap.com/components/#dropdowns .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.