blob: 3e24f4c85999d930273f42034334a46b872553d1 (
plain) (
blame)
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
|
p
| The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
p
| By default, the off-canvas menu is collapsed whenever the window width is.
| But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
.docs-demo.columns
.column
.off-canvas.off-canvas-sidebar-show
a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
i.icon.icon-menu
#sidebar-demo.off-canvas-sidebar.flex-centered
span Sidebar
a.off-canvas-overlay(href="#close")
.off-canvas-content
.content
h4 Lorem ipsum
p
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
p
| Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
p
| You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
| And remove the #[code active] to close it.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="off-canvas">
<!-- off-screen toggle button -->
<a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
<i class="icon icon-menu"></i>
</a>
<div id="sidebar-id" class="off-canvas-sidebar">
<!-- off-screen sidebar -->
</div>
<a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<!-- off-screen content -->
</div>
</div>
|
