Índice
Mas o problema é que muitos desses formulários não são totalmente compatíveis com alguns navegadores se o CSS3 for usado para fazer essa tarefa.
Graças ao Javascript podemos tornar este tipo de efeitos e animações muito mais compatíveis com os navegadores e assim dar-lhes o suporte necessário.
Neste tutorial, veremos como fazer uma barra de navegação totalmente responsiva usando o plugin Javascript Responsive Nav.
Este plugin é open source e podemos utilizá-lo em qualquer projeto, vem com sua folha de estilos para poder customizar e é totalmente dependente de outras bibliotecas Javascript como o jQuery.
No HTML precisaremos apenas criar uma lista para usar o menu e dar a ela um identificador para poder selecioná-lo através do script que é exigido pelo plugin.
Também vinculamos o plugin Responsive Nav e vinculamos ao documento, que pode ser baixado de sua página oficial ou diretamente no Github, podemos baixar apenas o arquivo .js ou se você quiser pode baixar o arquivo .zip completo, para isso tutorial Vou usar apenas o arquivo responsive-nav.min.js.
Criamos um site de demonstração que chamamos de responsive.html
Navegação responsiva
- Começar
- Sobre
- Serviços
- Blog
- Contato
Lorem ipsum dor sente amet, consectetuer adipiscing.
Be egestas, ante et vulputate volutpat
Em seguida, adicionaremos o css em um arquivo styles.css com o seguinte código
corpo {margem: 0; preenchimento: 0; plano de fundo: # 3d3d3d; família da fonte: Arial, sans-serif; } img {largura máxima: 100%; } #content {background-color: # E6E6FA; margem: 20px auto 0; preenchimento: 20px; largura: 80%; } #nav {background-color: # 4C76AE; } #nav ul {margin: 0; preenchimento: 0; largura: 100%; display: bloco; estilo de lista: nenhum; } #nav ul li {largura: 100%; display: bloco; estilo de lista: nenhum; } #nav ul li a {display: block; preenchimento: 10px 9px; largura: 100%; tamanho da fonte: 1.1em; peso da fonte: normal; fundo: # 4c76ae; cor: # cad7ea; decoração de texto: nenhum; } #nav ul li a: hover {background: # 00567f; } .js #nav {clipe: rect (0 0 0 0); altura máxima: 0; posição: absoluta; display: bloco; estouro: oculto; zoom: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; intensidade da fonte: Negrito; preenchimento: 3px 9px; margem esquerda: 15px; decoração de texto: nenhum; raio da borda: 3px; color: #fefefe; plano de fundo: # 4c7ab6; margin-bottom: 15px; }Até aqui será a folha de estilo geral, agora iremos criar uma folha de estilo que irá adaptar o menu se a tela for reduzida para 640px ou menos, para isso aplicamos alguns estilos dentro da propriedade Media Queries do css3 que serão aplicados em dispositivos com resolução mínima de 640px. Se a resolução for maior, o css geral definido será usado.
tela @mídia e (largura mínima: 640px) {.js #nav {posição: relativa; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; display: bloco; flutuar: esquerda; largura: automático; fundo: nenhum; preenchimento: 11px 15px; peso da fonte: normal; decoração de texto: nenhum; cor: # E6E6FA; } #nav ul li a: hover {background: # 00567f; cor: # cad7ea; } h1 {cor: # 90b9a0; tamanho da fonte: 2,5em; alinhamento de texto: centro; }}Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
