Simple Mobile Aside Menu

by Yunus Gaziev

HTML

<aside class="mobile-aside">
  <nav class="mobile-aside-menu">
    <button class="close-mobile-menu" data-aside="hide" type="button">Close Mobile Menu</button>
  </nav>
</aside>

<button class="open-mobile-menu" data-aside="show" type="button">Open Mobile Menu</button>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
}

.mobile-aside {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 150, 0, 0.5);
  transform: translateX(-100%);
  transition: transform 0.32s ease-in-out;
}

.mobile-aside-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  height: 100%;
  overflow-y: auto;
  background-color: #607d8b;
  transform: translateX(-100%);
  transition: transform 0.24s ease-in-out;
}

.mobile-aside-menu ul {
  margin: 0;
  padding: 15px;
  list-style-type: none;
}

.mobile-aside-menu li {
  margin-bottom: 20px;
  font-size: 18px;
}

.is-opening.mobile-aside,
.is-opening.mobile-aside-menu {
  transform: translateX(0);
}

JavaScript

const mobileAsideTimeout = 280;
const mobileAside = $('.mobile-aside');
const mobileAsideMenu = $('.mobile-aside-menu');

const asideCtrlArr = {
	show: function() {
    mobileAsideMenu.removeClass('is-opening');

    setTimeout(function() {
      mobileAside.removeClass('is-opening');
    }, mobileAsideTimeout);
  },
  hide: function() {
    mobileAsideMenu.removeClass('is-opening');

    setTimeout(function() {
      mobileAside.removeClass('is-opening');
    }, mobileAsideTimeout);
  },
};

$('[data-aside]').on('click', function(evt) {
console.log($(this).data('aside'));
  asideCtrlArr[$(this).data('aside')];
  asideCtrlArr['show'];
});

mobileAside.on('click', function(evt) {
  if ($(evt.target).hasClass('mobile-aside')) {
  	hideAsideMenu();
  }
});