Código de Personalização

[Menu Mobile]

Local da Publicação: Cabeçalho

Páginas da Publicação: Todas as Páginas

Cascade Stule Sheet (CSS)

Obs: Primeira parte do código altera as core da estrutura

body {

--corLinkPrincipal: #fff;

--corLinks: #bebaab;

--corLinksNivelTres: #FFFFFF;

--backgroundMenuLateral: rgba(0, 0, 0, 0.95);

--botaoFecharMenu: #FFFFFF;

--botaoFecharMenuCorX: #000000;

--corIconeMenu: #FFFFFF;

@media (max-width: 767.98px) {

#cabecalho .atalhos-mobile {

display: block !important;

#cabecalho .atalhos-mobile ul {

display: flex;

justify-content: flex-end;

#cabecalho .atalhos-mobile ul li {

float: none;

margin: 0;

#cabecalho .atalhos-mobile ul li:first-child {

display: flex;

margin-right: auto;

#cabecalho .atalhos-mobile ul li.fundo-principal {

 order: 3;

#cabecalho .atalhos-mobile ul li.menu-button {

display: flex;

align-items: center;

#cabecalho .atalhos-mobile ul li.menu-button a {

top: 0;

#cabecalho .atalhos-mobile ul li.menu-button a svg * {

color: var(--corIconeMenu);

.busca {

margin: 0;

.menu.superior {

position: relative;

.menu.superior .closeMenuButton {

position: absolute;

top: 16px;

right: 0;

background-color: var(--botaoFecharMenu);

width: 32px;

height: 32px;

display: flex;

justify-content: center;

align-items: center;

border-radius: 50% 0 0 50%;

.menu.superior .closeMenuButton:before {

content: "X";
 color: var(--botaoFecharMenuCorX);

.menu.superior > ul {

margin: 0 !important;

padding: 16px 32px 16px 0;

border: 0;

display: flex !important;

flex-direction: column;

position: fixed;

top: 0;

left: 0;

z-index: 9999;

background: var(--backgroundMenuLateral);

height: 100vh;

overflow-y: scroll;

max-height: 100vh;

box-sizing: border-box;

max-width: 100vw;

transition: 0.3s ease-in-out all;

transform: translateX(-110%);

-ms-overflow-style: none;

/* IE and Edge */

scrollbar-width: none;

/* Firefox */

.menu.superior > ul ::-webkit-scrollbar {

display: none;

.menu.superior > ul.active {

transform: translateX(0);

.menu.superior > ul a {

color: var(--corLinks);

}
 .menu.superior > ul a strong {

color: var(--corLinkPrincipal);

.menu.superior .nivel-tres {

display: block !important;

position: initial;

background: transparent;

left: initial;

max-width: 70vw;

box-sizing: border-box;

.menu.superior .nivel-tres a {

white-space: normal;

line-height: normal;

margin-bottom: 0.5rem;

color: var(--corLinksNivelTres);

.menu.superior .nivel-tres a:before {

content: "-";

margin-right: 0.25rem;

margin-left: -0.75rem;

/*# sourceMappingURL=style.css.map */
Código Menu Mobile

Local da Publicação: Rodapé

Páginas da Publicação: Todas as Páginas

JavaScript

document.addEventListener("DOMContentLoaded", function (event) {

const iconAtalhoMenu = document.querySelector(".atalho-menu");

const iconMenuSVG =

'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-
menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3"
y1="18" x2="21" y2="18"></line></svg>';

iconAtalhoMenu.insertAdjacentHTML("afterbegin", iconMenuSVG);

iconAtalhoMenu.classList.remove("icon-th", "botao", "principal");

const ulAtalhosMobile = document.querySelector(".atalhos-mobile ul");

const newItemSideMenu = document.createElement("li");

newItemSideMenu.classList.add("menu-button");

ulAtalhosMobile.prepend(newItemSideMenu);

newItemSideMenu.append(iconAtalhoMenu);

const menuLateral = document.querySelector(".menu.superior > ul");

const closeMenuButton = document.createElement("button");

closeMenuButton.classList.add("closeMenuButton");

menuLateral.append(closeMenuButton);

closeMenuButton.onclick = () => {

menuLateral.classList.remove("active");

};

});