Gostaria de saber como faço pra trocar aquele ícone do menu lateral na página Movel, existe alguma forma? Gostaria de algo mais com cara de menu
Boa noite,
Da uma olhada nesse tópico…
Pode ser que ajude.
2 curtidas
Olá! Também gostaria de mudar o menu lateral para o lado esquerdo( visualização celular). Por gentileza pode me dar o passo a passo?
boa noite,
tem que adicionar em inserir html
todas as paginas
rodapé
css
body {
--corLinkPrincipal: #fff;
--corLinks: #bebaab;
--corLinksNivelTres: #ccc;
--backgroundMenuLateral: rgba(0, 0, 0, 0.95);
--botaoFecharMenu: #bb0000;
--botaoFecharMenuCorX: #ffffff;
--corIconeMenu: #000000;
}
@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 */
e esse outro em
todas as paginas
rodapé
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");
};
});
vai ficar conforme a imagem abaixo…
2 curtidas