Como fazer um menu responsivo em html css e jquery
PRÓXIMO
Como criar um menu lateral
Postado: 27 de fevereiro de 2023
Tempo de Leitura: 2 Minutos
Como fazer um menu responsivo em html css e jquery
Neste tutorial veja como podemos criar um menu responsivo em html css e jquery.
Nesta seção, projetaremos uma estrutura simples na tag <header>, <nav>, <ul>, <li>,<div> e a <a> para inserir o link de destino.
Usaremos as classes (.logo, .ativo, .menu-toggle e a class .clearfix) para dar o formato e estilizar com css.
Essas é a tags e classes que usaremos para criar o nosso menu responsivo com html, Css e jquery.
Vamos Adicionar o HTML
<header>
<a href="#" class="logo">Loop Nerd</a>
<div class="menu-toggle"></div>
<nav>
<ul>
<li><a href="#" class="ativo">Inicio</a></li>
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu Resposivo com html, css e jquery.
OBS: não se esqueça de botar esta link no seu <head> veja no código abaixo.
<head>
<!--insira o link da font-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
header{
position: relative;
max-width: 1280px;
margin: 10px auto;
padding: 5px;
background: #fff;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.11);
}
.logo{
color: #414141;
height: 60px;
font-size: 28px;
line-height: 60px;
padding: 0 20px;
text-align: center;
box-sizing: border-box;
float: left;
font-weight: bold;
text-decoration: none;
}
nav { float: right; }
.clearfix{
clear: both;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
}
nav ul li{
list-style: none;
}
nav ul li a{
display: block;
margin: 10px 5px;
padding: 10px 20px;
text-decoration: none;
color: #262626;
border-radius: 8px;
}
nav ul li a.active,
nav ul li a:hover{
background: #008ef6;
color: #fff;
transition: 0.3s;
}
@media(max-width: 1200px){
header{
margin: 20px;
}
}
@media(max-width: 768px){
.logo{
height: 46px;
font-size: 28px;
line-height: 46px;
}
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 0px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #008ef6;
}
.menu-toggle:before{
content: '\f0c9';
font-family: fontawesome;
line-height: 40px;
}
.menu-toggle.ativo:before{
content: '\f00d';
}
nav{
display: none;
}
nav.ativo{
display: block;
width: 100%;
}
nav.ativo ul{
display: block;
}
nav.ativo ul li{
margin: 0;
}
}
Vamos Adicionar o script
esse script vai dar o efeito toggle ou seja, adicionar e remove a class.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.menu-toggle').toggleClass('ativo')
$('nav').toggleClass('ativo')
})
})
</script>
Combinando as Três seções acima Html , Css e jquery temos o seguinte Resultado!
Veja o Resultado baixo!
Deixe um comentário