My website features an animated retractable menu bar with two separate menus. Clicking on one icon activates a sliding motion to reveal that particular menu while causing the second menu to retract in a similar fashion. To achieve a smooth transition effect, I utilize the hidden-sidenav class to adjust the delay time for the closing navigation, allowing the expanding menu to wait until the retraction is completed before appearing.
One aspect of the transition that I'm not entirely satisfied with involves the movement of the icon itself. This is primarily due to my use of the box-sizing property and padding for each individual menu bar. Although I employ box-sizing to center the icon within the bar, I am aiming for a more seamless animation similar to the example provided here. Notice how the links in the navigation bar remain fixed in place.
function closeIt(){
document.getElementById('mysidenav').classList.add('hidden-sidenav');
document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
document.getElementById('mysidenav').classList.remove('hidden-sidenav');
document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
.sidenav{
height:100%;
width:20%;
background:#111;
transition:1s;
transition-delay:1s;
transition-timing-function:ease-out;
overflow-x:hidden;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav a{
font-size:90px;
color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDI BAR*/
.sidenav2{
height:100%;
width:20%;
background:#111;
overflow-x:hidden;
position:fixed;
top:0;
transition:1s;
transition-timing-function:ease-out;
transition-delay:1s;
box-sizing:border-box;
padding:calc((20% - 50px)/2);
}
.sidenav2 a {
font-size:50px;
color:#818181;
}
.hidden-sidenav {
transition-delay:0s;
transition-timing-function:ease-in;
width:0;
padding:0;
}<div id='mysidenav'class='sidenav hidden-sidenav'>
<a onclick='closeIt()'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>☰</a>
</div>