Question 214115 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Add menu slide animation

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>
Tags:

2

Answers


  1. 0

    jQuery animate() can be used to change CSS properties over time

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search