-
Notifications
You must be signed in to change notification settings - Fork 46
/
js_sidenav.html
169 lines (144 loc) · 5.83 KB
/
js_sidenav.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
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
---
layout: admin
title: Javascript - SideNav
section: js
module: js_sidenav
header:
icon: more_vert
title: SideNav
description: This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component. If you want to see a demo, our sidebar will use this on smaller screens. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.
---
<section id="js_sidenav">
<!-- ############## -->
<!-- HTML Structure -->
<!-- ############## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">HTML Structure</h4>
<pre>
<code class="language-markup">
<nav>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
</code>
</pre>
<h5 class="margin-top-35">jQuery Plugin Initialization</h5>
<pre>
<code class="language-javascript">
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
</code>
</pre>
<h5 class="margin-top-35">Options</h5>
<p>You can customize the sideNav by setting your own width and the alignment of the menu.</p>
<pre>
<code class="language-javascript">
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
</code>
</pre>
<h5 class="margin-top-35">jQuery Plugin Methods</h5>
<p>We have methods to show and hide your sidebar you can use to programmatically control your sidebar.</p>
<pre>
<code class="language-javascript">
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
</code>
</pre>
</div>
</div>
<!-- ########## -->
<!-- Variations -->
<!-- ########## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Variations</h4>
<h5>Dropdown HTML Structure</h5>
<pre>
<code class="language-markup">
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</code>
</pre>
<h5 class="margin-top-35">Fullscreen HTML Structure</h5>
<p>If you want the menu to be accessible on all screensizes you just have to add a simple helper class <code class="language-markup">show-on-large</code> to the <code class="language-markup">.button-collapse</code>. </p>
<pre>
<code class="language-markup">
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
</code>
</pre>
<h5 class="margin-top-35">Fixed HTML Structure</h5>
<p>Add the class <code class="language-markup">fixed</code> to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.</p>
<pre>
<code class="language-markup">
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</code>
</pre>
<p>If you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.</p>
<pre>
<code class="language-css">
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
</code>
</pre>
</div>
</div>
</section>