blob: cd8cfbac1eadc55f3d6c71abd258b4cf4adbe08e (
plain)
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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'off-canvas'
- var parent = 'experimentals'
- var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework'
- var description = 'The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('off-canvas', 'Off-canvas')
p
small.label.label-primary.mr-2 CSS ONLY
include ../_layout/_ad-g.pug
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>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
