Pada tutorial kali ini kita akan membuat sistem navigasi menu yang responsif dengan menggunakan Bootstrap. Tampilan navigasi menu akan tampil dengan baik pada Mobile maupun Desktop.
Kita akan merancang dengan tampilan:
- Tampilan Mobile
Untuk tampilan di atas coding utamanya adalah:
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#mynavbar-content”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Proweb</a>
</div><!– /navbar-header –>
Untuk tampilan di atas source code utamanya adalah:
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#mynavbar-content”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Proweb</a>
</div><!– /navbar-header –>
<div class=”collapse navbar-collapse” id=”mynavbar-content”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div><!– /collapse navbar-collapse –> - Tampilan desktop:
Demo dapat dilihat pada http://aris.proweb.asia/dist/coba14.html .
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>Navbar</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#mynavbar-content”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Proweb</a>
</div><!– /navbar-header –>
<div class=”collapse navbar-collapse” id=”mynavbar-content”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div><!– /collapse navbar-collapse –>
</div><!– /container-fluid –>
</div><!– /navbar navbar-default –>
</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>
Untuk informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#navbar .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.