feat: adiciona js de funcionamento so do menu mobile

This commit is contained in:
Cainã Milech 2022-12-07 18:26:26 -03:00
parent 93d69b5d98
commit 2a9dfc2716
2 changed files with 115 additions and 1 deletions

View File

@ -1,3 +1,5 @@
import { isSmallerThen991 } from "Helpers/MediasMatch";
export default class Menu {
constructor() {
this.selectors();
@ -15,8 +17,12 @@ export default class Menu {
events() {
this.openMenuButton.click(this.openMenu.bind(this));
this.closeMenuButton.click(this.closeMenu.bind(this));
this.departmentLink.click(this.openSubmenu.bind(this));
this.returnButton.click(this.closeSubmenu.bind(this));
if (isSmallerThen991) {
this.departmentLink.click(this.openSubmenu.bind(this));
}
}
openMenu() {

View File

@ -79,12 +79,120 @@
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">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 02</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">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">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 03</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>
</ul>