-
Notifications
You must be signed in to change notification settings - Fork 46
/
js_dropdown.html
134 lines (116 loc) · 5.95 KB
/
js_dropdown.html
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
---
layout: admin
title: Javascript - Dropdown
section: js
module: js_dropdown
header:
icon: keyboard_arrow_down
title: Dropdown
description: Add a dropdown list to any button.
---
<section id="js_dropdown">
<!-- ############ -->
<!-- Introduction -->
<!-- ############ -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Introduction</h4>
<p>Make sure that the <code class="language-markup">data-activates</code> attribute matches the id in the <code class="language-markup"><ul></code> tag. </p>
<p>You can add a divider with the <code class="language-markup"><li class="divider"></li></code> tag. </p>
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<pre>
<code class="language-markup">
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</code>
</pre>
</div>
</div>
<!-- ######## -->
<!-- Options -->
<!-- ######## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Options</h4>
<table class="striped">
<thead>
<tr>
<th>Option Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>induration</td>
<td>The duration of the transition enter in milliseconds. Default: 300</td>
</tr>
<tr>
<td>outduration</td>
<td>The duration of the transition out in milliseconds. Default: 225</td>
</tr>
<tr>
<td>constrainwidth</td>
<td>If true, constrainWidth to the size of the dropdown activator. Default: true</td>
</tr>
<tr>
<td>hover</td>
<td>If true, the dropdown will open on hover. Default: false</td>
</tr>
<tr>
<td>gutter</td>
<td>This defines the spacing from the aligned edge. Default: 0</td>
</tr>
<tr>
<td>beloworigin</td>
<td>If true, the dropdown will show below the activator. Default: false</td>
</tr>
<tr>
<td>alignment</td>
<td>Defines the edge the menu is aligned to. Default: 'left'</td>
</tr>
</tbody>
</table>
<p>To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below. </p>
<pre>
<code class="language-markup">
<a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
</code>
</pre>
</div>
</div>
<!-- ############################ -->
<!-- jQuery Plugin Initialization -->
<!-- ############################ -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">jQuery Plugin Initialization</h4>
<p>Initialization for dropdowns is only necessary if you create them dynamically.</p>
<pre>
<code class="language-markup">
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
});
</code>
</pre>
</div>
</div>
</section>