Add menu slide animation

July 23, 2023

I made a button, when you click on it, a fixed menu appears on the right, when you click on the cross, it closes accordingly

How can I make it so that when you click on the button, this menu does not instantly appear, but smoothly slides out to the right?

The same when closing, so that it smoothly hides back

let menuGeneral = $('#menu-general');

$('#menu-up-control').click(function () {
    menuGeneral.css("display", "block");
});

$('#menu-up-control-close').click(function () {
    menuGeneral.css("display", "none");
});

.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-general {
  display:none;
}

.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:0;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
          rel="stylesheet"  type='text/css'>

<a id="menu-up-control" class="menu-up-control">
                        <i class="fa fa-bars"></i>
                    </a>

<div id="menu-general" class="menu-general">
                <div id="menu-up-control-close" class="menu-up-control-close">
                    <i class="fa fa-times"></i>
                </div>
                <ul class="menu-main">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>

>Solution :

so you want to replace the menuGeneral.css("display", "block"); with the sliding animation.
and also replace the menuGeneral.css("display", "none"); with the sliding animation to close the menu.

<script>
    let menuGeneral = $('#menu-general');

    $('#menu-up-control').click(function () {
        menuGeneral.animate({ right: '0' }, 500);
    });

    $('#menu-up-control-close').click(function () {
        menuGeneral.animate({ right: '-350px' }, 500, function () {
            menuGeneral.hide();
        });
    });
</script>

css:

.menu-general {
  position: fixed;
  width: 350px;
  top: 0;
  right: -350px;
  bottom: 0;
  z-index: 9999;
  padding: 10px;
  background-color: black;
}