Tutorial Membuat Dropdown Menu
dengan Bootstrap 3 – Kali ini saya akan memberikan script bootstrap 3, dimana
anda dapat membuat dropdown menu dengan mudah hanya menggunakan framework
bootrstrap. Framework CSS ini dapat memudahkan anda dalam pembuatan website
anda. Dengan tampilan dan fitur-fitur yang menarik yang telah diberikan
bootstrap 3. Tapi disini kita membahas mengenai dropdown menu.
Dropdown menu Bootstrap 3 selain
tampilannya yang bagus, ternyata dropdown menu responsive. Sehingga dapat
dilihat di media mana saja. Untuk mengetahui tentang Tutorial Membuat Dropdown
Menu dengan Bootstrap 3, simak baik-baik tutorial ini. Berikut langkah-langkahnya
:
1.
Pertama anda buat dulu file htmlnya terlebih
dahulu. Lalu berikan nama index.html dan copas script dibawah ini :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Script CSS-->
<link rel="stylesheet"
href="css/bootstrap.min.css" />
<link rel="stylesheet"
href="css/bootstrap-responsive.css" />
<!--Script Javascript-->
<script
language="javascript"
src="js/jquery-1.9.1.js"></script>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
</head>
<body>
<div class="navbar
navbar-inverse navbar-fixed-top">
<div
class="navbar-inner">
<div
class="container">
<button
type="button" data-target=".nav-collapse"
data-toggle="collapse" class="btn btn-navbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a
class="brand" href="#">Profile Anda</a>
<div class="nav-collapse collapse">
<ul
class="nav">
<li class="active"><a
href="#">Home <b
class="icon-home"></b></a></li>
<li
class="dropdown"><a href="#"
class="dropdown-toggle" data-toggle="dropdown">Menu1
<b class="caret"></b></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu
1</a></li>
<li><a href="#">Submenu 2</a></li>
<li
class="divider"></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a
href="#">Menu 2</a></li>
<li><a
href="#">Menu 3</a></li>
<li><a
href="#">Menu 4</a></li>
<li
class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Menu5 <b
class="caret"></b></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu
1</a></li>
<li><a href="#">Submenu 2</a></li>
<li
class="divider"></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
</ul>
</div>
</div><!--Container-->
</div><!--Navbar inner-->
</div><!--Navbar Fixed
Top-->
<script
type="text/javascript"
src="js/bootstrap.min.js"></script>
</body>
</html>
2.
Lalu buat script cssnya ke folder css, begitu
juga dengan javascriptnya. Anda dapat mendowloadnya dibawah.
Setelah semuanya anda sediakan, mari kita lihat script di
index.htmlnya terlebih dahulu. Coba anda perhatikan script ini <b
class="icon-home"></b>, script ini difungsikan untuk membuat
icon-icon bagus di menu. Anda dapat menggunakan icon-icon tersebut denga selera
anda.
Untuk memberikan hasil yang lebih bagus, anda dapat mengedit
file cssnya dengan keinginan anda. Sampai disini tutorial yang saya berikan,
jika mengalami masalah script. Anda dapat memberikan komentar dibawah ini. Dan
untuk mendapat script lengkapnya, silahkan gunakan link dibawah. Semoga Tutorial
Membuat Dropdown Menu dengan Bootstrap 3 dapat bermanfaat bagi anda. Trima
kasih.
