Criando um menu de navegação responsivo

[rnxn 2]

Existem vários plugins escritos em javascript (que necessitam da biblioteca JQuery) para criar menus de navegação em um instante, basta procurar no Google. Nesse tutorial vou mostrar como criar uma barra de menu simples usando Media Queries da CSS3, como requisitos:

- Conhecimento básico em HTML5;

- Conhecimento básico em CSS3 e @media-queries;

- Conhecimento básico em JQuery.

 

 

ESTRUTURA

Primeiramente, vamos inserir a propriedade "viewport" na tag <meta> dentro do head do documento. Essa tag viewport é necessária para que nossa página seja dimensionada corretamente em qualquer tamanho de tela usada pelo usuário (seja um desktop, tablet, smarthphone, etc) -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

. Nossa estrutura inicial ficará assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Dentro do corpo do documento, vamos criar nossa estrutura de navegação, ficando assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Nossa ancora com identicador "pull" será usada para abrirmos/fecharmos o menu de navegação em uma tela de tamanho menor. Isto quer dizer que esse elemento será oculto se o usuário estiver usando acessando a página de um dispositivo com tamanho de tela grande. Sem muito segredo nessa parte, a mágica mesmo acontece no CSS.

 

ESTILO

Vamos começar definindo a regra dos seletores universais e da fonte padrão usada no corpo do documento.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Também já vamos definir as propriedades da nossa classe "fn-clear" (clearfix) -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

- ficando assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora sim, começaremos a estilizar a barra de navegação e seu conteúdo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Se executarmos o documento html agora, teremos o seguinte resultado (

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

):

 

 

MEDIA QUERIES

As media queries da CSS3 servem para definirmos o comportamento do estilo e a forma como ele vai mudar em alguns breakpoints, ou melhor dizendo: os tamanhos de tela do dispositivo do usuário.

 

 

 

Nossa barra tem 900px fixo de largura. Então vamos definir o que deve acontecer se o usuário estiver acessando a página usando um dispositivo com tela inferior a esse número, esse será nosso primeiro breakpoint.

 

Faremos o seguinte: Diviriremos o menu "em dois", faremos com que cada item de menu ocupe 50% de tamanho do elemento pai.

 

 

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

- Mude o tamanho da janela do seu navegador para ver as media queries entrando em ação.

 

Note que se diminuirmos muito (horizontalmente) o tamanho da janela para até 480px o layout irá quebrar (um item de menu irá sobrepor o outro). Então temos outro breakpoint aqui, vamos definir o que deve acontecer quando chegar nesse ponto de interrupção.

 

Agora, faremos aquele nosso elemento com identificador aparecer, deixando-o com a propriedade "display: block". Vamos usar uma imagem para mostrar um ícone de menu, salve a imagem do link a seguir e coloque-a no mesmo diretorio do documento html e do css:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, salve-a com nome "menu.png".

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Se executarmos o arquivo agora, teremos o seguinte(

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

):

 

 

Já temos nossa estrutura estilizada como queremos, mas note que ao clicar em "menu" nada acontece. Infelizmente no CSS não tem nenhuma propriedade para o evento de "clique" (tem o "active", que funciona quando o usuário está com o mouse pressionado mas não é o que queremos). Então teremos que fazer essa parte com javascript:

 

 

JAVASCRIPT

Para mostrarmos o conteúdo do menu de navegação usaremos a biblioteca JQuery. Salve (CTRL+S) o seguinte arquivo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

e coloque-o no mesmo diretório do documento html e do css. Feito isto, faça a importação do script no HTML antes do fechamento da tag </body>

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Nosso código js ficará assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

E assim chegamos ao nosso resultado final (

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

):

 

 

 

CÓDIGO:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

|

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

|

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

|

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

</ rnxn >

[Owner 7]

Acho incrível esse style de menu. Gosto bastante porque é Clean e Rápido. É bastante útil, porque já modela para celulares e tablets sem precisar instalar outra skin e etc

Parabéns Rxnx, continue postando essas dicas.

[NoSlake 56]

Como disse nosso amigo Owner, esse estilo Clean não só para menus, mas para um site todo é muito lindo. Gostei muito dos tutoriais de CSS que tu ta trazendo ! Vi que está usando o HTML5, poderia trazer tutoriais ensinando o que mudou :yes:

Obrigado pelo tuto, e pela "source"