下拉式選單 - Dropdowns
箭頭置中
箭頭置左
箭頭置右
箭頭置上
箭頭置下
可捲動的選單
這是 H4 標題
一拳必殺股份有限公司
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<p>箭頭置中</p>
<button class="btn btn-dropdown" data-dropdown data-target="center-menu1">
<i class="icon-chevron-up no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="center-menu1"
data-place="top">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="center-menu2">
<i class="icon-chevron-down no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="center-menu2"
data-place="bottom">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="center-menu3">
<i class="icon-chevron-left no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="center-menu3"
data-place="left">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="center-menu4">
<i class="icon-chevron-right"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="center-menu4"
data-place="right">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br><br>
<p>箭頭置左</p>
<button class="btn btn-dropdown" data-dropdown data-target="left-menu1">
<i class="icon-chevron-up no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="left-menu1"
data-place="top"
data-align="left">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="left-menu2">
<i class="icon-chevron-down no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="left-menu2"
data-place="bottom"
data-align="left">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br><br>
<p>箭頭置右</p>
<button class="btn btn-dropdown" data-dropdown data-target="right-menu1">
<i class="icon-chevron-up no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="right-menu1"
data-place="top"
data-align="right">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="right-menu2">
<i class="icon-chevron-down no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="right-menu2"
data-place="bottom"
data-align="right">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br><br>
<p>箭頭置上</p>
<button class="btn btn-dropdown" data-dropdown data-target="top-menu1">
<i class="icon-chevron-left no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="top-menu1"
data-place="left"
data-align="top">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="top-menu2">
<i class="icon-chevron-right no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="top-menu2"
data-place="right"
data-align="top">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br><br>
<p>箭頭置下</p>
<button class="btn btn-dropdown" data-dropdown data-target="bottom-menu1">
<i class="icon-chevron-left no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="bottom-menu1"
data-place="left"
data-align="bottom">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="bottom-menu2">
<i class="icon-chevron-right no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="bottom-menu2"
data-place="right"
data-align="bottom">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br><br>
<p>可捲動的選單</p>
<button class="btn btn-dropdown" data-dropdown data-target="long-menu">
項目很多的選單
<i class="icon-chevron-down"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="long-menu"
data-place="bottom"
data-align="right">
<div class="dropdown-menu-scrollable">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-dropdown-item>選項4</a>
<a class="dropdown-item" data-dropdown-item>選項5</a>
<a class="dropdown-item" data-dropdown-item>選項6</a>
<a class="dropdown-item" data-dropdown-item>選項7</a>
<a class="dropdown-item" data-dropdown-item>選項8</a>
<a class="dropdown-item" data-dropdown-item>選項9</a>
<a class="dropdown-item" data-dropdown-item>選項10</a>
</div>
</div>
<button class="btn btn-dropdown" data-dropdown data-target="no-arrow-menu">
沒有箭頭
</button>
<div class="dropdown-menu no-arrow"
data-dropdown-menu="no-arrow-menu"
data-place="top">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br>
<br>
<h4 class="heading-dropdown" data-dropdown data-target="heading-menu">
這是 H4 標題
<i class="icon icon-chevron-down"></i>
</h4>
<div class="dropdown-menu no-arrow"
data-dropdown-menu="heading-menu"
data-place="bottom"
data-align="left">
<a class="dropdown-item" data-dropdown-item>選項1</a>
<a class="dropdown-item" data-dropdown-item>選項2</a>
<a class="dropdown-item" data-dropdown-item>選項3</a>
</div>
<br>
<br>
<button class="btn btn-dropdown" data-dropdown data-target="title-menu">
有標題的選單
</button>
<div class="dropdown-menu no-padding"
data-dropdown-menu="title-menu"
data-place="right"
data-align="center">
<div class="dropdown-menu-title">我是標題</div>
<div class="dropdown-menu-content">想問一下有沒有不用學 css 就可以開發前端的方法?</div>
</div>
<br>
<br>
<h4 class="heading-dropdown" data-dropdown data-target="mega-menu">
一拳必殺股份有限公司
<i class="icon icon-chevron-down"></i>
</h4>
<div class="dropdown-menu no-arrow"
data-dropdown-menu="mega-menu"
data-place="bottom"
data-align="left">
<ul class="mega-menu">
<li class="mega-menu-divider">
<div class="d-flex">
<div class="mega-menu-col">簡訊點數: 123,456</div>
<div class="mega-menu-col">使用者: 7 人</div>
</div>
</li>
<li class="mega-menu-divider">
<div class="mega-menu-icon-box">
<div class="d-flex justify-content-around">
<div class="mega-menu-icon-box-item">
<i class="icon-paper-plane"></i>
寄件人
</div>
<div class="mega-menu-icon-box-item">
<i class="icon-doc"></i>
帳單
</div>
<div class="mega-menu-icon-box-item">
<i class="icon-invoice"></i>
發票設定
</div>
</div>
<div class="d-flex justify-content-around">
<div class="mega-menu-icon-box-item">
<i class="icon-bolt"></i>
第三方服務整合
</div>
<div class="mega-menu-icon-box-item">
<i class="icon-code"></i>
API 串接
</div>
<div class="mega-menu-icon-box-item">
<i class="icon-download"></i>
匯出訂單
</div>
</div>
</div>
</li>
<li>
<a class="mega-menu-item" href="">簡訊發送紀錄</a>
<a class="mega-menu-item" href="">使用者操作記錄</a>
</li>
</ul>
</div>
1
2
3
4
const { Dropdown } = window.beyond
document.querySelectorAll('[data-dropdown]')
.forEach(dom => new Dropdown(dom))
Dropdown HTML
<button class="btn btn-dropdown" data-target="center-menu1">
<i class="icon-chevron-up no-text"></i>
</button>
<div class="dropdown-menu"
data-dropdown-menu="center-menu1"
data-place="top">
<a class="dropdown-item" href="#">選項1</a>
<a class="dropdown-item" href="#">選項2</a>
<a class="dropdown-item" href="#">選項3</a>
</div>| 屬性名稱 | 用途 |
|---|---|
| data-target | 選單按鈕使用此屬性指定要打開的選單 ID，例如 data-target="menu-id" |
| data-dropdown-menu | 設定自己的選單 ID，例如 data-dropdown-menu="menu-id" |
| data-place | 選單彈出的方向，支援上下左右四個方向 ( top, bottom, left, right ) |
| data-align | 選單要對齊的方向，data-place 為左或右時可以設定為 top 或 bottom，data-place 為上或下時，可以設為 left 或 right |
| data-offset | 要偏移的像素，會依據 data-place 決定偏移的方向，例如 data-place="right" data-offset="30"就是往右偏移 30px |
| data-offset-left | 同 data-offset，不過不會受到 data-place影響，只調整左右 |
| data-offset-top | 同 data-offset，不過不會受到 data-place影響，只調整上下 |
Dropdown JS
constructor
const dropdown = new Dropdown(dom)| 名稱 | 型別 | 說明 |
|---|---|---|
| dom | HTMLElement | 要被初始化的選單按鈕元素 |
destroy
移除 dropdown 產生的 dom 元素與 event listeners
dropdown.destroy()