Partial Side Nav Bootstrap 3 part 1
29/11/2017 Maykhel David 2279 Website
Bootstrap 3 adalah salah satu contoh sukses pengembangan framework untuk membuat website responsive. Banyak sekali tips dan trik yang bisa kalian gunakan ketika menggunakan bootstrap. Pada artikel kali ini kita akan menambahkan satu lagi trik yang bisa kita gunakan untuk menambah wawasan kalian tentang bagaimana cara melakukan kustomisasi bootstrap dengan benar.
Pada artikel sebelumnya kita sudah mencoba membuat sebuah template side nav statis dengan memanfaatkan bootstrap 3. Saat ini kita akan membuat template sejenis side nav namun kali ini adalah partial sidenav, dimana pengaruh collapsible akan membuat sidenav mengecil dan mengubah setiap menu menjadi icon. Sekarang kita buat struktur html seperti berikut sebagai basic template bootstrap.
<!DOCTYPE html>
<head>
<title>Bootstrap 3 Collapsible Sidebar</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
</head>
<body><!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Sekarang kita akan membuat struktur utama yang akan menjadi sidebar dan konten nya seperti berikut
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
...
</nav>
<!-- Page Content -->
<div id="content">
<!—Di isi dengan konten dummy -->
</div>
</div>
Selanjutnya kita akan menyusun sidebar dengan beberapa konten seperti beberapa navigasi dan juga dropdown, di sebelahnya juga kita isi konten dengan tombol toggle sebagai triggernya
<div class="wrapper"><nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Collapsible Sidebar</h3>
<strong>BS</strong>
</div><!-- Sidebar Links -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse">
<i class="glyphicon glyphicon-home"></i>
Home
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-duplicate"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
Portfolio
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-send"></i>
Contact
</a>
</li>
</ul>
</nav><div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
Toggle Sidebar
</button>
</div>
</div>
Selanjutnya kita akan mengisi konten utama pada template ini. Disini kita hanya membuat sebuah tombol toggle yang akan menjadi trigger untuk memunculkan dan menyembunyikan sidebar yang telah kita buat.
<script type="text/javascript">
$(document).ready(function () {$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});});
</script>
Baiklah teman-temandiatas tadi adalah layout dan struktur html yang akan klita gunakan. Pada artikel selanjutnya akan ada penambahan css yang diperlukan dan juga demo untuk kalian lihat secara langsung hasilnya. Semoga bermanfaat
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
