Menu Horizontal Efeito data-hover Segunda Camada

Estrutura Básica do HTML

Curso de Html e Css do Básico ao Avançado

Postado: 4 de março de 2024 Tempo de Leitura: 2 Minutos

Neste artigo vamos criar um Menu Horizontal Efeito data-hover Segunda Camada estilizado com Css3. ao passar o mouse sobre o elemento html ul, li as animações inicia conforme programado e estilizado nos Códigos Css de cada link do menu.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Menu vai ser composta 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 <nav> e a tag <a> para inserirmos o texto.

Essas tags que usaremos para criar o Menu Horizontal.

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 Horizontal.

Estrutura Código Html:

HTML

    <nav class="nav-bar">
      
      <a href="#" class="nav-link active" data-hover="Home">Home</a>
      <a href="#" class="nav-link" data-hover="Sobre">Sobre</a>
      <a href="#" class="nav-link" data-hover="Cursos">Cursos</a>
      <a href="#" class="nav-link" data-hover="Blog">Blog</a>
      <a href="#" class="nav-link" data-hover="Contato">Contato</a>
    
    </nav>

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 Menu com o efeito desejado.

CSS

.nav-bar { 

  padding:1em; 
  text-align:center; 

}

.nav-bar .nav-link {

  padding: 8px 0;
  margin: 0 20px;
  color: #797878;
  font-size: 22px;
  text-decoration: none;
  position: relative;

}

.nav-bar .nav-link::before {

  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 8px 0;
  max-width: 0;
  text-decoration: underline;
  text-underline-offset: 8px;
  color: #0082fa;
  content: attr(data-hover);
  -webkit-transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  transition: max-width 0.5s;

}

.nav-bar .nav-link:hover::before { max-width: 100%; }

.nav-bar .active {

  color: #0082fa;
  text-decoration: underline;
  text-underline-offset: 8px;

}

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

Veja o Resultado baixo!