Menu efeito hover text-fill com css

Menu efeito hover text-fill com css

Neste tutorial vamos fazer um Menu efeito hover text-fill com css.

Nesta seção, projetaremos uma estruturas básica no html. 

Usaremos A Tag <nav>,<ul>,<li> e a tag <a> para inserirmos o link de destino.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

   <nav>
                
     <ul class="menu-item">
                
       <li><a href="#" data-menu="Home"> Home</a></li>
       <li><a href="#" data-menu="Html">Html</a></li>
       <li><a href="#" data-menu="Css">Css</a></li>
       <li><a href="#" data-menu="Jquery">Jquery</a></li>
       <li><a href="#" data-menu="JavaScript">JavaScript</a></li>
                    
     </ul>
                
   </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso menu.

nav {

	margin: 0;
	background: #4c4c4c;
	padding: 10px;

}

nav .menu-item {

  list-style: none;
  display: block;

}

nav .menu-item li {

  margin: 10px 30px;

}

nav .menu-item li a {

  text-decoration: none;
  color: #c6c6c6;
  font-size: 22px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  position: relative;

}

nav .menu-item li a::before {

  content: attr(data-menu);
  transition: 0.5s;
  color: #ffd700;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  overflow: hidden;

}

nav .menu-item li a:hover::before {
  width: 100%;
  transition: all 0.5s ease-in-out;
}

/*Responsivo*/
/*768PX BREAKPOINT*/
@media (min-width:48em){

   nav .menu-item { display:flex; }


} 

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando