Cara Membuat Simple Sidebar menu dengan Bootstrap 3
Sidebar menu merupakan elemen web yang bisa kita jumpai pada tampilan web saat ini, ciri khas pada menu ini adalah pada letaknya yang berada pada samping / sidebar website. Kita bisa mengaktifkan atau menonaktifkan sidebar menu dengan cara mengklik sebuah tombol menu yang tersedia. Nah, berbicara mengenai menu sidebar, apakah diantara kalian ada yang pernah membuat menu sidebar ? mungkin ada yang sudah dan ada juga yang belum pernah yah, Berikut ini akan saya share bagaimana cara membuat simple sidebar menu dengan Bootstrap 3. Bagi yang belum pernah silahkan ikuti langkah-langkah nya dengan baik dan bagi yang sudah pernah tidak ada salahnya untuk mencoba dan menambah referensi dalam mendesain tampilan menu.
Baik langsung saja, sebelumnya kalian wajib meload terlebih dahulu komponen bootstrap 3. Setelah semua terpenuhi, silahkan ketikan struktur HTML seperti berikut ini.
<div id="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div id="page-content-container">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Halo Dunia</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
<a href="#menu" class="btn btn-default" id="menu">Menu</a>
</div>
</div>
</div>
</div>
</div>
Setelah mengetikan kode sperti diatas, selanjutnya, kita akan desain tampilan terlebih dahulu dengan CSS3 berikut ini.
#container {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#container.toggled {
padding-left: 250px;
}
#sidebar {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #2c3e50;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#container.toggled #sidebar {
width: 250px;
}
#page-content-container {
width: 100%;
position: absolute;
padding: 15px;
}
#container.toggled #page-content-container {
position: absolute;
margin-right: -250px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #d35400;
font-weight: bold;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
font-weight: bold;
background: #d35400;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
font-weight: bold;
}
@media(min-width:768px) {
#container {
padding-left: 250px;
}
#container.toggled {
padding-left: 0;
}
#sidebar {
width: 250px;
}
#container.toggled #sidebar {
width: 0;
}
#page-content-container {
padding: 20px;
position: relative;
}
#container.toggled #page-content-container {
position: relative;
margin-right: 0;
}
}
Selanjutnya, kita akan tambahkan kode jQuery beserta library jQuery agar menu sidebar berjalan dengan baik.
<script type="text/javascript">
$(document).ready(function(){
$("#menu").click(function(e) {
e.preventDefault();
$("#container").toggleClass("toggled");
});
});
</script>
Jika semua kode diatas telah diketikan, selanjutnya simpan dilenya kemudian jalankan pada browser dan lihat hasilnya. Maka akan terlihat menu yang terletak disamping web, dan tombol menu yang dapat kalian klik untuk mengaktifkan atau menonaktifkan menu sidebarnya.
Baik cukup sekian tutorial bagaimana cara membuat simple sidebar menu dengan Bootstrap 3. Semoga bermanfaat dan selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
