Show and hide with CSS transitions

Show a menu with fade in effect.

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button>
  Show menu
</button>
<nav class="mobile-menu shadow-sm hidden" id="mobile-menu">

  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">test</a>
    </li>

  </ul>

</nav>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  background: #eee;
}

.overlay-menu {
  position: fixed;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}

.mobile-menu {
  -webkit-transition: all .5s;
  transition: all .5s;
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  background: white;
  width: 50%;
  height: 100vh;
  text-align: center;
  overflow-x: hidden;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

button {
  z-index: 1051;
  position: absolute;
}

JavaScript

$('button').on('click', function() {
  $('#mobile-menu').toggleClass('hidden');
})