Menu Html e Css hover Diagonal

Menu Html e Css hover Diagonal

Neste tutorial vamos fazer um efeito hover css com efeito de animação diagonal no menu. 

Nesta seção, projetaremos uma estrutura simples na tag <nav>, <ul>, <li> e a <a> para inserir o link de destino. 

Essas são as tags que usaremos para criar o nosso Menu Html.

Vamos Adicionar o HTML

    <nav class="menu">

        <ul>
            <li class="active"><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Html">Html</a></li>
            <li><a href="#" title="Css">Css</a></li>
            <li><a href="#" title="Jquery">Jquery</a></li>
        </ul>
        
    </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu.

.menu { background-color: #282828; }

.menu ul {

  margin: 0;
  padding: 0;
  font-size: 0;
  position: relative;
  z-index: 1;
  text-align: center;

}

.menu ul li {

  display: inline-block;
  vertical-align: top;

}

.menu ul li a {

  font-family: 'open_sansregular';
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
  color: #fff;
  display: block;
  line-height: 50px;
  padding: 0 35px;
  letter-spacing: 3px;
  position: relative;

}

.menu ul li a:after {

  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4aeab;
  color: #ccc;
  z-index: -1;
  transform: skewX(-35deg);
  opacity: 0;
  transition: opacity 0.3s;

}

.menu ul li:hover a,
.menu ul li:focus a,
.menu ul li.active a {

  color: #282828;

}

.menu ul li:hover a:after,
.menu ul li:focus a:after,
.menu ul li.active a:after {

  opacity: 1;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando