Menu Responsivo Branco e Rosa com html e css

Menu Responsivo Branco e Rosa com html e css

Neste tutorial veja como podemos criar um menu responsivo Branco e Rosa com html css.

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

Usaremos as classes (.menu-horizontal, .lineTop, e a class .right) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso menu responsivo com html, Css.

Vamos Adicionar o HTML

                <nav class="menu-horizontal">

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

                </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Menu Resposivo com html e css.

.menu-horizontal { 

    margin:auto; 
    float:left; 
    width:100%; 
    background-color:#fff; 
    border-radius:5px; 
    overflow:hidden;
    border-top: 2px #ff9696 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:#ff9696;
    transition: 0.3s;

}

li:hover i{ 
      
    color:#ffffff;
}

.lineTop span { 

    z-index:2; 
    position:relative; 
    color:#ff9696;
    font-weight: bold;
    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: #ff9696;
    transition: 0.3s;

}


li:hover .lineTop:after {

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

}

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

/*Menu*/
.menu-horizontal { 

    background: rgb(238,238,238);
    background: linear-gradient(0deg, rgba(238,238,238,1) 7%, rgba(255,255,255,1) 50%);

}


li { width:auto; border-bottom:none; }
li.right .textRs { display:none; }

.lineTop:after {

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

}


li:hover .lineTop:after {

  height:100%;
  background-color:#ff9696; 

}
/*Menu*/

} 

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando