I am in need of creating an animation that will cause a menu to appear from the left side of the screen when a button is clicked. The menu should expand to cover 55% of the width of the main page.
You can view a demo of this animation on JSFiddle by following this link: JSFiddle Demo
In the provided JSFiddle demo, you will see a hidden menu and a button that move to the left. Initially, the menu with "link" elements should be concealed, and the button with the class ".glyphicon" should be positioned at the far left of the page.
Upon clicking the button, both the menu and the button should slide to the right and take up 55% of the main page's width.
However, I am facing difficulty implementing this animation. While I was able to shift the menu by altering its structure, I couldn't figure out how to move the button.
Below is a snippet of my HTML code:
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
Additionally, here is some CSS code:
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
/* More CSS styling... */
Javascript is also utilized for this animation:
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
}
isActive = !isActive;
});
If anyone could offer assistance in adapting or reworking this animation, I would greatly appreciate it.