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./ * button * /
.menu .drop {
color : #fff ;
preenchimento : 2em ;
background : rgba (0,0,0,0,5);
cursor : ponteiro;
exibir : nenhum; / * esconda o botão * /
}
.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;} / * mostramos o botão novamente * /
.menu nav { / * agora o nosso menu é uma lista flutuante * /
posição : absoluta;
índice z : 600 ;
background : # 121212 ;
min-width : 20rem ;
exibir : nenhum;
topo :100% ; esquerda : 0 ;
}
.menu nav > a { / * e os itens estão alinhados verticalmente * /
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
Nota: Se você já instalou jquery, esta etapa não é necessária.
</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 .
/ * if => open * /
.menu nav .open {
display : block; / * o menu aparece * /
}
.menu .drop .open {
background : rgba (0,0,0,0,65); / * o botão muda de cor * /
}
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 > // <! [CDATA [
Array .prototype.forEach = function ( b, c ) { // substituição para qualquer método para melhor compatibilidade
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 ) { // selecione todos os elementos com a classe "menu"
var c = b.querySelector ( ".menu> .drop " ), // variável para o botão
a = b.querySelector ( " .menu> nav " ); // variável para o menu
c.onclick = function ( b ) { // toggleClass
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.
/ * if => open * /
.menu nav .open {
display : block; / * o menu aparece * /
}
.menu .drop .open {
background : rgba (0,0,0,0,65); / * o botão muda de cor * /
}
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.
/ * puro css * /
.menu input { display : none} / * ocultar a entrada * /
#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ê.
Postar um comentário