Full Screen Menu Html e Css

Botão Html e Css Efeito Hover

Postado: 27 de março de 2025 Tempo de Leitura: 3 Minutos

Neste artigo veja como criar um Menu com efeito de FULL SCREEN quando o usuário clica no Botão Hamburguer do menu

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <div>, <span>, <?>, e a tag <a> para inserirmos o link de destino.

Essa tag que usaremos para criar o nosso Full Screen Menu Html e Css.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu.

Estrutura Código Html:

HTML

<div class="menu-btn" id="toggle">

  <span class="hamburguer-1"></span>
  <span class="hamburguer-2"></span>
  <span class="hamburguer-3"></span>

</div>

<div class="overlay" id="overlay">

  <nav class="overlay-menu">

    <ul>
      
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Sobre">Sobre</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="Contato">Cotato</a></li>
    
    </ul>

  </nav>

</div>

Estrutura Código CSS

Para conseguirmos o efeito desejado no Menu, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso menu.

CSS

.menu-btn {
  
  position: fixed;
  top: 5%;
  right: 7%;
  height: 27px;
  width: 30px;
  cursor: pointer;
  z-index: 100;
  transition: opacity 0.25s ease;

}

.menu-btn:hover {
  opacity: 0.7;
}

.menu-btn.active .hamburguer-1 {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #010101;
}

.menu-btn.active .hamburguer-2 {
  opacity: 0;
  background: #010101;
}

.menu-btn.active .hamburguer-3 {
  transform: translateY(-5px) translateX(0) rotate(-45deg);
  background: #010101;
}

.menu-btn span {
  background: #202020;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}

.menu-btn span:nth-of-type(2) {
  top: 8px;
}

.menu-btn span:nth-of-type(3) {
  top: 16px;
}

.overlay {
  position: fixed;
  background: #FFE452;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
}

.overlay.open {
  opacity: 0.9;
  visibility: visible;
  height: 100%;
}

.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.4s;
          animation-delay: 0.4s;
}

.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: "Vollkorn", serif;
  font-weight: 400;
  text-align: center;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay ul li a {
  display: block;
  position: relative;
  color: #010101;
  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: #010101;
  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;
  }
}

Vamos adicionar o Script para dar o efeito FULL SCREEN

JavaScript

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/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!