Menu fullscreen Efeito Simples

Curso Html Guia Completo para Iniciantes

Menu fullscreen Abertura animada

Postado: 22 de abril de 2024 Tempo de Leitura: 3 Minutos

Criando um Menu Fullscreen com Efeito usando HTML, CSS e JavaScript

Um menu fullscreen, também conhecido como menu em tela cheia, é uma ferramenta poderosa para websites que desejam oferecer uma experiência de navegação imersiva e intuitiva aos seus usuários. Ao ocupar toda a tela do dispositivo, esse tipo de menu destaca as opções de navegação e as torna facilmente acessíveis, promovendo uma interação mais fluida e engajadora.

Para criar um menu fullscreen com efeito utilizando HTML, CSS e JavaScript, siga estes passos:

1. Estrutura HTML:

Comece definindo a estrutura HTML básica do seu menu. Inclua elementos como div para o container principal, nav para a seção de navegação, ul para a lista de links e li para cada item do menu.

        <!--Menu-->
        <button class="menu-btn">
            <i class="fa fa-bars"></i>
        </button>

        <div class="overlay">

          <div class="text">
          
            <ul>

              <li><a href="#" title="Html">Html</a></li>
              <li><a href="#" title="Css">Css</a></li>
              <li><a href="#" title="Jquery">Jquery</a></li>
              <li><a href="#" title="WordPress">WordPress</a></li>

            </ul>
          
          </div>

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

2. Estilos CSS:

Utilize CSS para estilizar o menu e posicioná-lo na tela. Defina a altura e largura do container principal como 100% para ocupar toda a tela. Posicione o elemento nav de forma fixa e centralizada.

.overlay {

  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #202020;

}

ul {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

ul li {

  list-style-type: none;
  margin: 20px 0;
  font-size: 26px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  cursor: pointer;

}

ul li a {

  color: #ffffff;
  text-decoration: none;

}

ul li a:hover { color:#007cff; }


ul li:hover { transform: translateX(-5px); }

.menu-btn {

  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 10;
  cursor: pointer;
  appearance: none;
  background: transparent;
  border: 0 none;
  display: block;
  height: 35px;
  width: 35px;
  color: #202020;
  font-size: 1.6em;

}

.menu-btn:focus {
  outline: 0 none;
}

.menu-ativo { color:#ffffff; }

3. Funcionalidade JavaScript:

JavaScript: Adicionando Interatividade com um Toque de Magia

O JavaScript é o toque final que dá vida ao seu menu. Através dele, você controla a abertura e o fechamento do menu, adicionando efeitos visuais e respondendo às interações do usuário. É onde a magia acontece!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    
    const $icon = $('.menu-btn');
    const $menu = $('.overlay');

    $icon.on('click', function () {
      
      if (!$menu.hasClass('active')) {
      
        $menu.fadeIn().toggleClass('active');
        $icon.addClass('menu-ativo');
      
      } else {
      
        $menu.fadeOut().removeClass('active');
        $icon.removeClass('menu-ativo');

      
      }

    });

</script>

Efeito Extra: A Cereja do Bolo!

Com um pouco mais de JavaScript e CSS, você pode adicionar efeitos visuais incríveis ao seu menu fullscreen, como animações de abertura e fechamento, transições suaves e efeitos de hover. Explore sua criatividade e deixe seu menu ainda mais atraente!

Dicas Extras para o Sucesso:

Acessibilidade: Garanta que seu menu seja acessível a todos os usuários, incluindo aqueles que usam leitores de tela.
Responsividade: Adapte o layout do seu menu para diferentes tamanhos de tela, proporcionando uma ótima experiência em dispositivos móveis.
Testes: Teste seu menu em diferentes navegadores e dispositivos para garantir que ele funcione corretamente.

Com essas dicas e o código acima, você estará pronto para criar menus fullscreen incríveis que cativarão seus usuários e elevarão sua experiência web a um novo patamar!

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

Veja o Resultado baixo!