Menu fullscreen Abertura animada

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:

1. Estrutura HTML: Organize os itens do menu em uma estrutura HTML adequada, definindo as seções e links necessários.
2. Estilos CSS: Utilize CSS para definir o layout, cores, fontes e posicionamento dos elementos do menu.
3. Animações CSS: Crie animações CSS para controlar a abertura e fechamento do menu, a transição entre itens e outros efeitos visuais.
4. 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.