Menu customizável
Eu sei que mais do que um causará dor de cabeça para adaptar o menu ou alcançar o que geralmente é conhecido como um menu responsivo .
A solução simples é usar um menu suspenso diretamente (você pode usar o menu zkreations como exemplo), então as mudanças que você precisa fazer são poucas ou nulas na consulta de mídia . Se você preferir um menu horizontal que muda para um menu suspenso, eu o convido a continuar a ler.
Corpo HTML
Para começar, nosso menu precisa de 3 coisas: um recipiente, um botão que controlará a exibição e o próprio menu, o corpo html ficaria assim:
< div class = "menu" >
< span class = "drop" >
< svg width = "36px" height = "36px" viewBox = "0 0 48 48" > < path d = "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0 -14v4h36v-4H6z " > </ path > </ svg >
</ span >
< nav >
< a href = " # "> Element A </ a>
< A href = "#" > Elemento B </ a >
< a href = "#" > Elemento C </ a >
< a href = "#" > Elemento D </ a >
</ nav >
</ div >
No código anterior, criei um recipiente com class="menu", é importante, uma vez que nos permitirá controlar o menu de navegação . No interior, adicionei um rótulo <span>, que por sua vez contém um vetor e servirá para exibir o menu e, finalmente, um rótulo <nav>que contém uma lista de links .
Adicionando estilos CSS
Nós não vamos quebrar nossas cabeças pensando no menu mais bonito do universo, então nós lhe daremos um design muito simples.
.menu {
position : relative;
}
.menu nav {
display : block;
background : rgba (0,0,0,0,5);
transbordamento : oculto;
}
.menu nav > a {
float : left;
cor : #fff ;
preenchimento : 2em ;
fronteira-direita : 1 px sólido rgba (0, 0, 0, 0,35);
transição : plano de fundo. 2s ;
exibição : bloco;
}
.menu nav > a : hover {
background : rgba (0,0,0,0.4);
}
Agora, precisamos de um estilo para o botão e, além disso, ele deve permanecer escondido enquanto nosso menu é mantido horizontal, para isso, vamos adicionar a propriedade display: none;juntamente com o design.
.menu .drop {
color : #fff ;
preenchimento : 2em ;
background : rgba (0,0,0,0,5);
cursor : ponteiro;
exibir : nenhum;
}
.menu .drop svg {
fill : #fff ;
vertical-align : middle;
}
Até agora temos um menu comum com um botão fantasma , agora é onde o bom começa. Vamos criar os estilos que são executados quando a resolução é muito baixa, isso é conseguido através de uma consulta de mídia do css.
@ tela de mídia apenas e (largura máxima: 768px ) {
.menu { background : rgba (0,0,0,0,3);}
.menu .drop { display : inline-block;}
.menu nav {
posição : absoluta;
índice z : 600 ;
background : # 121212 ;
min-width : 20rem ;
exibir : nenhum;
topo :100% ; esquerda : 0 ;
}
.menu nav > a {
float : none;
borda : 0 nenhuma;
}
}
Bem, nós temos o menu, mas o nosso botão não tem função, pois é puro html. Nós temos 3 maneiras de fazê-lo, que nos dará exatamente o mesmo resultado, mas isso variará em termos de desempenho e compatibilidade , é em cada um usar o método que melhor se adequa a você.
Método 1 - JQuery
Primeiro, precisamos instalar a versão mais recente em nossa página, adicionando acima </head>ou a partir </body>do seguinte código.
Nota: Se você já instalou jquery, esta etapa não é necessária.
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></ script >
Bem, agora só temos que adicionar a função do nosso botão amado.
< script >
$ ( documento ) .ready ( função () {
$ ( ".menu> .drop" ) .clique ( função () {
$ ( ".menu> .drop" ) .toggleClass ( "open" );
$ ( ".menu> nav" ) .toggleClass ( "aberto" );
});
});
</ script >
O que o código acima faz é adicionar a classe aberta ao botão e o menu com a etiqueta <nav>sempre que o botão é clicado, isso é conseguido através da função toggleClass do JQuery.
Nós só temos que adicionar os estilos que afetarão o menu e o botão quando abrir a classe .
.menu nav .open {
display : block;
}
.menu .drop .open {
background : rgba (0,0,0,0,65);
}
Pronto, o menu já funciona, mas para isso foi necessário carregar uma estrutura e apenas criar um menu simples.
Método 2 - Vanilla JS
Agora, vamos fazer exatamente o mesmo, mas com javascript puro, neste caso, temos que ter o mesmo efeito que a função toggleClass da JQuery. Para isso, adicionamos o seguinte código acima</body>
< script >
Array .prototype.forEach = function ( b, c ) {
var a = 0 ;
para (ii = ESTA .length; um <ii; a ++) a em ESTA && b.call (c, ESTA [a], um, this )
};
Array .prototype.slice.call ( document .querySelectorAll ( ".menu" ). ForEach ( função ( b ) {
var c = b.querySelector ( ".menu> .drop " ),
a = b.querySelector ( " .menu> nav " );
c.onclick = function ( b ) {
a.className && / (^ | \ s) open (\ s | $) / .test (a.className)? (a.classList.remove ( "open" ), c.classList.remove ("open" ), b.preventDefault ()): (a.classList.add ( "open" ), c.classList.add ( "open" ), b.preventDefault ())
}
});
</ script >
Neste caso, usamos forEach , mas para melhorar a compatibilidade substituí -lo , esta edição foi feita meu amigo Jose Gregorio para o código que inicialmente tinha escrito. Em seguida, selecionamos o recipiente de menu por meio de sua classe e definimos uma variável para selecionar o menu de navegação e outro para o botão. Finalmente, por meio de uma função, a classe aberta é adicionada com um clique, e no caso de já ser removida.
Novamente, temos a classe aberta , então só podemos adicionar o css.
.menu nav .open {
display : block;
}
.menu .drop .open {
background : rgba (0,0,0,0,65);
}
Este método tem um desempenho muito maior , embora, à primeira vista, não seja perceptível.
Método 3 - CSS puro
Até este ponto, nós já entendemos que só precisamos verificar se o menu está aberto ou fechado. Embora a Vanilla JS nos pareça ser a melhor e mais rápida solução, também podemos alcançar o mesmo com apenas css e, uma vez que não requer um código de javascript de qualquer tipo, obteremos um melhor desempenho. Para começar, teremos que mudar o corpo html um pouco:
<div class = "menu" >
< input id = "toggle" type = "checkbox" />
< label for = "toggle" class = "drop" >
< svg width = "36px" height = "36px" viewBox = " 0 0 48 48 " > < path d = " M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z " > </ path > </ svg >
</ label>
< Nav >
< a href = "#" > Elemento A </ a >
< a href = "#" > Elemento B </ a >
< a href = "#" > Elemento C </ a >
< a href = "#" > Elemento D </ a >
</ nav >
</ div >
O que fizemos é adicionar uma caixa de seleção de entrada , tipo e dar estilos, substituímos a extensão por uma etiqueta que também controla o estado da entrada (se for selecionado ou não). Esta pequena alteração é a substituição da função toggleClass , mas o html puro. Agora, temos que adicionar os estilos.
.menu input { display : none}
#toggle : checked ~ nav {
display : block;
}
#toggle : checked ~ label {
background : rgba (0,0,0,0.65);
}
O que fazemos é ocultar a entrada, pois só precisamos disso para verificar o status do menu. Quando o nosso botão de etiqueta é pressionado, ele marcará a entrada e isso fará com que seu status mude para verificado , e se for pressionado novamente, ele irá diminuir a perda do estado verificado , portanto, no css, adicionamos os estilos respectivos saindo do menu funcional.
Qual é o melhor método?
Se você tiver uma web baseada em JQuery , o melhor método seria usá-lo também no menu. Se você não usar JQuery , não é prático ou aconselhável incluí-lo apenas para um menu, é melhor optar por Vanilla JS , conseguindo um melhor desempenho. E se você quer ainda mais velocidade porque não se preocupa com a compatibilidade com navegadores antigos (IE8 ou inferior, Firefox 3 ou inferior, etc.), então o método usando o CSS é o caminho certo para você.
