Menu full screen html e css – efeito cascata   

Menu full screen html e css – efeito cascata

Este tutorial veremos como criar um Menu full screen com html e css – efeito cascata.

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

Tags: <div>, <span>, <ul>, <li> e <a>.

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

Vamos Adicionar o HTML

        <!--Menu Fullscreen-->
        <div class="menu-mobile">
            <span class="menu-mobile_line menu-mobile_line-top"></span>
            <span class="menu-mobile_line"></span>
            <span class="menu-mobile_line menu-mobile_line-bottom"></span>
        </div>

        <div class="nav">

            <div class="nav_content">
                <ul class="nav_list">
                    <li class="nav_list-item">Html</li>
                    <li class="nav_list-item">Css</li>
                    <li class="nav_list-item">JQuery</li>
                    <li class="nav_list-item">WordPress</li>
                </ul>
            </div>

        </div>
        <!--Menu Fullscreen-->

Vamos Adicionar o CSS

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

.menu-mobile {

   height: 25px;
   width: 25px;
   cursor: pointer;
   float: right;
   margin-top: 25px;
   z-index:9;
   position: relative;

}

.menu-mobile_line {

  height: 2px;
  width: 25px;
  display: block;
  background-color: #242424;
  margin-bottom: 5px;
  transition: transform 0.2s ease, background-color 0.5s ease;

}

.menu-mobile_line-top {

  width: 25px;

}

.menu-mobile_line-bottom {
  
  width: 25px;
  float: right;

}

.nav {
  
  position: fixed;
  z-index: 1;

}

.nav:before, .nav:after {
  
  top:0;
  left:0;  
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 207, 215, 0.9);
  z-index: -1;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transform: translateX(0%) translateY(-100%);

}


.nav:after {

  background: rgba(0, 0, 0, 0.95);
  transition-delay: 0s;

}

.nav:before {
  transition-delay: 0.1s;
}

.nav_content {
  
  position: fixed;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  font-size: calc(2vw + 10px);
  font-weight: 200;
  cursor: pointer;
  visibility:hidden;

}

.nav_list-item {
  
  position: relative;
  display: inline-block;
  transition-delay: 0.8s;
  opacity: 0;
  transform: translate(0%, 100%);
  transition: opacity 0.2s ease, transform 0.3s ease;
  margin-right: 30px;
  color: #00cdd6;

}

.nav_list-item:before {
  content: "";
  position: absolute;
  background: #00cdd6;
  width:0;
  height: 2px;
  top: 100%;
  transform: translate(0%, 0%);
  transition: all 0.3s ease;
  z-index: -1;
}

.nav_list-item:hover:before {
  width: 100%;
}

body.nav-active .menu-mobile_line {
  background-color: #00cdd6;
  transform: translateX(0px) rotate(-45deg);
}

body.nav-active .menu-mobile_line-top {
  transform: translateX(0px) translateY(6px) rotate(45deg);
}

body.nav-active .menu-mobile_line-bottom {
  transform: translateX(-2px) rotate(45deg);
  display: none;
}

body.nav-active .nav {

  visibility: visible;
  top:0;
  left:0;

}

body.nav-active .nav_content {

    transition: all 5s;
    visibility:visible ;

}


body.nav-active .nav:before, body.nav-active .nav:after {
  transform: translateX(0%) translateY(0%);
}

body.nav-active .nav:after {
  transition-delay: 0.1s;
}

body.nav-active .nav:before {
  transition-delay: 0s;
}

body.nav-active .nav_list-item {
  opacity: 1;
  transform: translateX(0%);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

body.nav-active .nav_list-item:nth-child(0) {
  transition-delay: 0.5s;
}

body.nav-active .nav_list-item:nth-child(1) {
  transition-delay: 0.6s;
}

body.nav-active .nav_list-item:nth-child(2) {
  transition-delay: 0.7s;
}

body.nav-active .nav_list-item:nth-child(3) {
  transition-delay: 0.8s;
}

body.nav-active .nav_list-item:nth-child(4) {
  transition-delay: 0.9s;
}

Vamos Adicionar o Script:

para dar o efeito toggleClass para remover e adicionar class.

<script>
    
    console.clear();

    const app = (() => {

      let body;
      let menu;
      let menuItems;

      const init = () => {
        body = document.querySelector('body');
        menu = document.querySelector('.menu-mobile');
        menuItems = document.querySelectorAll('.nav_list-item');

        applyListeners();
      };

      const applyListeners = () => {
        menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
      };

      const toggleClass = (element, stringClass) => {
        if (element.classList.contains(stringClass))
        element.classList.remove(stringClass);else

        element.classList.add(stringClass);
      };

      init();

    })();

</script>

Combinando as Três seções acima Html Css e javascript temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando