PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.3.9
Easy Elements for Elementor – Addons & Website Templates v1.3.9
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.3.9, at widgets/vertical-menu/css/vertical-menu.css

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