forked from M3-Academy/vtex-cms-template-atualizado
feat(home): Cria a logica de funcionamento do menu mobile
This commit is contained in:
parent
0cf7b50c8a
commit
cdb526203d
@ -1,38 +1,47 @@
|
||||
import { isSmallerThen991 } from "Helpers/MediasMatch";
|
||||
|
||||
export default class Menu {
|
||||
constructor() {
|
||||
this.toggleMenuMobile();
|
||||
this.toggleSubCategories();
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
|
||||
toggleMenuMobile() {
|
||||
$("#open-menu-button, .show-menu .option").on("click", function () {
|
||||
$(".menu-principal").addClass("mobile-open");
|
||||
$("header.header").addClass("menu-mobile-open");
|
||||
});
|
||||
|
||||
$("#close-menu-button").on("click", function () {
|
||||
$(".menu-principal").removeClass("mobile-open");
|
||||
$("header.header").removeClass("menu-mobile-open");
|
||||
});
|
||||
selectors() {
|
||||
this.openMenuButton = $(".menu__button");
|
||||
this.mainMenu = $(".main-menu");
|
||||
this.closeMenuButton = $(".menu-header__close-button");
|
||||
this.departmentLink = $(".main-menu__department-link");
|
||||
this.returnButton = $(".submenu__return-button");
|
||||
}
|
||||
|
||||
toggleSubCategories() {
|
||||
$(".m3-dropdown > button").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
events() {
|
||||
this.openMenuButton.click(this.openMenu.bind(this));
|
||||
this.closeMenuButton.click(this.closeMenu.bind(this));
|
||||
this.returnButton.click(this.closeSubMenu.bind(this));
|
||||
|
||||
if ($(this).parent().hasClass("sub-menu-open")) {
|
||||
$(this).parent().removeClass("sub-menu-open");
|
||||
} else {
|
||||
$(this).parent().siblings().removeClass("sub-menu-open");
|
||||
$(this).parent().addClass("sub-menu-open");
|
||||
}
|
||||
if (isSmallerThen991) {
|
||||
this.departmentLink.click(this.openSubMenu.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
|
||||
});
|
||||
openMenu() {
|
||||
this.mainMenu.addClass("is-open");
|
||||
}
|
||||
|
||||
$(".m3-dropdown .btn-voltar").on("click", function () {
|
||||
$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
|
||||
$(this).parents("ul.itens").removeClass("has-sub-menu-open");
|
||||
});
|
||||
closeMenu() {
|
||||
this.mainMenu.removeClass("is-open");
|
||||
}
|
||||
|
||||
openSubMenu(event) {
|
||||
event.preventDefault();
|
||||
const link = $(event.target);
|
||||
|
||||
link.siblings(".submenu").addClass("is-open");
|
||||
}
|
||||
|
||||
closeSubMenu(event) {
|
||||
const button = $(event.target);
|
||||
|
||||
button.parents(".submenu").removeClass("is-open");
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__top-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -62,6 +66,11 @@
|
||||
transform: translateX(-100%);
|
||||
z-index: map-get($z-index, Level-5);
|
||||
background: $color-white;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&__departments {
|
||||
@ -131,6 +140,12 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__account-link {
|
||||
@ -143,6 +158,10 @@
|
||||
color: $color-white;
|
||||
background: $color-black;
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 16px;
|
||||
}
|
||||
@ -160,6 +179,7 @@
|
||||
overflow: auto;
|
||||
padding-bottom: 34px;
|
||||
background: $color-white;
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@include mq(lg, min) {
|
||||
@ -175,6 +195,10 @@
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -204,6 +228,10 @@
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
|
||||
@include mq(lg, min) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@ -83,6 +83,59 @@
|
||||
LOREM IPSUM
|
||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||
</a>
|
||||
|
||||
<div class="submenu">
|
||||
<button class="submenu__return-button">
|
||||
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||
VOLTAR
|
||||
</button>
|
||||
<div class="container">
|
||||
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||
|
||||
<div class="submenu__categories-wrapper">
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="submenu__see-all" href="#">
|
||||
VER TODOS
|
||||
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="main-menu__department">
|
||||
@ -90,48 +143,58 @@
|
||||
LOREM IPSUM
|
||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<div class="submenu">
|
||||
<button class="submenu__return-button">
|
||||
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||
VOLTAR
|
||||
</button>
|
||||
<div class="container">
|
||||
<h2 class="submenu__title">LOREM IPSUM</h2>
|
||||
|
||||
<li class="main-menu__department">
|
||||
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
|
||||
LOREM IPSUM
|
||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<div class="submenu__categories-wrapper">
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</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-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</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-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</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-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<li class="main-menu__department">
|
||||
<a class="main-menu__department-link" href="#" title="LOREM IPSUM">
|
||||
LOREM IPSUM
|
||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||
</a>
|
||||
</li>
|
||||
<ul class="submenu__categories">
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</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-icon"></i>
|
||||
</a>
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
|
||||
<li class="submenu__category">
|
||||
<a class="submenu__category-link" href="#">Lorem Ipsum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a class="submenu__see-all" href="#">
|
||||
VER TODOS
|
||||
<i class="sprite sprite-menu-arrow-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user