Menu Responsivo Horizontal com Css

Menu Responsivo Horizontal com Css

Neste artigo vamos criar um Menu Vertical Responsivo com Css.

Primeiro adicionamos 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="https://twitter.com/LoopNerd" target="_blank" class="lineTop social"> <i class="icon icon-twitter"></i> <span class="textRs"> Twitter</span></a></li>
    <li class="right"><a href="https://br.pinterest.com/loopnerd/" target="_blank" class="lineTop social"> <i class="icon icon-pinterest"></i><span class="textRs"> Pinterest</span></a></li>
  
  </ul>

</nav>

Vamos adicionar o Css:

.menu-horizontal { 
     
     margin:auto; 
     float:left; 
     width:100%; 
     background-color:transparent; 
     border-radius:5px; 
     overflow:hidden; 
}

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

}

li {
  
  position: relative;
  float: left;
  width:100%;
  display: block;
  margin-bottom: 2px;
  overflow:hidden!important;

}

li.right { float:right; }

.lineTop span { z-index:1; position:relative; }

.lineTop {

  display: block;
  padding: 0 30px;
  line-height: 50px;
  text-decoration: none;
  color:#ffffff;
  background-color:#4c4c4c;

}

.lineTop.social {

  display: block;
  padding: 0 15px;
  line-height: 50px;
  text-decoration: none;
  color:#ffffff;
  background-color:#4c4c4c;

}

.lineTop:hover { color:#2dcfdf; transition:0.3s; }

.lineTop:after {

    content: '';
    position: absolute;
    top:-100%;
    left:0;
    display: block;
    height:50px;
    width:100%;
    border-radius:6px;
    text-align: center;
    background-color: #757575;
    transition: 0.3s;

}


li:hover .lineTop:after {

/*Responsivo*/

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

.menu-horizontal { background-color:#4c4c4c; }

li { width:auto; }

li.right .textRs { display:none; }

} 
  

Veja o Resultado!

Baixar Código Veja Funcionando