blob: a41a4a5399f1473a1ce4e22824d62174edd26b06 (
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'menu'
- var parent = 'components'
- var title = 'Menu - Components - Spectre.css CSS Framework'
- var description = 'Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('menu', 'Menu')
include ../_layout/_ad-g.pug
p Menus are vertical list of links or buttons for actions and navigation.
.docs-demo.columns
.column.col-4.col-xs-12
ul.menu
li.menu-item
.tile.tile-centered
.tile-icon
img.avatar(src="../img/avatar-4.png" alt="Avatar")
.tile-content
| Steve Rogers
li.divider
li.menu-item
.menu-badge
label.label.label-primary 2
a.active(href="#menus")
| My profile
li.menu-item
a(href="#menus")
| Settings
li.menu-item
a(href="#menus")
| Logout
.column.col-4.col-xs-12
ul.menu
li.divider(data-content="LINKS")
li.menu-item
a(href="#menus") Slack
li.menu-item
a(href="#menus") Hipchat
li.menu-item
a(href="#menus") Skype
.column.col-4.col-xs-12
ul.menu
li.menu-item
label.form-checkbox
input(type="checkbox" checked="")
i.form-icon
| form-checkbox
li.menu-item
label.form-radio
input(type="radio" checked="")
i.form-icon
| form-radio
li.menu-item
label.form-switch
input(type="checkbox" checked="")
i.form-icon
| form-switch
p
| Add a container element with the #[code menu] class.
| And add child elements with the #[code menu-item] class.
| You can separate menu items with a #[code divider].
| Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
p
| Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<ul class="menu">
<!-- menu header text -->
<li class="divider" data-content="LINKS">
</li>
<!-- menu item standard -->
<li class="menu-item">
<a href="#">
<i class="icon icon-link"></i> Slack
</a>
</li>
<!-- menu item with form control -->
<li class="menu-item">
<label class="form-checkbox">
<input type="checkbox">
<i class="form-icon"></i> form-checkbox
</label>
</li>
<!-- menu divider -->
<li class="divider"></li>
<!-- menu item with badge -->
<li class="menu-item">
<div class="menu-badge">
<label class="label label-primary">2</label>
</div>
<a href="#">
<i class="icon icon-link"></i> Settings
</a>
</li>
</ul>
+docs-subheading('menu-dropdown', 'Dropdown menu')
p The dropdown is a combination of buttons and menus.
.docs-demo.columns
.column.col-xs-12
.dropdown
.btn-group
a.btn.btn-primary dropdown button
a.btn.btn-primary.dropdown-toggle(tabindex="0")
i.icon.icon-caret
ul.menu
li.menu-item
a(href="#dropdowns")
| Slack
li.menu-item
a(href="#dropdowns")
| Hipchat
li.menu-item
a(href="#dropdowns")
| Skype
.column.col-xs-12
.dropdown
a.btn.btn-link.dropdown-toggle(tabindex="0")
| dropdown button
i.icon.icon-caret
ul.menu
li.menu-item
a(href="#dropdowns")
| Slack
li.menu-item
a(href="#dropdowns")
| Hipchat
li.menu-item
a(href="#dropdowns")
| Skype
p
| Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
p
| Add a container element with the #[code dropdown] class.
| And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
| You also need to add #[code tabindex] to make the buttons focusable.
p
| If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
.docs-demo.columns
.column.col-xs-12.text-right
.dropdown.dropdown-right
a.btn.btn-primary.dropdown-toggle(tabindex="0")
| dropdown button
i.icon.icon-caret
ul.menu.text-left
li.menu-item
a(href="#dropdowns") Slack
li.menu-item
a(href="#dropdowns") Hipchat
li.menu-item
a(href="#dropdowns") Skype
p
| Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- basic dropdown button -->
<div class="dropdown">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
dropdown menu <i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
...
</ul>
</div>
<!-- dropdown button group -->
<div class="dropdown">
<div class="btn-group">
<a href="#" class="btn">
dropdown button
</a>
<a href="#" class="btn dropdown-toggle" tabindex="0">
<i class="icon icon-caret"></i>
</a>
<!-- menu component -->
<ul class="menu">
...
</ul>
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
