Menu Full Screen com Css

Postado: 26 de outubro de 2021

Menu Full Screen com Css

Neste artigo vamos fazer um menu Full screen Bonito e simples com html css e jQuery.

    <!--Inicia Menu Full Screen-->
    
        <div class="menu-fullscreen">
      
          <div class="menu-mobile">
            <div class="um"></div>
            <div class="dois"></div>
            <div class="tres"></div>
          </div>
          
          <nav>
                
            <ul role="navigation" class="hidden">

                    <li><a href="#" title="Home">Home</a></li>
                    <li><a href="#" title="Sobre">Sobre</a></li>
                    <li><a href="#" title="Artigos">Artigos</a></li>
                    <li><a href="#" title="Contato">Contato</a></li>
                
            </ul>
            
          </nav>

        </div>

    <!--Finaliza Menu Full Screen-->

Vamos Adicionar o Css:

.menu-mobile {
  
  width: 35px;
  height: 30px;
  top: 20px;
  right: 20px;
  position: absolute;
  cursor: pointer;

}

.menu-mobile.on .um {
  -moz-transform: rotate(45deg) translate(3px, 7px);
  -ms-transform: rotate(45deg) translate(3px, 7px);
  -webkit-transform: rotate(45deg) translate(3px, 7px);
  transform: rotate(45deg) translate(3px, 5px);
}

.menu-mobile.on .dois { opacity:0; }

.menu-mobile.on .tres {

  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);

}

.um,
.dois,
.tres {
  width: 100%;
  height: 3px;
  background: #4c4c4c;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

nav ul {

  margin: 0;
  padding: 0;
  font-family: Open Sans;
  list-style: none;
  margin: 4em auto;
  text-align: center;
}

nav ul.hidden {

   display:none;

}

nav ul a {

  width:100%;
  line-height: 1.5;
  color:#ffffff;
  font-size: 2.5em;  
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  text-decoration:none;
  display: block;

}

nav ul a:hover {
    
    background-color: rgba(1, 178, 247, 0.84);
}


.menu-fullscreen.on {

  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  transition:.6s; 

}

.ativo { background:#fff; }

Vamos Adicionar o Script:

<script src="js/jquery.js"></script>
<script type="text/javascript">
    
    $(".menu-mobile").on('click', function() {
        
        $(this).toggleClass("on");
        $('.menu-fullscreen').toggleClass("on");
        $('.um').toggleClass("ativo");
        $('.dois').toggleClass("ativo");
        $('.tres').toggleClass("ativo"); 
        $("nav ul").toggleClass('hidden');
    
    });

</script>

Veja o Resultado!

Baixar Código Veja Funcionando

Publicado por: loopnerd

798 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.