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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!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" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Website Anda</a> </div> <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> </div> </div> </nav> <div class="container" style="margin-top:70px"> <span style="color: #ff0000;"><div class="row row-offcanvas row-offcanvas-left"></span> <strong><span style="color: #ff0000;">//--1--//</span></strong> <div class="col-xs-12 col-sm-9"> <span style="color: #ff0000;"><p class="pull-left visible-xs"> //--2--// <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Sidebar</button> </p></span> <span style="color: #ff0000;"><div class="jumbotron">//--4--//</span> <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> </div> <span style="color: #ff0000;"><div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> //--3--//</span> <div class="list-group"> <a href="#" class="list-group-item">Link Sidebar1</a> <a href="#" class="list-group-item">Link Sidebar2</a> <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> </div> </div><!--/.sidebar-offcanvas--> </div><!--/row--> <hr> <footer> <p>Copyright © Website Anda 2014</p> </footer> </div><!--/.container--> <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
1
2
3
4
| <div class="row row-offcanvas row-offcanvas-left"> --- ---</div> |
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
1
2
3
| <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
1
2
3
4
| <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> --- ----</div> |
4. class 'jumbotron' sebagai elemen yang memuat isi dasar dari website
1
2
3
4
| <div class="jumbotron"> --- ---</div> |
kurang jelas mas berikan langkah-langkah yang lebih detail
BalasHapusIya ini kok isinya sama blog sebelah..mana neh yg copas?
BalasHapuspantesan g bs jelasin