Menu Full Screen com Css
Postado: 26 de outubro de 2021
Tempo de Leitura: < 1 Minuto
Menu Full Screen com Css
Neste artigo vamos fazer um menu Full screen Bonito e simples com html css e jQuery.
<!--Inicia Menu Full Screen-->
<div class="menu-fullscreen">
<div class="menu-mobile">
<div class="um"></div>
<div class="dois"></div>
<div class="tres"></div>
</div>
<nav>
<ul role="navigation" class="hidden">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Sobre">Sobre</a></li>
<li><a href="#" title="Artigos">Artigos</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</div>
<!--Finaliza Menu Full Screen-->
Vamos Adicionar o Css:
.menu-mobile {
width: 35px;
height: 30px;
top: 20px;
right: 20px;
position: absolute;
cursor: pointer;
}
.menu-mobile.on .um {
-moz-transform: rotate(45deg) translate(3px, 7px);
-ms-transform: rotate(45deg) translate(3px, 7px);
-webkit-transform: rotate(45deg) translate(3px, 7px);
transform: rotate(45deg) translate(3px, 5px);
}
.menu-mobile.on .dois { opacity:0; }
.menu-mobile.on .tres {
-moz-transform: rotate(-45deg) translate(8px, -10px);
-ms-transform: rotate(-45deg) translate(8px, -10px);
-webkit-transform: rotate(-45deg) translate(8px, -10px);
transform: rotate(-45deg) translate(8px, -10px);
}
.um,
.dois,
.tres {
width: 100%;
height: 3px;
background: #4c4c4c;
margin: 6px auto;
backface-visibility: hidden;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
nav ul {
margin: 0;
padding: 0;
font-family: Open Sans;
list-style: none;
margin: 4em auto;
text-align: center;
}
nav ul.hidden {
display:none;
}
nav ul a {
width:100%;
line-height: 1.5;
color:#ffffff;
font-size: 2.5em;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
text-decoration:none;
display: block;
}
nav ul a:hover {
background-color: rgba(1, 178, 247, 0.84);
}
.menu-fullscreen.on {
z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
background-color: rgba(0, 0, 0, 0.85);
position: fixed;
transition:.6s;
}
.ativo { background:#fff; }
Vamos Adicionar o Script:
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(".menu-mobile").on('click', function() {
$(this).toggleClass("on");
$('.menu-fullscreen').toggleClass("on");
$('.um').toggleClass("ativo");
$('.dois').toggleClass("ativo");
$('.tres').toggleClass("ativo");
$("nav ul").toggleClass('hidden');
});
</script>
Veja o Resultado!
Baixar Código
Veja Funcionando
Publicado por: Loop Nerd
995 Visualizações
Deixe um comentário