Animar Dropdown menu com CSS
Oi galera. Beleza?
Faz um tempo que não mexo com CSS e quase esqueci tudo. kkk
Comecei num projeto para treinar e achei um problema que não consigo resolver.
Fiz um menu dropdown básico, e preciso animar o dropdown, mas não consigo de jeito algum.
Tentei utilizar o transition mas não vai de maneira alguma.
Deem uma olhada no código e vê se é possivel me dar uma ajuda.
Valeu! Boa semana.
Código HTML:
<nav>
<div class="dropdown">
<button class="dropbtn"><a href="#"></a>MENU</button>
<div class="dropdown-content">
<a href="#">Página Inicial</a>
<a href="#">Como funciona?</a>
<span><img style="width:32px; height:32px;" src="img/default.png"/>Seja bem vindo, Vítor.</span>
<a class="log1" href="#">Perfil<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="person"></span></a>
<a class="log2" href="#">Sair<span style="padding:0; float:right; color:#FFF;" class="oi" data-glyph="account-login"></span></a>
</div>
</div>
</nav>
Código CSS:
.dropbtn {
background:url(../img/space.png);
width:90px;
height:50px;
text-align:right;
color: white;
padding:0px;
font-size: 19px;
border: none;
cursor: pointer;
margin-top:0px;
outline:none;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
-o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
float:left;
}
.dropbtn a {
width:28px;
height:21px;
margin-top:3px;
background: url(../img/three.png);
float:left;
}
.dropbtn:hover {
opacity:0.5;
}
.dropdown {
float:left;
width:95px;
height:50px;
margin-top:20px;
position: relative;
display: inline-block;
}
/ Dropdown Content (Hidden by Default) /
.dropdown-content {
display: block;
position: absolute;
top:50px;
background-color: #131920;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/ Links inside the dropdown /
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
font-weight: 300;
font-size:15px;
display: block;
border-bottom:1px solid #0E1319;
}
.dropdown-content span {
color: #7D9EC4;
padding: 12px 16px;
text-decoration: none;
font-weight: 300;
font-size:15px;
display: block;
}
.dropdown-content img {
margin-right:10px;
vertical-align: middle;
}
/ Change color of dropdown links on hover /
.dropdown-content a:hover {
background-color: #19222B;
}
/ Show the dropdown menu on hover /
.dropdown:hover .dropdown-content {
display: block;
}Discussão (2)
Carregando comentários...