Como criar uma navegação responsiva

Uma das partes mais difíceis de ser responsabilizado em um site é “a navegação”, essa parte é realmente importante para a acessibilidade do site, pois essa é uma das maneiras pelas quais os visitantes pulam as páginas da Web..

Na verdade, existem muitas maneiras de criar uma navegação de site responsiva e até mesmo alguns plug-ins do jQuery estão disponíveis para fazer isso em um segundo momento..

No entanto, em vez de aplicar uma solução instantânea, neste post, vamos orientá-lo sobre como construir uma navegação simples a partir do solo e usando as consultas de mídia CSS3 e um pouco de jQuery para exibi-lo em um tamanho de tela pequeno, como os smartphones corretamente.

Então, vamos apenas começar.

Demonstração
Fonte de download

HTML

Primeiro de tudo, vamos adicionar a meta viewport dentro do cabeça tag. este meta viewport A tag é necessária para que a nossa página seja dimensionada adequadamente dentro de qualquer tamanho de tela, principalmente na janela de exibição de dispositivos móveis.

… E adicione o seguinte snippet como a marcação de navegação dentro do corpo tag.

   Casa
 Como
 Ícones
 desenhar
 Web 2.0
 Ferramentas
 
 Cardápio

Como você pode ver acima, temos seis links de menu principais e adicionamos mais um link depois deles. Este link extra será usado para puxar o menu de navegação quando está escondido em uma tela pequena.

Leitura adicional: Não esqueça a metatag da viewport.

Estilos

Nesta seção, começamos a estilizar a navegação. O estilo aqui é apenas decorativo, você pode escolher todas as cores que desejar. Mas neste caso, nós (eu pessoalmente) queremos o corpo ter uma cor suave e cremosa.

 corpo cor de fundo: # ece8e5;

o nav tag que definem a navegação terá 100% largura total da janela do navegador, enquanto o ul onde ele contém nossos links de menu principais terão 600 px para a largura.

 nav altura: 40px; largura: 100%; fundo: # 455868; tamanho da fonte: 11pt; família da fonte: 'PT Sans', Arial, sans-serif; intensidade da fonte: Negrito; posição: relativa; borda inferior: sólido 2px # 283744;  nav ul preenchimento: 0; margem: 0 auto; largura: 600px; altura: 40 px;

Então nós vamos flutuador os links do menu para a esquerda, para que eles serão exibidos horizontalmente lado a lado, mas flutuando um elemento também fará com que seu pai colapso.

 nav li display: inline; flutuar: esquerda;

Se você perceber na marcação HTML acima, nós já adicionamos clearfix no classe atributo para ambos nav e ul para esclarecer as coisas quando flutuamos os elementos dentro dele usando este CSS clearfix hack. Então, vamos adicionar as seguintes regras de estilo na folha de estilo.

 .clearfix: antes, .clearfix: após content: ""; display: mesa;  .clearfix: após clear: ambos;  .clearfix * zoom: 1;

Como temos seis links de menu e também especificamos o container para 600 px, cada link do menu terá 100 px para a largura.

 nav a color: #fff; display: bloco inline; largura: 100px; texto-alinhar: centro; text-decoration: nenhum; altura da linha: 40 px; text-shadow: 1px 1px 0px # 283744;

Os links do menu serão separados por 1px borda direita, exceto a última. Lembre-se de nossa postagem anterior no modelo de caixa, a largura do menu será expandida para 1px fazendo isto 101 px como a adição de fronteira, então aqui nós mudamos o dimensionamento de caixa modelo para caixa de borda a fim de manter o menu permanece 100 px.

 nav li a borda-direita: 1px sólido # 576979; dimensionamento de caixa: caixa de borda; -moz-box-size: border-box; -webkit-box-sizing: caixa de borda;  nav li: last-child a borda-direita: 0;

Em seguida, o menu terá cores mais claras quando estiver em :flutuar ou :ativo Estado.

 nav a: hover, nav a: ativo background-color: # 8c99a4;

… E por último, o link extra ficará oculto (para a tela do desktop).

 nav a # pull display: nenhum;

Neste ponto, estamos apenas estilizando a navegação e nada acontecerá quando redimensionarmos a janela do navegador. Então, vamos pular para o próximo passo.

Leitura adicional: CSS3 Box-Sizing (Hongkiat.com)

Consultas de mídia

As consultas de mídia CSS3 são usadas para definir como os estilos serão alterados em determinados pontos de interrupção ou especificamente nos tamanhos de tela do dispositivo..

Como nossa navegação é inicialmente 600 px fix-width, primeiro definiremos os estilos quando ele for visualizado 600 px ou menor tamanho da tela, praticamente falando, isto é o nosso primeiro ponto de interrupção.

Neste tamanho de tela, cada um dos dois links de menu será exibido lado a lado, ulA largura aqui será 100% da janela do navegador, enquanto os links do menu terão 50% para a largura.

 @media screen e (max-width: 600px) nav altura: auto;  nav ul largura: 100%; display: bloco; altura: auto;  nav li largura: 50%; flutuar: esquerda; posição: relativa;  nav li a borda inferior: 1px sólida # 576979; borda direita: 1px sólido # 576979;  nav a text-align: left; largura: 100%; recuo de texto: 25px;

… E depois, também definimos como a navegação é exibida quando a tela fica menor 480 px ou menor (então este é o nosso segundo breakpoint).

Neste tamanho de tela, o link extra que adicionamos antes será exibido e também forneceremos o link “Cardápio” ícone no seu lado direito usando o :depois de pseudo-elemento, enquanto os links do menu principal serão ocultados para salvar mais espaços verticais na tela.

 Apenas a tela @media e (max-width: 480px) nav border-bottom: 0;  nav ul display: nenhum; altura: auto;  nav a # pull display: bloco; cor de fundo: # 283744; largura: 100%; posição: relativa;  nav a # pull: após content: ""; plano de fundo: url ('nav-icon.png') sem repetição; largura: 30px; altura: 30px; display: bloco inline; posição: absoluta; direita: 15px; top: 10px;

Por fim, quando a tela fica menor por 320 px e abaixe o menu será exibido verticalmente de cima para baixo.

 Apenas a tela @media e (max-width: 320px) nav li display: block; float: nenhum; largura: 100%;  nav li a borda inferior: 1px sólida # 576979;

Agora, você pode tentar redimensionar a janela do navegador. Agora deve ser capaz de adaptar o tamanho da tela.

Leitura adicional: Consultas de mídia para dispositivos padrão.

Mostrando o menu

Neste ponto, o menu ainda estará oculto e só será visível quando for necessário tocando ou clicando no “Cardápio” link e podemos conseguir o efeito usando o jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('clique', função (e) e.preventDefault (); menu.slideToggle ();););

No entanto, quando você redimensiona a janela do navegador logo após ver e ocultar o menu em uma tela pequena, o menu permanecerá oculto, Mostrar nenhum estilo gerado pelo jQuery ainda está anexado no elemento.

Portanto, precisamos remover esse estilo no redimensionamento da janela, da seguinte maneira:

 $ (janela) .resize (function () var w = $ (janela) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('estilo'); );

Certo, esses são todos os códigos que precisamos, agora podemos visualizar a navegação nos links a seguir e recomendamos que você a teste em uma ferramenta de teste de design responsivo, como o Responsinator, para visualizá-la em várias larguras de uma só vez.

Demonstração
Fonte de download

Bônus: um caminho alternativo

Como mencionamos anteriormente neste post, existem outras maneiras de fazer isso e usar uma biblioteca JavaScript chamada SelectNav.js é uma das maneiras mais fáceis. Este é um JavaScript puro que não depende de outra biblioteca de terceiros como o jQuery.

Basicamente, ele irá duplicar seu menu de lista e transformá-lo em um menu fará uso da interface do usuário nativa do próprio dispositivo.

Por favor, consulte a documentação oficial para posterior implementação.

Conclusão

Nós percorremos todo o caminho para criar uma navegação responsiva a partir do zero. Este que criamos aqui é apenas um dos exemplos, e como dissemos anteriormente neste post e mostrado acima, existem muitas outras soluções que você pode implementar. Portanto, agora é sua decisão escolher qual prática é a mais adequada para atender às necessidades e a estrutura de navegação do site..