UNPKG

5.13 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/right.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 right">
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 <main>
150 <h1>
151 zeynep<span>js</span>
152 </h1>
153
154 <p class="lead">A lightweight multi-level jQuery side menu plugin.</p>
155
156 <button type="button" class="btn-open first">Open!</button>
157 </main>
158
159 <div class="zeynep-overlay"></div>
160
161 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
162 <script src="../dist/zeynep.js"></script>
163
164 <script>
165 $(function() {
166 // init zeynepjs side menu
167 var zeynep = $('.zeynep').zeynep({
168 opened: function () {
169 // log
170 console.log('the side menu opened')
171 },
172 closed: function () {
173 // log
174 console.log('the side menu closed')
175 }
176 })
177
178 // dynamically bind 'closing' event
179 zeynep.on('closing', function () {
180 // log
181 console.log('this event is dynamically binded')
182 })
183
184 // handle zeynepjs overlay click
185 $('.zeynep-overlay').on('click', function () {
186 zeynep.close()
187 })
188
189 // open zeynepjs side menu
190 $('.btn-open').on('click', function () {
191 zeynep.open()
192 })
193 })
194 </script>
195
196 </body>
197</html>