Menu Full Screen CSS

Menu Full Screen CSS

Neste artigo veja como estilizar Menu Full Screen CSS.

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>, <ul>, <li>, e a tag <a> para inserirmos o link de destino. 

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

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:

<!--Abre menu-->
<div class="botao-menu"></div>   
<div class="overlay"></div>
    
<div class="menu-container">
        
    <ul class="menu-wrapper">
        
        <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="Galeria">Galeria</a></li>
        <li><a href="#" title="Contato">Contato</a></li>
        
    </ul>
        
    <div class="menu-underlay"></div>
    
</div>
<!--Fecha menu-->

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 tela cheia.

.botao-menu {

  position: fixed;
  top: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background-color: #727272;
  color: #ffffff;
  z-index: 6;

}

.botao-menu:hover {
  cursor: pointer;
}

.botao-menu::before {

  position: absolute;
  top: 0;
  left: 0;
  content: "+";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  font-weight: 100 !important;
  font-family: serif;
  transition-duration: 500ms;

}

.botao-menu.active::before {

  transform: rotate(405deg);
  background-color: #343436;
  color: #f8f8f8;

}

.overlay {

  position: fixed;
  top: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background: linear-gradient(90deg, #007cff 0%, #00D2BE 100%);
  transition-duration: 700ms;
  z-index: 4;

}

.overlay.active {
  transform: scale(100, 100);
}

.menu-container {

  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -5;
  opacity: 0;
  transition: opacity 1500ms;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;

}

.menu-container .menu-wrapper {
  list-style: none;
}

.menu-container .menu-wrapper li {

  margin: 10px 0;
  display: flex;
  justify-content: center;

}

.menu-container .menu-wrapper li a {

  text-decoration: none;
  letter-spacing: 5px;
  font-weight: 700;
  font-size: 13vmin;
  font-family: fantasy;
  color: rgba(255, 255, 255, 0);
  -webkit-text-stroke: 1.5px #ffffff;
  transition-duration: 200ms;

}

.menu-container .menu-wrapper li a:hover {
  color: #343436;
  -webkit-text-stroke: 0px #343436;
}

.menu-container .menu-wrapper li span {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 68vmin;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.2);

}

.menu-container .menu-underlay {

  position: absolute;
  top: 100px;
  left: 100px;
  background-color: lightblue;

}

.menu-container.active {

  transition-delay: 0ms;
  opacity: 1;
  z-index: 5;
  display: block;

}

.landing-page-content {

  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #343436;
  color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.landing-page-content div {

  font-size: 20vmin;
  font-weight: 700;

}

.landing-page-content div span {

  font-size: 40px;
  font-weight: 400;

}

Nesta seção, vamos adicionar o script para dar o efeito Principal para o menu Tela Cheia

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
    
    $(".botao-menu").click(function () {
       
       $(".botao-menu").toggleClass("active");
       $(".overlay").toggleClass("active");
       $(".menu-container").toggleClass("active");
    
    });

</script>

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

Veja o Resultado baixo!

Menu Full Screen CSS

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Menu Full Screen CSS. existem diversas formas de estilizar menu 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.