BernardoWaldhelm/vtex-home-page
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

corrigindo erro de abrir subcategorias mobile

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-07 20:58:46 -03:00
parent ee9f332933
commit 8d6065d95d
3 changed files with 134 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/arquivos/js/app/partials/Menu.js
View File

@ -35,7 +35,10 @@ export default class Menu {
event.preventDefault();
const link = $(event.target);
link.siblings(".submenu").addClass("isOpen"); //siblings pega os irmãos
link.parents(".main-menu__department")
.find(".submenu")
.addClass("isOpen"); // find pega os filhos
// link.siblings(".submenu").addClass("isOpen"); //siblings pega os irmãos, geraria um erro ao clicar na seta
}
closeSubmenu(events) {

7
src/arquivos/sass/partials/_menu.scss
View File

@ -122,14 +122,15 @@
font-size: 12px;
line-height: 15px;
color: $white;
//display: flex;
align-items: center;
justify-content: space-between;
@include mq(lg, max) {
width: 100%;
padding: 20px 16px;
color: $black;
display: flex;
align-items: center;
justify-content: space-between;
}
@include mq(lg, min) {

126
src/controles-customizados/menuPrincipal.html
View File

@ -90,12 +90,138 @@
LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow"></i>
</a>
<div class="submenu">
<button class="submenu__return-button">
<i class="sprite sprite-submenu-back-arrow"></i>
VOLTAR
</button>
<div class="container">
<h2 class="submenu__title">LOREM IPSUM 02</h2>
<div class="submenu__categories-wrapper">
<ul class="submenu__categories">
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
</ul>
<ul class="submenu__categories">
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
</ul>
</div>
<a class="submenu__see-all" href="http://">
VER TODOS
<i class="sprite sprite-menu-arrow-icon"></i>
</a>
</div>
</div>
</li>
<li class="main-menu__department">
<a class="main-menu__department__link" href="#" title="LOREM IPSUM">
LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow"></i>
</a>
<div class="submenu">
<button class="submenu__return-button">
<i class="sprite sprite-submenu-back-arrow"></i>
VOLTAR
</button>
<div class="container">
<h2 class="submenu__title">LOREM IPSUM 03</h2>
<div class="submenu__categories-wrapper">
<ul class="submenu__categories">
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
</ul>
<ul class="submenu__categories">
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a href="#" class="submenu__category__link"
>Lorem Ipsum</a
>
</li>
</ul>
</div>
<a class="submenu__see-all" href="http://">
VER TODOS
<i class="sprite sprite-menu-arrow-icon"></i>
</a>
</div>
</div>
</li>
</ul>