Menu full screen simples html css

Menu full screen simples html css

Este tutorial mostra como criar um Menu full screen simples com html e css.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <input>, <label>, <div>, <nav>, <ul> ,<li>, e <a>.

Essas tags usaremos para criar a nosso Menu com html e css.

Vamos Adicionar o HTML

        <!--Abre Menu-->
        <input type='checkbox' id='toggle' style='display:none;' />
        
          <label class='toggle-btn toggle-btn__cross' for='toggle'>
            <div class="hamburguer"></div>
            <div class="hamburguer"></div>
            <div class="hamburguer"></div>
          </label>
        
          <nav>
            
            <ul>

                <li><a href="#">Loop Nerd</a></li>                
                <li><a href="#">Html</a></li>
                <li><a href="#">Css</a></li>
                <li><a href="#">Jquery</a></li>
                <li><a href="#">WordPress</a></li>
            
            </ul>
          
          </nav>
        <!--Fecha Menu-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e projetar o nosso Menu.

header nav {

  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

}

header nav ul {

  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 100px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);

}

header nav ul li {

  transform: translateY(50px);
  opacity: 0;

}

header nav ul li a {

  display: block;
  font-size: 1.5em;
  text-decoration: none;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}

header nav ul li a:hover {

  color: #3ce1e5;

}

.toggle-btn {

    display: block;
    position: relative;
    z-index: 10;
    right: 0;
    top: -35px;
    cursor: pointer;
    float: right;

}

.toggle-btn .hamburguer {

   width: 30px;
   height: 2px;
   margin: 7px auto;
   background-color: #4c4c4c;
   transition: all 0.3s ease-in-out;

}

.toggle-btn .hamburguer:nth-child(2) {
  width: 30px;
}

#toggle:checked ~ nav {
  opacity: 1;
  visibility: visible;
}

#toggle:checked ~ nav ul {
  top: 100px;
}

#toggle:checked ~ nav ul li {
  transform: translateY(0px);
  opacity: 1;
}

#toggle:checked ~ nav ul li:nth-child(1) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}

#toggle:checked ~ nav ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}

#toggle:checked ~ nav ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}

#toggle:checked ~ nav ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}

#toggle:checked ~ nav ul li:nth-child(5) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.5s;
}

#toggle:checked + label.toggle-btn .hamburguer {
  background-color: #3ce1e5 ;
}

#toggle:checked + label.toggle-btn .hamburguer:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
}

#toggle:checked + label.toggle-btn .hamburguer:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#toggle:checked + label.toggle-btn .hamburguer:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando