I'm attempting to create a sliding menu that appears when clicked and disappears when the close button is activated. Unfortunately, I can't seem to get it to slide out properly.
jQuery(function($){
$('#menu-open').click(function() {
$('#slider-background').toggleClass('section-transform-active');
$('#slider-menu').toggleClass('menu-container-active');
});
$('#menu-close').click(function() {
$('#slider-background').toggleClass('section-transform-active');
$('#slider-menu').toggleClass('menu-container-active');
});
});
/button>
<div id="slider-background" class="section-transform">
<button id="menu-close" style="float:right">X CLOSE</button>
<div id="slider-menu" class="menu-container">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div>
</div>
.section-transform {
cursor: pointer;
opacity: 0;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.menu-container {
padding-top: 50px;
color: #888;
font-size: 20px;
opacity: 0;
}
.menu-container li:hover {
color: #aaa;
}
.menu-container-active {
opacity: 1;
height: 100%;
width: 100%;
}
.section-transform-active {
opacity: 1;
height: 100%;
width: 50%;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
}
Fiddle Link : https://jsfiddle.net/sad437xv/38/
In the jsfiddle demo, the sliding motion isn't smooth as intended. The transition seems abrupt instead of gradual. Additionally, trying to replicate the structure in Divi builder has been challenging. I would like the menu items/buttons to smoothly slide in along with the background overlay, but currently, the animation causes the text to appear jittery as their box width expands.
If you have any insights on where I might be going wrong, your help would be greatly appreciated. Thank you!