I am facing an issue with the transition effect on my menu. To see the problem, you can visit www.glennvanroggen.nl
When using jQuery and clicking #show, it should toggle the class .menu_out on .menu.
$(document).ready(function(){
$('#show').click(function(){
$('.content').toggleClass("content_out");
});
$('#show').click(function(){
$('.menu').toggleClass("menu_out");
});
});
However, I have noticed that the transition is not functioning as expected. The menu moves to the left without any transition effect. Strangely, adding an opacity transition worked fine. I am puzzled by this behavior.
.menu {
position: fixed;
left: -200px;
width: 200px;
height: 100%;
bottom: 0;
border-right: 1px solid #F0D4B0;
background-color: #002129;
-webkit-transition: left 0.3s ease-in;
-moz-transition: left 0.3s ease-in;
-o-transition: left 0.3s ease-in;
-ms-transition: left 0.3s ease-in;
transition: left 0.3s ease-in;
-webkit-transition: background-color 5s ease-out;
-o-transition: background-color 5s ease-out;
-moz-transition: background-color 5s ease-out;
-ms-transition: background-color 5s ease-out;
z-index: 2;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
opacity: 0.2;
}
.menu_out {
left: 0px;
width: 200px;
height: 100%;
border-right: 1px solid #F0D4B0;
background-color: #002129;
z-index: 2;
opacity: 1
}
Below is the HTML structure:
<nav class="menu">
<div id="show">
<p>Menu</p>
</div>
<div id="profile">
<img src="images/glenn.jpg" alt="my face"/>
<p>where dreams come true.</p>
</div>
<ul>
<li><a href="index.html">Me</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="love.html">Love</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
I'm hopeful that someone can assist me in resolving this issue. Thank you for your help in advance!