Creating an animated sliding menu

Question

I want to create a slow slide-in-only right menu (<div id="sidebar">) sliding in and disappearing on click of a button (id="menuicon").

The open button (<div id="openmenuicon">) itself (consisting of multiple images) has to disappear with the same animation duration.

At the same time a close button (<div id="closemenuicon">) has to appear (also animated).

On smaller screens (max-width 768px) the sliding menu has to slide in from the bottom. Also on the same screen width another div container (<div id="footerbackground">) has to (not animated) appear at a different place on the page.

My code does work, but is of course not animated like described above. I am new to javascript and don't have a clue what I am doing. I would be very happy if you could help me.

Here is my recent try:

function multipleMenu() {
  openSidebar();
  swapButtons();
  openFooterbackground();
}

function openSidebar() {
  var x = document.getElementById("sidebar");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function swapButtons() {
  if (document.getElementById("openmenuicon")) {
    if (document.getElementById("openmenuicon").style.display == "none") {
      document.getElementById("openmenuicon").style.display = 'block';
      document.getElementById("closemenuicon").style.display = "none";
    } else {
      document.getElementById("openmenuicon").style.display = "none";
      document.getElementById("closemenuicon").style.display = "block";
    }
  }
}

function openFooterbackground() {
  var x = document.getElementById("footerbackground");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

/* ---------------------------------
nav icon images
----------------------------------*/

#navmenutransp {
  position: fixed;
  top: 85%;
  left: calc(50% - 32px);
  cursor: pointer;
  transition: 0.3s;
  z-index: 300;
  opacity: 0;
}

#navmenutransp:hover {
  opacity: 1;
}

@media (pointer:coarse) {
  #navmenutransp:hover {
    opacity: 0;
  }
}

#navmenutranspbackground {
  position: fixed;
  top: 85%;
  left: calc(50% - 32px);
  z-index: 290;
  opacity: 0.2;
}

#navmenutranspbackground2 {
  position: fixed;
  top: 85%;
  left: calc(50% - 32px);
  z-index: 292;
  opacity: 1;
}

#navclosetransp {
  position: fixed;
  top: 85%;
  left: calc(50% - 32px);
  cursor: pointer;
  z-index: 300;
  opacity: 0.8;
}

@media only screen and (max-width: 768px) {
  #navclosetransp {
    opacity: 0;
  }
}

#navclosetranspbackground {
  position: fixed;
  top: 85%;
  left: calc(50% - 32px);
  z-index: 299;
  opacity: 1;
}

@media only screen and (orientation: landscape) and (max-width: 1024px) {
  #navmenutransp,
  #navmenutransp:hover,
  #navmenutranspbackground,
  #navmenutranspbackground2,
  #navclosetransp,
  #navclosetranspbackground {
    top: 78%;
  }
}


/* ---------------------------------
nav icon + menu bar
----------------------------------*/

#menuicon {}

#openmenuicon {
  z-index: 295;
}

#closemenuicon {
  display: none;
  z-index: 305;
}

@media only screen and (min-width: 769px) {
  #sidebar {
    display: none;
    position: fixed;
    width: 250px;
    height: 100%;
    right: 0px;
    padding-top: 0px;
    background-color: rgba(15, 15, 15, 0.8);
    overflow: auto;
    z-index: 200
  }
}

@media only screen and (max-width: 768px) {
  #sidebar {
    display: none;
    position: fixed;
    width: 100%;
    height: 413px;
    right: 0px;
    bottom: 0;
    background-color: rgba(15, 15, 15, 0.8);
    overflow: auto;
    z-index: 200
  }
}

@media only screen and (min-width: 769px) {
  #footerbackground {
    display: none;
    z-index: 5
  }
}

@media only screen and (max-width: 768px) {
  #footerbackground {
    display: none;
    position: absolute;
    top: 115%;
    padding-top: 84px;
    height: 330px;
    bottom: 0;
    width: 100%;
    background-color: rgb(15, 15, 15);
    z-index: 5
  }
}

#navitems {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(70, 70, 70, 1);
}

.linav {
  list-style: none;
  font-family: Overpass-Light, sans-serif;
  color: white;
  font-size: 20px;
  padding: 24px;
  border-top: 1px solid rgba(70, 70, 70, 1);
  text-align: center;
}

.navlink {
  color: white;
  text-decoration: none;
  transition: 0.3s ease;
}

.navlink:hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  transition: 0.3s ease;
}

@media (pointer:coarse) {
  .navlink:hover {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    transition: 0.3s ease;
  }
}

<div id="menuicon" href="javascript:void(0);" class="icon" onclick="multipleMenu()">
  <div id="openmenuicon">
    <img id="navmenutranspbackground" src="1.png" width="64" height="64">
    <img id="navmenutranspbackground2" src="2.png" width="64" height="64">
    <img id="navmenutransp" src="3.png" width="64" height="64" alt="Menu">
  </div>
  <div id="closemenuicon">
    <img id="navclosetranspbackground" src="4.png" width="64" height="64">
    <img id="navclosetransp" src="5.png" width="64" height="64" alt="Close Menu">
  </div>

  <div id="sidebar">
    <ul id="navitems">
      <li class="linav"><a class="navlink" href="https://">Topic 1</a></li>
      <li class="linav"><a class="navlink" href="https://">Topic 2</a></li>
      <li class="linav"><a class="navlink" href="https://">Topic 3</a></li>
      <li class="linav"><a class="navlink" href="https://">Topic 4</a></li>
    </ul>
  </div>
</div>
<div id="footerbackground"></div>
<!-- display only for screen max-width 769px -->

Answer 1

You can't animate the display property. you should use another approach. for example set width for hide and show. or use opacity and visibility. for a better result hide and show your elements with adding and removing classes instead of using JS styles.

Update: maybe this can help you ..

https://codepen.io/navab/pen/ExQqLbN

https://codepen.io/navab/pen/dydxexj