Menu Efeito Hover Sublinhado

Menu Efeito Hover Sublinhado

Neste artigo vamos criar um Menu com Efeito Hover Sublinhado 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>, <ul>, <li> e a tag <a> para inserirmos o texto. 

Essas tags que usaremos para criar os Menu Efeito Hover Sublinhado.

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:

    <nav class="menu-sublinhado">

        <ul>

          <li><a class="active-nav" href="#" title="Home">Home</a></li>
          <li><a href="#" title="Sobre">Sobre</a></li>
          <li><a href="#" title="Cursos">Cursos</a></li>
          <li><a href="#" title="Blog">Blog</a></li>
          <li><a href="#" title="Contato">Contato</a></li>
        
        </ul>

    </nav>

Estrutura Código CSS

Para conseguirmos o efeito desejado nos 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.

.menu-sublinhado { width:100%; float:left; }

.menu-sublinhado ul { width:100%; list-style:none; text-align:center; }

.menu-sublinhado li {
  
  list-style-type: none;
  display: inline-block;
  margin: 5px 10px;

}

.menu-sublinhado li > a {
  
  color: #333;
  text-decoration: none;
  display: inline-block;
  position: relative;

}

.menu-sublinhado li > a::after {
  
  content: "";
  display: block;
  margin: auto;
  height: 3px;
  width: 0;
  top: 5px;
  background: transparent;
  transition: all 0.3s;
  
}

.menu-sublinhado li > a:hover::after, li > a.active-nav::after {

  width: 100%;
  background: orange;

}

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

Veja o Resultado baixo!

Menu Efeito Hover Sublinhado

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Menu Efeito Hover Sublinhado.

existem diversas formas de estilizar Menus 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.