Menu Responsivo Horizontal com Css
Postado: 24 de agosto de 2021
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
Publicado por: loopnerd
617 Visualizações
Obrigado Pelo comentário, amigo!
Parece bom, mas não serve para mim, muito grande e complicado, polui a página html do site que estou fazendo, quero menor e mais simples.