Menu Responsivo HTML pronto (html, css e JavaScript) - Responsive Navigation Bar
Percebi nos últimos dias que vários dos meus alunos que estão aprendendo a criar templates Blogger do zero tem uma dificuldade em comum...
Como criar um Menu responsivo do zero?
E é exatamente isso que eu vou falar nesse artigo. Na verdade, vou te dar um código pronto e prático.
Fácil de usar e compatível com blogger (Como sempre).
Primeiro Passo:
Importar ícones prontos e adicionar o <style> dentro da tag <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.menuresponsivo {
overflow: hidden;
background-color: #333;
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 999;
max-width: none;
}
.menuresponsivo a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.menuresponsivo a:hover {
background-color: #fff;
color: black;
}
.menuresponsivo a.active {
background-color: #2196f3;
color: white;
}
.menuresponsivo .icon {
display: none;
}
@media screen and (max-width: 600px) {
.menuresponsivo a:not(:first-child) {display: none;}
.menuresponsivo a.icon {
float: right;
display: block;
}
.menuresponsivo.responsive {position: relative;}
.menuresponsivo.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.menuresponsivo.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
Segundo Passo:
Inserir uma lista com seus links do menu.
<div class="menuresponsivo" id="mymenuresponsivo">
<a href="#home" class="active">Início</a>
<a href="#news">Notícias</a>
<a href="#contact">Contato</a>
<a href="#about">Sobre</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Terceiro e último:
Adicionar um <script> para fazer funcionar a versão Mobile.
<script>
function myFunction() {
var x = document.getElementById("mymenuresponsivo");
if (x.className === "menuresponsivo") {
x.className += " responsive";
} else {
x.className = "menuresponsivo";
}
}
</script>
Esse menu ao ser salvo terá a seguinte aparência:
Espero ter ajudado você ... Qualquer dúvida pode entrar em contato.
Conheça nosso trabalho e nossos produtos.
Até a próxima.
Nenhum comentário:
Postar um comentário
Deixe um comentário com seu Feedback sobre este Conteúdo.