Bootstrap Top Fix Navbar Pada Halaman Web
Seringkali kita melihat sebuah website yag memiliki navigasi bar yang begitu kita scroll, maka navigasi tersebut tetap berada pada posisi top. Inilah yang dinamakan fix top navigation bar.
Dalam edisi tutorial pemrograman web kali ini, kita akan membuat fix top navigation bar dengan menggunakan framework Bootstrap. Seperti yang kita ketahui, Bootstrap menawarkan banyak fitur-fitur dalam menjadi desain web menjadi lebih menarik, termasuk untuk pembuatan fix top navbar.
Namun percobaan yang akan kita buat, kita akan melakukan override beberapa kode css untuk navbar, terutama yang berhubungan dengan fix top navbar.
Berikut ini adalah ouput yang akan kita bahas dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
Perhatikan Gambar.1, disini kita akan membuat navigasi bar yang memiliki menu colorful serta bagian search dan tombol Daftar serta Login. Menu-menu tersebut berada pada satu navigation bar, tepatnya class navbar-fixed-top" .
Pembuatan standar navigation bar dapat dibangun dengan <nav class="navbar navbar-default"> . Kitapun dapat menggunakan alternatif lainnya dengan menggunakan <nav class="navbar navbar-inverse"> .Di Bootstrap sendiri juga menawarkan pembuatan navbar secara fix baik pada posisi top maupun bottom dalam sebuah halaman web.
Untuk pembuatan fix top navbar, kita tinggal menambakan class navbar-fixed-top baik pada <nav class="navbar navbar-default"> maupun pada <nav class="navbar navbar-inverse">.
Namun dalam tutorial ini, kita tidak hanya menggunakan kode bawaan dari Bootstrap, akan tetapi ada beberapa kode css yang kita lakukkan override (modifikasi) agar keliatan lebih menarik seperti yang kita lihak pada bagian navbar di Gambar.1 diatas.
Langkah-langkah membuat top fix navbar
1. Buat file ilmudetil.cssFile ini adaah kode css dari Bootstrap yang telah kita override, dimana tujuaannya untuk mengubah warna background navbar-default , memberi warna yang berbeda-beda untuk setiap item menu serta warna ketika item menu tersebut dihover dan juga untuk memberi jarak untuk button login dan daftar.
.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.clr5 a{ color: #CEE229; } .navbar-default .navbar-nav > li.clr1.active a{ color:#fff; background: #F55; } .navbar-default .navbar-nav > li.clr1 a:hover{ background: rgba(255, 85, 85, 0.75); } .navbar-default .navbar-nav > li.clr2.active a{ color: #fff; background:#973CB6; } .navbar-default .navbar-nav > li.clr2 a:hover{ background: rgba(151, 60, 182, 0.66) } .navbar-default .navbar-nav > li.clr3.active a{ color: #fff; background:#5EC64D; } .navbar-default .navbar-nav > li.clr3 a:hover { background: rgba(94, 198, 77, 0.78); } .navbar-default .navbar-nav > li.clr4.active a{ color: #fff; background: #29AAE2; } .navbar-default .navbar-nav > li.clr4 a:hover{ background: rgba(41, 170, 226, 0.62); } .navbar-default .navbar-nav > li.clr5.active a{ color: #fff; background: #CEE229; } .navbar-default .navbar-nav > li.clr5 a:hover{ background: rgba(206, 226, 41, 0.63); } .navbar-default{ background-color: rgb(4, 37, 130); font-size:18px; border-color:none; } .navbar-default .navbar-brand { color: #ffffff; font-weight:bold; } .navbar-default .navbar-text { color:#ffffff; } .pemisah-btnnav{ margin-left: 20px; margin-right: 20px; } body { padding-top: 150px; }
2. Memangil file ilmudetil.css dan bootstrap.min.css
Sebelum kita menggunak kode-kode css dari ilmudetil.css dan bootstrap.min.css, terlebih dahulu harus kita panggil dengan menempatkannya pada file halaman web yang kita buat.
Dalam contoh ini, kita mengasumsikan nama file webnya adalah navbar.html. Sedangkan untuk file ilmudetil.css dan bootstrap.min.css berada dalam folder assets/css/namafilecss, sehingga kode untuk pemanggilannya sebagai berikut :
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/ilmudetil.css">
3. Membuat fix top navbar beserta item menunya
Berikut ini adalah kode dalam membuat fix top navbar yang akan kita tempatkan pada halaman web kita :
Kode lengkap
Agar dapat tampil seperti Gambar.1 diatas yang lengkap dengan konten artikel dan latest news, maka kode lengkapnya seperti dibawah ini :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Fix Top Navigation Bar</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<style>
.recent{
padding-top:20px;
}
.info-meta{
padding-top: 10px;
color:#9999;
}
a:focus,
a:hover {
text-decoration: none;
outline: none;
color: #9c9c9c;
}
.footer-bottom {
background-color:#3b5998;
color:#fff;
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="">
<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>
</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 active"><a href="">Programming</a></li>
<li class="clr3 active"><a href="">English</a></li>
<li class="clr4 active dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Learn French <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">Level A1</a></li>
<li><a href="">Level A2</a></li>
<li><a href="">Level B1</a></li>
<li><a href="">Level B2</a></li>
</ul>
</li>
<li class="clr5 active"><a href="">Programming Android</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group" >
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
<a><button class="btn btn-primary pemisah-btnnav">Login</button></a>
<a><button class="btn btn-primary">Daftar</button></a>
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-body">
<h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
<div class="info-meta">
<ul class="list-inline">
<li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
<li><i class="fa fa-eye"></i>21k</li>
<li><i class="fa fa-heart-o"></i>372</li>
<li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
<li class="pull-right">Category : Education</li>
</ul>
</div>
<hr>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object " src = "images/education.jpg" width="100%" height="200px" >
</a>
<div class = "media-body">
<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
A simple shell for an h1 to appropriately space out and segment sections of content on a page.
</p>
<p>It can utilize the h1's default small element, as well as most other components (with additional styles).
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page.
</p>
</div>
<p style="text-align:right;">
<button class="btn btn-primary">Read More</button>
</p>
</div>
<hr>
<h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
<div class="info-meta">
<ul class="list-inline">
<li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
<li><i class="fa fa-eye"></i>21k</li>
<li><i class="fa fa-heart-o"></i>372</li>
<li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
<li class="pull-right">Category : Technology</li>
</ul>
</div>
<hr>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "images/technology.jpg" width="300px" height="200px">
</a>
<div class = "media-body">
<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
A simple shell for an h1 to appropriately space out and segment sections of content on a page.
</p>
<p>It can utilize the h1's default small element, as well as most other components (with additional styles).
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page.
</p>
</div>
<p style="text-align:right;">
<button class="btn btn-primary">Read More</button>
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="text-center">Latest News</h4></div>
<div class="panel-body">
<div class="recent">
<a href="#"><img class="img-responsive" src="images/sport.jpg" alt="" /></a>
<div class="info-meta">
<ul class="list-inline">
<li><i class="fa fa-clock-o"></i> Jan 5, 2016 </a></li>
<li><i class="fa fa-eye"></i>21k</li>
<li><i class="fa fa-heart-o"></i>372</li>
</ul>
</div>
<h4>
<a href="">Pertandingan Basket NBA berlangsung sangat sengit</a>
</h4>
</div>
<div class="recent">
<a href="#"><img class="img-responsive" src="images/technology.jpg" alt="" /></a>
<div class="info-meta">
<ul class="list-inline">
<li><i class="fa fa-clock-o"></i> Jan 5, 2016</li>
<li><i class="fa fa-eye"></i>21k</li>
<li><i class="fa fa-heart-o"></i>372</li>
</ul>
</div>
<h4 class="entry-title">
<a href="">Tip dan Trik dalam memilih laptop untuk penyuka game</a>
</h4>
</div><!--recent-->
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer-bottom">
<div class="container-fluid text-center">
<p>Copyright © 2016, DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
</div>
</div>
<script src='assets/js/jquery.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
