Carregando...

Menu Responsivo Branco e Laranja

Postado: 24 de outubro de 2021 Tempo de Leitura: < 1 Minuto

Neste artigo vamos fazer um Menu Responsivo Branco e Laranja com html e css.

Vamos Adicionar o Html:

<ul>

    <li><a href="#" class="lineTop"> <span> Html </span> </a></li>
    <li><a href="#" class="lineTop"> <span> Css </span></a></li>
    <li><a href="#" class="lineTop"> <span> Jquery </span></a></li>
    <li><a href="#" class="lineTop"> <span> WordPress </span></a></li>

    <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-facebook"></i> <span class="textRs"> Facebook</span></a></li>
    <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-instagram"></i> <span class="textRs"> Instagram</span></a></li>                        
    <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-twitter"></i> <span class="textRs"> Twitter</span></a></li>
    <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-pinterest"></i><span class="textRs"> Pinterest</span></a></li>

</ul>

Vamos Adicionar o Css:

.menu-horizontal { 

    margin:auto; 
    float:left; 
    width:100%; 
    background-color:transparent; 
    border-radius:5px; 
    overflow:hidden;
    border-top: 2px #fdb304 solid;
    border-left: 1px #eaeaea solid;
    border-right: 1px #eaeaea solid;
    border-bottom: 1px #eaeaea solid;

    box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);
    -webkit-box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);
    -moz-box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);

}

ul,li {
  
  margin: 0;
  padding: 0;
  list-style: none;

}

li {
  
  position: relative;
  float: left;
  width:100%;
  display: block;
  overflow:hidden!important;
  border-bottom:1px #eaeaea solid;

}

li.right { float:right; }

li.right i{ 
     
    z-index:2;
    position:relative; 
    color:#fdb304;
    transition: 0.3s;

}

li:hover i{ 
      
    color:#ffffff;
}

.lineTop span { 

    z-index:2; 
    position:relative; 
    color:#fdb304;
    transition: 0.3s;
 
}

li:hover span{ 

    color:#ffffff; 
    transition: 0.3s;

}


.lineTop {

  display: block;
  padding: 0 30px;
  line-height: 50px;
  text-decoration: none;
  z-index:2;

}

.lineTop.social {

  display: block;
  padding: 0 15px;
  line-height: 50px;
  text-decoration: none;
  color:#1abdfd;

}

.lineTop:after {

    content: '';
    position: absolute;
    top:0;
    left:0;
    display: block;
    height:100%;
    width:0;
    text-align: center;
    background-color: #fdb304;
    transition: 0.3s;

}


li:hover .lineTop:after {

  width:100%;
  background-color:#fdb304; 

}

Veja o Resultado!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

802 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados