PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.4.5
Easy Elements for Elementor – Addons & Website Templates v1.4.5
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / vertical-menu / css / vertical-menu.css

vertical-menu.css in Easy Elements for Elementor – Addons & Website Templates 1.4.5, at widgets/vertical-menu/css/vertical-menu.css

503 lines 13.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --primaryColor: #DF0A0A;
3 --titleColor: #0a0a0a;
4 }
5
6 .eel-vertical-menu-area ul.eel-vertical-verticalmenu {
7 list-style: none;
8 margin: 0;
9 padding: 0;
10 }
11 .eel-vertical-menu-area ul.eel-vertical-verticalmenu > .menu-item .submenu-parent-icon svg {
12 height: 12px;
13 margin-left: 5px;
14 fill: currentColor;
15 }
16 .eel-vertical-menu-area ul.eel-vertical-verticalmenu > .menu-item .menu-link {
17 display: block;
18 padding: 15px 22px;
19 background: #f3f3f3;
20 margin: 0 0 5px;
21 color: #010101;
22 transition: all 0.3s ease-in-out;
23 }
24 .eel-vertical-menu-area ul.eel-vertical-verticalmenu ul.sub-menu {
25 padding-left: 0;
26 }
27 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu > .menu-item .menu-link {
28 position: relative;
29 }
30 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu > .menu-item .menu-link .pointer-underline {
31 content: "";
32 position: absolute;
33 width: 0%;
34 height: 2px;
35 left: 0;
36 bottom: 0;
37 transition: all 0.3s ease-in-out;
38 }
39 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu > .menu-item .menu-link:hover .pointer-underline {
40 width: 100%;
41 }
42 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu li.easyel_vertical_menu:not(.eel-position-relative) {
43 position: static;
44 }
45 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .eel-position-relative ul.eel-vertical-menu-content-part {
46 width: 600px;
47 }
48 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children {
49 position: relative;
50 }
51 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children.has-full-width-vertical-menu {
52 position: static;
53 }
54 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children.eel-vertical_menu {
55 position: static;
56 }
57 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel_click) {
58 opacity: 0;
59 transition: 0.3s ease-in-out;
60 position: absolute;
61 z-index: 9;
62 list-style: none;
63 display: block !important;
64 top: 0;
65 left: 100%;
66 }
67 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel_click):not(.eel-vertical-menu-content-part) {
68 width: 250px;
69 }
70 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel_click).eel-vertical-menu-content-part {
71 left: 0;
72 right: 0;
73 padding: 0;
74 margin: 0 auto;
75 }
76 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel_click) .menu-item-has-children .menu-text {
77 display: flex;
78 justify-content: space-between;
79 }
80 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel_click) .menu-item-has-children .sub-menu {
81 top: 0;
82 left: 100%;
83 }
84 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu.eel_click {
85 opacity: 1;
86 transition: 0.3s ease-in-out;
87 z-index: 9;
88 list-style: none;
89 }
90 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu.eel_click .menu-item-has-children .menu-text {
91 display: flex;
92 justify-content: space-between;
93 }
94 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .menu-link .submenu-parent-icon svg {
95 height: 12px;
96 margin-left: 5px;
97 fill: currentColor;
98 }
99 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children.menu-item-has-children:hover > .sub-menu:not(.eel_click) {
100 display: block;
101 opacity: 1;
102 }
103 .eel-vertical-menu-area .eel-menu-desc {
104 font-size: 12px;
105 display: block;
106 }
107
108 .eel-vertical-menu-area .eel-vertical-verticalmenu .menu-item-has-children {
109 position: relative;
110 }
111
112 .eel-vertical-menu-area .eel-vertical-verticalmenu .sub-menu:not(.eel_click) {
113 position: absolute;
114 top: 0;
115 left: 100%;
116 width: 250px;
117 z-index: 99;
118 opacity: 0;
119 visibility: hidden;
120 transition: 0.3s ease-in-out;
121 display: block !important;
122 }
123
124 .eel-vertical-menu-area .eel-vertical-verticalmenu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu:not(.eel_click) {
125 top: 0;
126 left: 100%;
127 }
128
129 .eel-vertical-menu-area .eel-vertical-verticalmenu .menu-item-has-children:hover > .sub-menu:not(.eel_click),
130 .eel-vertical-menu-area .eel-vertical-verticalmenu .sub-menu .menu-item-has-children:hover > .sub-menu:not(.eel_click) {
131 opacity: 1;
132 visibility: visible;
133 }
134
135 .eel-vertical-menu-area ul.eel-vertical-verticalmenu ul.sub-menu:not(.eel_click) {
136 padding-left: 0;
137 overflow: visible;
138 }
139
140 .eel-vertical-menu-area .submenu-parent-icon {
141 width: 20px;
142 }
143
144 .elementor-widget-eel-vertical-navigation,
145 .eel-vertical-menu-elelmentor-widget.eel-vertical-menu-area {
146 width: 100%;
147 }
148
149 .eel-vertical-menu-area .eel-vertical-verticalmenu .sub-menu.sub-menu.eel_click {
150 max-height: 0;
151 opacity: 0;
152 overflow: hidden;
153 transition: max-height 0.4s ease, opacity 0.3s ease;
154 }
155
156 .eel-vertical-menu-area ul.eel-vertical-verticalmenu ul.sub-menu.eel_click {
157 padding-left: 15px;
158 }
159
160 .eel-vertical-menu-wrap ul.eel_animation_slide_down.eel-vertical-verticalmenu .menu-item-has-children .sub-menu {
161 transform: scaleY(0);
162 transform-origin: top;
163 }
164
165 .eel-vertical-menu-wrap ul.eel_animation_slide_up.eel-vertical-verticalmenu .menu-item-has-children .sub-menu {
166 transform: translateY(10px);
167 }
168
169 .eel-vertical-menu-wrap ul.eel_animation_right.eel-vertical-verticalmenu .menu-item-has-children .sub-menu {
170 transform: translateX(10px);
171 }
172
173 .eel-vertical-menu-wrap ul.eel_animation_left.eel-vertical-verticalmenu .menu-item-has-children .sub-menu {
174 transform: translateX(-10px);
175 }
176
177 .eel-vertical-menu-wrap ul.eel_animation_zoom.eel-vertical-verticalmenu .menu-item-has-children .sub-menu {
178 transform: scale(0.8);
179 transition: transform 0.3s ease, opacity 0.3s ease;
180 }
181
182 .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu.eel_animation_slide_down li.menu-item-has-children:hover > .sub-menu {
183 transform: scaleY(1);
184 }
185
186 .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu.eel_animation_slide_up .menu-item-has-children:hover > .sub-menu {
187 transform: translateY(0px);
188 }
189
190 .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu.eel_animation_right .menu-item-has-children:hover > .sub-menu {
191 transform: translateY(0px);
192 }
193
194 .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu.eel_animation_left .menu-item-has-children:hover > .sub-menu {
195 transform: translateY(0px);
196 }
197
198 .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu.eel_animation_zoom .menu-item-has-children:hover > .sub-menu {
199 transform: scale(1);
200 }
201
202 .eel-vertical-menu-area .eel-vertical-menu-wrap .eel_click.eel_position_fixed .menu-item-has-children ul.sub-menu {
203 position: absolute;
204 padding-left: 0;
205 width: 100%;
206 }
207
208 .eel-vertical-menu-area .eel-vertical-menu-wrap .eel_click.eel_position_fixed .menu-item-has-children ul.sub-menu ul {
209 position: relative;
210 }
211
212 .eel-vertical-menu-area .eel-vertical-menu-wrap .eel_click.eel_position_fixed .menu-item-has-children ul.sub-menu ul li a span {
213 padding-left: 15px;
214 }
215
216 .eel-vertical-menu-area .eel_click.eel_position_fixed .menu-item .menu-link {
217 margin: 0;
218 }
219
220 body:not(.elementor-editor-active).eel-vertical-menu-icon-mobile {
221 position: absolute;
222 top: 50%;
223 transform: translateY(-50%);
224 right: 0;
225 line-height: 0;
226 cursor: pointer;
227 }
228
229 .eel-vertical-menu-icon-mobile {
230 width: 21px;
231 height: 20px;
232 display: none;
233 cursor: pointer;
234 }
235
236 .sidebar-on-mobile-vertical-nav {
237 position: relative;
238 }
239 .sidebar-on-mobile-vertical-nav .eel-nav-menu-icon {
240 position: absolute;
241 top: 50%;
242 transform: translateY(-50%);
243 right: 0;
244 line-height: 0;
245 cursor: pointer;
246 }
247 .sidebar-on-mobile-vertical-nav .eel-nav-menu-icon svg {
248 width: 21px;
249 height: 20px;
250 }
251
252 .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .menu-link .submenu-parent-icon svg {
253 transition: all 0.3s ease-in-out;
254 }
255
256 .eel-vertical-menu-area .eel-vertical-menu-wrap .eel-vertical-verticalmenu.eel_hover .menu-item-has-children:hover > .menu-link .submenu-parent-icon svg {
257 transform: rotate(-90deg);
258 }
259
260 .eel-vertical-menu-area .eel-vertical-verticalmenu.eel_click .menu-item-has-children > .eel-vertical-open .submenu-parent-icon {
261 transform: rotate(180deg);
262 }
263
264 .parant-eel-vertical-static,
265 .elementor-widget-eel-vertical-navigation {
266 position: static;
267 }
268
269 .eel-vertical-menu-area ul.eel-vertical-verticalmenu > .menu-item.menu-item-has-children .eel-menu-text {
270 display: flex;
271 align-items: center;
272 justify-content: space-between;
273 }
274
275 .eel-menu-text {
276 display: flex;
277 align-items: center;
278 }
279
280 .eel-menu-before-icon,
281 .eel-menu-after-icon {
282 display: inline-flex;
283 align-items: center;
284 line-height: 1;
285 }
286 .eel-menu-before-icon svg,
287 .eel-menu-after-icon svg {
288 height: 1em;
289 width: 1em;
290 fill: currentColor;
291 }
292
293 .eel-menu-before-icon {
294 margin-right: 8px;
295 }
296
297 .eel-menu-after-icon {
298 margin-left: auto;
299 padding-left: 8px;
300 }
301
302 .eel-icon-show-active .eel-menu-before-icon,
303 .eel-icon-show-active .eel-menu-after-icon {
304 display: none;
305 }
306
307 .eel-icon-show-active .menu-item.current-menu-item > a .eel-menu-before-icon,
308 .eel-icon-show-active .menu-item.current-menu-item > a .eel-menu-after-icon,
309 .eel-icon-show-active .menu-item.current-menu-ancestor > a .eel-menu-before-icon,
310 .eel-icon-show-active .menu-item.current-menu-ancestor > a .eel-menu-after-icon,
311 .eel-icon-show-active .menu-item.current_page_item > a .eel-menu-before-icon,
312 .eel-icon-show-active .menu-item.current_page_item > a .eel-menu-after-icon {
313 display: inline-flex;
314 }
315
316 .eel-vertical-menu-area ul.eel-vertical-verticalmenu .eel-menu-badge {
317 position: absolute;
318 top: 0px;
319 right: 0px;
320 background: #df0a0a;
321 border-radius: 20px 20px 20px 0;
322 padding: 0px 10px 2px;
323 color: #fff;
324 font-size: 12px;
325 display: block;
326 font-weight: 400;
327 }
328
329 .eel-vertical-menu-wrap {
330 position: relative;
331 }
332
333 .sidebar-on-mobile-vertical-nav ul.sub-menu {
334 display: none;
335 }
336
337 .sidebar-on-mobile-vertical-nav .sub-menu {
338 max-height: 100% !important;
339 opacity: 1 !important;
340 }
341
342 .sidebar-on-mobile-vertical-nav .eel-menu-desc {
343 display: block;
344 }
345
346 .eel-menu-text-inner > i {
347 margin-right: 6px;
348 }
349
350 .sidebar-on-mobile-vertical-nav {
351 position: fixed;
352 top: 0;
353 right: 0;
354 max-width: 420px;
355 width: 100%;
356 height: 100vh;
357 background: #fff;
358 transition: transform 0.3s ease;
359 z-index: 9999;
360 padding: 60px 34px 40px 34px;
361 overflow-y: auto;
362 display: grid;
363 }
364 .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close {
365 position: absolute;
366 right: 20px;
367 top: 20px;
368 font-size: 25px;
369 border: 1px solid rgba(0, 0, 0, 0.0392156863);
370 border-radius: 100%;
371 display: inline-grid;
372 place-content: center;
373 line-height: 36px;
374 width: 36px;
375 height: 36px;
376 cursor: pointer;
377 z-index: 999;
378 color: #121212;
379 }
380 .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close svg {
381 height: 1em;
382 width: 1em;
383 }
384 .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu {
385 margin: 0;
386 padding: 0;
387 list-style: none;
388 }
389 .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu .submenu-parent-icon {
390 position: absolute;
391 right: 0;
392 top: 14px;
393 margin: 0;
394 cursor: pointer;
395 width: 20px;
396 height: 20px;
397 line-height: 20px;
398 text-align: center;
399 }
400 .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu .submenu-parent-icon svg {
401 height: 14px;
402 margin-left: 0;
403 fill: currentColor;
404 }
405 .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu > li {
406 margin: 0;
407 padding: 10px 0;
408 list-style: none;
409 position: relative;
410 }
411 .sidebar-on-mobile-vertical-nav ul.eel-vertical-verticalmenu > .menu-item.menu-item-has-children .eel-menu-text {
412 display: flex;
413 align-items: center;
414 justify-content: space-between;
415 }
416 .sidebar-on-mobile-vertical-nav ul.eel-vertical-verticalmenu .eel-menu-badge {
417 position: absolute;
418 top: -7px;
419 background: #df0a0a;
420 border-radius: 10px 10px 10px 0;
421 padding: 0px 8px 2px;
422 color: #fff;
423 font-size: 12px;
424 display: block;
425 font-weight: 400;
426 left: 110%;
427 }
428
429 .sidebar-on-mobile-vertical-nav ul li a .submenu-parent-icon {
430 display: none;
431 }
432
433 .sidebar-on-mobile-vertical-nav.eel-mobile-open-position-top {
434 transform: scaleY(0);
435 transform-origin: top;
436 max-width: 100%;
437 }
438
439 .sidebar-on-mobile-vertical-nav.eel-mobile-open-position-top.easyel-open {
440 transform: scaleY(1);
441 }
442
443 .sidebar-on-mobile-vertical-nav.eel-mobile-open-position-right {
444 transform: translateX(100%);
445 }
446
447 .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu > li > a {
448 position: relative;
449 display: inline-block;
450 }
451
452 body.logged-in .sidebar-on-mobile-vertical-nav {
453 padding: 80px 34px 40px 34px;
454 }
455 body.logged-in .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close {
456 top: 50px;
457 }
458
459 .sidebar-on-mobile-vertical-nav.eel-mobile-open-position-right.easyel-open {
460 transform: translateX(0);
461 }
462
463 .sidebar-on-mobile-vertical-nav ul.sub-menu:not(.eel-vertical-menu-content-part) {
464 list-style: none;
465 padding-left: 20px;
466 padding-top: 14px;
467 }
468 .sidebar-on-mobile-vertical-nav ul.sub-menu:not(.eel-vertical-menu-content-part) li {
469 padding-bottom: 8px;
470 position: relative;
471 }
472 .sidebar-on-mobile-vertical-nav ul.sub-menu:not(.eel-vertical-menu-content-part) .submenu-parent-icon {
473 top: 5px;
474 }
475
476 .sidebar-on-mobile-vertical-nav ul.sub-menu.eel-vertical-menu-content-part {
477 padding: 0;
478 margin: 0;
479 }
480
481 .sidebar-on-mobile-vertical-nav ul.sub-menu.eel-sub-open {
482 display: block;
483 }
484
485 .sidebar-on-mobile-vertical-nav .unicon-chevron-down {
486 display: inline-grid !important;
487 height: 30px;
488 width: 30px;
489 cursor: pointer;
490 position: absolute;
491 right: 0;
492 place-content: center;
493 color: #121212;
494 top: 7px;
495 transition: transform 0.3s ease;
496 }
497 .sidebar-on-mobile-vertical-nav .unicon-chevron-down.active {
498 transform: rotate(180deg);
499 }
500
501 .eel-single-nav-list.eel-single-nav-list-mobile li a {
502 padding: 10px 0;
503 }