UNPKG

6.41 kBHTMLView Raw
1<!DOCTYPE html>
2<html dir="ltr" lang="en">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
6
7 <!-- styles -->
8 <link href="https://fonts.googleapis.com/css?family=Montserrat:200,400,700&display=swap" rel="stylesheet"/>
9 <link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet"/>
10 <link href="../dist/zeynep.css" rel="stylesheet"/>
11 <link href="./css/base.css" rel="stylesheet"/>
12 <link href="./css/left.css" rel="stylesheet"/>
13
14 <title>zeynepjs - A lightweight multi-level jQuery side menu plugin</title>
15 </head>
16
17 <body>
18
19 <div class="zeynep first" data-menu-name="first">
20 <ul>
21 <li>
22 <a href="#">Home</a>
23 </li>
24
25 <li class="has-submenu">
26 <a href="#" data-submenu="stores">Stores</a>
27
28 <div id="stores" class="submenu">
29 <div class="submenu-header">
30 <a href="#" data-submenu-close="stores">Main Menu</a>
31 </div>
32
33 <label>Stores</label>
34
35 <ul>
36 <li>
37 <a href="#">Istanbul</a>
38 </li>
39
40 <li>
41 <a href="#">Mardin</a>
42 </li>
43
44 <li>
45 <a href="#">Amed</a>
46 </li>
47 </ul>
48 </div>
49 </li>
50
51 <li class="has-submenu">
52 <a href="#" data-submenu="categories">Categories</a>
53
54 <div id="categories" class="submenu">
55 <div class="submenu-header">
56 <a href="#" data-submenu-close="categories">Main Menu</a>
57 </div>
58
59 <label>Categories</label>
60
61 <ul>
62 <li class="has-submenu">
63 <a href="#" data-submenu="electronics">Electronics</a>
64
65 <div id="electronics" class="submenu">
66 <div class="submenu-header">
67 <a href="#" data-submenu-close="electronics">Categories</a>
68 </div>
69
70 <label>Electronics</label>
71
72 <ul>
73 <li>
74 <a href="#">Camera & Photo</a>
75 </li>
76
77 <li>
78 <a href="#">Home Audio</a>
79 </li>
80
81 <li>
82 <a href="#">Tv & Video</a>
83 </li>
84
85 <li>
86 <a href="#">Computers & Accessories</a>
87 </li>
88
89 <li>
90 <a href="#">Car & Vehicle Electronics</a>
91 </li>
92
93 <li>
94 <a href="#">Portable Audio & Video</a>
95 </li>
96
97 <li>
98 <a href="#">Headphones</a>
99 </li>
100
101 <li>
102 <a href="#">Accessories & Supplies</a>
103 </li>
104
105 <li>
106 <a href="#">Video Projectors</a>
107 </li>
108
109 <li>
110 <a href="#">Office Electronics</a>
111 </li>
112
113 <li>
114 <a href="#">Wearable Technology</a>
115 </li>
116
117 <li>
118 <a href="#">Service Plans</a>
119 </li>
120 </ul>
121 </div>
122 </li>
123
124 <li>
125 <a href="#">Books</a>
126 </li>
127
128 <li>
129 <a href="#">Video Games</a>
130 </li>
131
132 <li>
133 <a href="#">Computers</a>
134 </li>
135 </ul>
136 </div>
137 </li>
138
139 <li>
140 <a href="#">Contact</a>
141 </li>
142
143 <li>
144 <a href="#">About</a>
145 </li>
146 </ul>
147 </div>
148
149 <div class="zeynep second" data-menu-name="second">
150 <ul>
151 <li class="has-submenu">
152 <a href="#" data-submenu="support">Support</a>
153
154 <div id="support" class="submenu">
155 <div class="submenu-header">
156 <a href="#" data-submenu-close="support">Support</a>
157 </div>
158
159 <label>Get Support</label>
160
161 <ul>
162 <li>
163 <a href="#">Billing Support</a>
164 </li>
165
166 <li>
167 <a href="#">Sales Support</a>
168 </li>
169
170 <li>
171 <a href="#">Technical Support</a>
172 </li>
173 </ul>
174 </div>
175 </li>
176
177 <li>
178 <a href="#">Create a ticket</a>
179 </li>
180
181 <li>
182 <a href="#">Send feedback</a>
183 </li>
184 </ul>
185 </div>
186
187 <main>
188 <h1>
189 zeynep<span>js</span>
190 </h1>
191
192 <p class="lead">A lightweight multi-level jQuery side menu plugin.</p>
193
194 <button type="button" class="btn-open first">Open first!</button>
195 <button type="button" class="btn-open second">Try second!</button>
196 </main>
197
198 <div class="zeynep-overlay"></div>
199
200 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
201 <script src="../dist/zeynep.js"></script>
202
203 <script>
204 $(function() {
205 // loop all zeynepjs menus for initialization
206 $('.zeynep').each(function () {
207 // init zeynepjs side menu
208 $(this).zeynep({
209 opened: function (el) {
210 // log
211 console.log(el.attr('data-menu-name') + ' side menu opened')
212 },
213 closed: function (el) {
214 // log
215 console.log(el.attr('data-menu-name') + ' side menu closed')
216 }
217 })
218 })
219
220 // handle zeynepjs overlay click
221 $('.zeynep-overlay').on('click', function () {
222 // close all zeynepjs menus
223 $('.zeynep.opened').each(function () {
224 $(this).data('zeynep').close()
225 })
226 });
227
228 // open first zeynepjs side menu
229 $('.btn-open.first').on('click', function () {
230 $('.zeynep.first').data('zeynep').open();
231 });
232
233 // open second zeynepjs side menu
234 $('.btn-open.second').on('click', function () {
235 $('.zeynep.second').data('zeynep').open();
236 });
237 });
238 </script>
239
240 </body>
241</html>