Responsive Sidebar dengan Bootstrap

Ukuran: px

Mulai penontonan dengan halaman:

Download "Responsive Sidebar dengan Bootstrap"

Ridwan Dharmawijaya
6 tahun lalu
Tontonan:

2 Responsive Sidebar dengan Bootstrap Oleh: Boy Panjaitan Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.pernahkah anda melihat website dengan sidebar yang responsive? responsive disini maksudnya adalah saat pada tampilandekstop sidebar akan muncul, namun pada tampilan mobile sidebarnya akan menghilang dan... Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi. Pernahkah anda melihat website dengan sidebar yang responsive? responsive disini maksudnya adalah saat pada tampilan dekstop sidebar akan muncul, namun pada tampilan mobile sidebarnya akan menghilang dan akan muncul tombol untuk menampilkan sidebarnya. Untuk tutorial ini kita membutuhkan framework Bootstrap (CSS dan JavaScript) Offcanvas.css file css tambahan dari bootstrap Offcanvas.js file javascript tambahan dari bootstrap Pada Demo terdapat Navbar atau menu navigasi namun karena kita fokus membahas mengenai Sidebar saja jadi saya tidak menjelaskan mengenai Navbar. <!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"> <meta name="description" content=""> <meta name="author" content=""> <title>responsive Sidebar</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/offcanvas.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed"

3 data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> </button> <a class="navbar-brand" href="#">website Anda</a> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> <div class="container" style="margin-top:70px"> <div class="row row-offcanvas row-offcanvas-left"> //--1--// <div class="col-xs-12 col-sm-9"> <p class="pull-left visible-xs"> //--2--// <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">sidebar</button> </p> <div class="jumbotron">//--4--// <br> <p>konten Website Anda</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio? <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> //--3--// <div class="list-group"> <a href="#" class="list-group-item">link Sidebar1</a> <a href="#" class="list-group-item">link Sidebar2</a>

4 <a href="#" class="list-group-item">link Sidebar3</a> <a href="#" class="list-group-item">link Sidebar4</a> <a href="#" class="list-group-item">link Sidebar5</a> <a href="#" class="list-group-item">link Sidebar6</a> <a href="#" class="list-group-item">link Sidebar7</a> <a href="#" class="list-group-item">link Sidebar8</a> <a href="#" class="list-group-item">link Sidebar9</a> <a href="#" class="list-group-item">link Sidebar10</a>   <hr> <footer> <p>copyright Website Anda 2014</p> </footer>  <script src="../js/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/offcanvas.js"></script> </body> </html> Berikut akan saya jelaskan bagian-bagian utamanya 1. Class 'row-offcanvas-left' digunakan untuk menentukan arah munculnya sidebar saat di toggle. disini kita menggunakan left berartisidebar akan muncul dari arah kiri. anda bisa menyesuaikan dengan pemakaian <div class="row row-offcanvas row-offcanvas-left"> 2. Script berikut untuk menampilkan button yang akan men-toogle sidebar, button nya akan muncul jika lebar layar < 768px hal ini ditentukan oleh class 'visible-xs' dan attribute data-toggle 'offcanvas' menunjukkan bahwa data yang akan ditampilkan adalah offcanvas yaitu class sidebar-offcanvas <p class="pull-left visible-xs"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">sidebar</button> </p>

3. Div dengan class 'sidebar-offcanvas' adalah elemen yang memuat konten sidebar yang akan ditoggle <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> - 4.

5 3. Div dengan class 'sidebar-offcanvas' adalah elemen yang memuat konten sidebar yang akan ditoggle <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> - 4. class 'jumbotron' sebagai elemen yang memuat isi dasar dari website <div class="jumbotron"> Untuk melihat hasilnya silahkan lihat di demo, dan perkecil ukuran layar anda untuk mencobanya Tentang Penulis Boy Panjaitan I'm Developer

dokumen-dokumen yang mirip

Membuat Smooth Scrolling dalam 1 halaman dengan JQuery

Membuat Smooth Scrolling dalam 1 halaman dengan JQuery Oleh: Christian Rosandhy Segala sesuatu yang smooth itu tentunya asik dong ya? Begitu juga dengan website kita.. Kita bisa bikin animasi scroll dalam