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

feat: adiciona js de funcionamento so do menu mobile

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -79,12 +79,120 @@
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM <a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i> <i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a> </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>
<li class="main-menu__department"> <li class="main-menu__department">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM <a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i> <i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a> </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> </li>
</ul> </ul>