Menu fullscreen Abertura animada
Menu fullscreen Efeito Simples
Menu fullscreen Abertura animada
Criando um Menu Fullscreen com abertura animada com HTML e CSS.
Um menu fullscreen preenche toda a tela do usuário, proporcionando uma experiência imersiva e chamativa. Combinado com animações CSS, ele se torna ainda mais atraente e dinâmico, guiando o usuário de forma intuitiva pelas opções do seu site.
Funcionalidades:
- Preenchimento total da tela: O menu toma conta de toda a área visível, criando um impacto visual forte e direcionando o foco para as opções de navegação.
- Animações CSS: Transições fluidas e efeitos visuais tornam a interação com o menu mais agradável e engajadora, prendendo a atenção do usuário.
- Navegação intuitiva: A disposição dos itens do menu e as animações facilitam a navegação, permitindo que o usuário encontre rapidamente o que procura.
- Design personalizável: Cores, fontes, imagens e outros elementos podem ser personalizados para combinar com a identidade visual do seu site.
Você pode aplicar esse estilo de menu em:
- Sites de portfólio: Ideal para apresentar seus trabalhos de forma impactante e destacar seus melhores projetos.
- Sites de negócios: Uma maneira elegante de mostrar seus produtos, serviços e diferenciais para os clientes.
- Sites de eventos: Crie um menu informativo e atraente para divulgar seu evento e vender ingressos.
- Sites de restaurantes: Apresente seu menu de forma apetitosa e facilite os pedidos online.
Como criar um menu fullscreen animado:
- Estrutura HTML: Organize os itens do menu em uma estrutura HTML adequada, definindo as seções e links necessários.
- Estilos CSS: Utilize CSS para definir o layout, cores, fontes e posicionamento dos elementos do menu.
- Animações CSS: Crie animações CSS para controlar a abertura e fechamento do menu, a transição entre itens e outros efeitos visuais.
- Responsividade: Adapte o menu para diferentes tamanhos de tela, garantindo uma boa experiência em desktops, tablets e dispositivos móveis.
Vamos adicionar a estrutura HTML:
Comece definindo a estrutura HTML básica do seu menu. Inclua elementos como div, ul, li, nav para a seção de navegação, ul para a lista de links e li para cada item do menu.
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Quem Somos">Quem Somos</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</div>Vamos adicionar os estilos CSS:
Utilize CSS para estilizar o menu e posicioná-lo na tela. Defina a altura e largura do container principal como 100% para ocupar toda a tela. Posicione o elemento nav de forma fixa e centralizada.
.button_container {
position: absolute;
top: 5%;
right: 5%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #222;
}
.button_container.active .middle {
opacity: 0;
background: #222;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #222;
}
.button_container span {
background: #007cff;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: "";
background: #FFCC52;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: "";
background: #FFCC52;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 45%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: "Vollkorn", serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 22%;
height: calc(100% / 5);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #222;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #222;
transition: 0.35s;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
/*Responsivo*/
@media (min-width:60em){
.overlay nav {
height: 70%;
font-size: 50px;
}
}Adicionando Interatividade com JavaScript
O JavaScript é o toque final que dá vida ao seu menu. Através dele, você controla a abertura e o fechamento do menu, adicionando efeitos visuais e respondendo às interações do usuário. É onde a magia acontece!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
</script>Combinando as Três seções acima com Html, Css e Javascript temos o seguinte Resultado!
Veja o Resultado baixo!
Menu fullscreen Abertura Animada
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como criar um Menu fullscreen Abertura Animada.
existem diversas formas de estilizar Menus com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Conclusão:
Um menu fullscreen animado com HTML e CSS é uma ótima maneira de enriquecer a experiência do usuário no seu site, tornando a navegação mais intuitiva, atraente e memorável. Com um pouco de criatividade e conhecimento técnico, você pode criar um menu único que se destaque da multidão e impressione seus visitantes.
Deixe um comentário