Pada tutorial sebelumnya kita telah membahas tentang maksud apa itu modal dan dua teknik dalam membuat modal pada bootstrap. Silahkan baca tutorial sebelumnya : Membuat modal pada bootstrap.
Seperti yang kita ketahui navbar merupakan tempat melekatnya beberapa menu, nah dalam prakteknya sering modal dikaitkan dengan proses klik pada salah satu menu dari navbar.
Gambar.1 dibawah ini adalah output dari modal navbar bootstrap yang nantinya akan kita praktekkan tahap demi tahap :
Dari gambar.1 diatas, ketika diklik pada bagian menu "Bootsrap", maka jendela dialog dari modal akan ditampilkan.
Langkah-langkah membuat modal navbar
1. Pastikan anda telah mengdownload terlebih dahulu framework bootstrap. Jika belum, pada link download dibawah akan disertakannya beserta dengan kode modal navbar dalam tutorial ini.2. Langkah kedua kita akan merancang sebuah navigation bar yang telah kita modifikasi navbar defaultnya. Untuk itu buatlah sebuah file css, disini kita berinama informatika.css yang berisikan kode sebagai berikut :
.navbar-default .navbar-nav > li.clr1 a{
color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
color:#fff;
background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
color: #fff;
background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
color: #fff;
background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
color: #fff;
background: #29AAE2;
}
.navbar-default{
background-color: #009688;
font-size:18px;
}
.navbar-default .navbar-brand {
color: #ffffff;
font-weight:bold;
}
.navbar-default .navbar-text {
color:#ffffff;
}
a{color: #FFC107;text-decoration: none;}
img{width:120px; height:135px;padding-top: 10px;}Kemudian buat lagi sebuah file, misal kita berinama modal_navbar.html yang berisikan potongan kode untuk navbarnya. Jangan lupa, pada file ini dipanggil file informatika.css yang sudah kita buat terlebih dahulu. Disini diasumsikan file informatika.css berada pada folder assets/css/informatika.css dan letakkan diantara tag <head>....</head> dengan kode berikut :
<link rel="stylesheet" href="assets/css/informatika.css">Sedangkan untuk kode navbarnya ditunjukkan oleh kode dibawah ini dan diletakkan setelah tag <body> :
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Dunia Informatika</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="#signin" data-toggle="modal" data-target="#theModal">Bootstrap</a></li>
<li class="clr3"><a href="">PHP</a></li>
</ul>
</div>
</div>
</div>Dengan demikian sekarang kita telah menghasilkan sebuah ouput untuk navbar yang dilengkapi menu-menunya, seperti ditunjukkan oleh Gambar.2 dibawah ini :
3. Langkah ketiga kita akan mendesain sebuah modal yang memunculkan kotak dialog. Kode program ini diletakkan juga dalam file modal_navbar.html dalam tag <body> juga, bisa diatas kode navbar atau dibawah kode navbar :
<!-- Bagian modal -->
<div class="container">
<div class="modal" id="theModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Judul Modal</h4>
</div>
<div class="modal-body">
Informasi dari modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir dari modal -->Perhatikan pada bagian tag id="theModal", id tersebut digunakan oleh menu Bootstrap (lihat kode navbar diatas). Jadi ketika user mengklik menu Bootstrap, interface modal yang barusan kita desain akan dibangkitkan.
Untuk bagian-bagian dari data attribut modal, telah kita bahas di tutorial sebelumnya.
Source code lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Modal pada Navbar</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/informatika.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Dunia Informatika</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="#signin" data-toggle="modal" data-target="#theModal">Bootstrap</a></li>
<li class="clr3"><a href="">PHP</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
</div>
<!-- Bagian modal -->
<div class="container">
<div class="modal" id="theModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Judul Modal</h4>
</div>
<div class="modal-body">
Informasi dari modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- Akhir dari modal -->
</body>
</html>