Estou com dificuldades para suavizar um efeito que fiz. Ele está muito estático, após clicar no link, o objetivo é fazer com que após o clique entre a tela de menu de uma forma suave... da opacidade 0 ao 1.
Abaixo vou deixar o código funcionando:
$(document).ready(function() {
$(".btn-nav").click(function() {
$(".nav ul").toggleClass('nav-show');
});
});
.nav ul {
display: none;
}
.nav-show {
display: block !important;
position: fixed;
left: 0;
top: 0;
background: #066;
width: 100%;
height: 100%;
z-index: 99999;
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav class="nav">
<a href="#" class="btn-nav">Clique aqui para Abrir</a>
<ul>
<a href="#" class="btn-nav">Clique aqui para Fechar</a>
<li><a href="#">Contato</a>
</li>
<li><a href="#">Edição Atual</a>
</li>
</ul>
</nav>