Estou fazendo um efeito para MENU usando CSS e jQuery.
Problema
O transition
funciona do elemento para ele mesmo com ação hover
.
O contrário não funciona.
O CSS abaixo faz o seguinte:
Tem um MENU Mobile escondido a esquerda do site. E quando uso uma função jQuery para chamar a classe .showMenu
, o MENU corre para a posição left:0
. Mas quando clico de volta no botão que executa a função jQuery, o MENU não volta do mesmo jeito que veio - correndo.
O MENU simplesmente some.
// CSS
nav#menu-navigation{
position:fixed;
background-color: #FFF;
width: 80%;
max-width: 256px;
height: 70%;
top: 0;
left: -400px;
bottom: 20px;
margin: auto;
overflow: auto;
transition: left 0.3s ease;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
&.show-menu{
left: 0px;
z-index: 1;
transition: left 0.3s ease;
}
}
// jQuery
$(document).ready(function(){
$('.open-menu').on('click tap', function(){
$('nav#menu-navigation, main').toggleClass('show-menu');
});
});