
Menu Vertical Animado com Css
PRÓXIMO
Botão Efeito Flutuante com Css
ANTERIOR
CSS Columns
Postado: 21 de agosto de 2021
Tempo de Leitura: < 1 Minuto
Neste artigo vamos criar um menu vertical animado com css

Vamos Adicionar o html:
<nav class="menu-vertival"> <ul> <li><a href="#" class="line"> <span> Html </span> </a></li> <li><a href="#" class="line"> <span> Css </span></a></li> <li><a href="#" class="line"> <span> Jquery </span></a></li> <li><a href="#" class="line"> <span> WordPress </span></a></li> </ul> </nav>
Vamos Adicionar o Css:
.menu-vertival { margin:auto; float:none; max-width:300px; width:100%; } ul,li { margin: 0; padding: 0; list-style: none; } li { position: relative; float: left; width:100%; display: block; margin-bottom:1px!important; overflow:hidden!important; border-radius:8px; } .line span { z-index:1; position:relative; } .line { display: block; padding: 0 25px; line-height: 40px; text-decoration: none; color:#ffffff; background-color:#4c4c4c; } .line:hover { color:#2dcfdf; transition:0.3s; } .line:after { content: ''; position: absolute; bottom: -15px; left: -60px; display: block; height: 70px; width: 70px; border-radius: 100%; text-align: center; background-color: #757575; transition: 0.3s; } li:hover .line:after { left:-50px; background-color:#2dcfdf; }
Veja o código funcionando:
Deixe um comentário