Criar menus responsivos com CSS 3 JavaScrit não é uma tarefa difícil, ainda mais se voc utilizar o jQuery. Mas e se voc não tiver conhecimentos em JavaScript? Vou ensinar um meio básico e simples de fazer um menu responsivo sem a ajuda de JS, utilizando apenas CSS e HTML. O Menu não ficará aquelas coisas, lindo, porém ficará funcional e se você possui conhecimentos em CSS poderá adicionar formatação e até animações ao mesmo.
Vou criar um menu com listas em um elemento nav para começar, a formatação fica por sua conta, aqui vai uma bem simples, acompanhando o exemplo. Utilizei o Font-Awesome para utilizar o ícone do menu responsivo. Vamos ao HEAD:
<!DOCTYPE html>
<html>
<head>
<title>Teste de Menu Responsivo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
A meta viewport é muito importante quando trabalhamos com responsividade, pois ela definirá o tamanho que a ela deverá abrir em cada dispositivo (width=device-width), assim como altura (height=devide-height), zoom inicial, zoom máximo e se o usuário poderá ou não dar zoom.
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</body>
</html>
O menu é simples, vamos adicionar o CSS ao arquivo estilo.css
body { margin: 0; padding: 0; }
nav { width: 100%; background: #333; float: left; padding: 10px 0px; }
nav ul li { list-style: none; display: inline; }
nav ul li a { padding: 10px; color: #F00; font: 1.3em Tahoma; }
O resultado será um menu com fundo cinza, com itens um ao lado do outro. Agora vamos adicionar o botão do menu responsivo, antes do nav:
<input type="checkbox" id="menu">
<label for="menu"><i class="fa fa-bars"></i>
</label>
O código acima cria um item checkbox, aquele item que pode ser ticado em formulários. Ele possui um seletor que permite verificar no CSS se ele está ou não ticado (checked) e quando estiver podemos delegar uma configuração através do CSS. Observe que foi adicionado junto ao checkbox um label com um ícone dentro, o checkbox será escondido e somente o ícone ficará visivel.
O HTML ficará assim:
<!DOCTYPE html>
<html>
<head>
<title>Teste de Menu Responsivo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<input type="checkbox" id="menu">
<label for="menu" class="menu"><i class="fa fa-bars"></i>
</label>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</body>
</html>
O CSS ficará assim:
body { margin: 0; padding: 0; }
nav { width: 100%; background: #333; float: left; padding: 10px 0px; }
nav ul li { list-style: none; display: inline; }
nav ul li a { padding: 10px; color: #F00; font: 1.3em Tahoma; }
#menu, .menu { display: none; }
@media screen and (max-width: 480px) {
nav { display: none; }
#menu:checked ~ nav {
display: block;
}
.menu { display: block; background: #ccc; padding: 10px; float: right; }
nav ul { margin: 0; padding: 0; }
nav ul li { display: block; padding: 10px 0px; }
nav ul li a { width: 100%; float: left; text-align: center; }
}
O #menu e o .menu escondem o botão responsivo para as resoluções maiores, o @media cria um Media Query para as telas de resolução de no máximo 480px, smartphones por exemplo. Nela é dado um display none no nav para que ele fique escondido e um block no .menu para que ele apareça.
A mágica está na linha ** #menu:checked ~ nav **, que utiliza o seletor checked. O ~ nav delega uma formatação CSS para o nav quando o checkbox está ticado. Caso o usuário dê um unckeck no checkbox ele retorna a sua formatação original, ou seja, none no caso de telas de no máximo 480px;
Espero ter ajudado, é simples, mas funcional.
Download do Font Awesome: [http://fontawesome.io/] Veja outro exemplo com animações: [https://tableless.com.br/header-responsivo-somente-com-css/]
Cara, eu to com um problema. Essa parte do seletor irmão não está funcionando para mim:
Primeiro deu um não tinha funcionado o código assim
O label continuava não apareccendo. Mesmo eu tirando o
label[for="ckMenu"] {display: none}. Sem isso e só com odisplay:blockabaixo, o label continuava sumindo. Resolvi com:Agora, a parte de fazer o menu reaparecer ao clicar no ckeckbox não está funcionando. Meu código abaixo:
html
css
Não sei se ficou claro. Mas a questão é: ao clicar no checkbox, a nav não volta a aparecer.