Simple Mobile Menu (old)

by Kevin Pliester

HTML

<div id="mobile-shadow"></div>
<div id="mobile-button">&equiv;</div>
<div id="mobile-menu"></div>

CSS

#mobile-button {
  cursor: pointer;
}

#mobile-menu {
  top: 0;
  right: -260px;
  width: 260px;
  height: 100%;
  position: fixed;
  overflow-x: hidden;
  background: #fff;
}

#mobile-shadow {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
}

JavaScript

$(document).ready(function() {

  // Click Mobile Button to show menu
  $('#mobile-button').click(function() {
    showMobileMenu();
  });

  // Click Mobile Shadow to hide menu
  $('#mobile-shadow').click(function() {
    hideMobileMenu();
  });

  // Function to show menu
  function showMobileMenu() {
    $('#mobile-menu').animate({
      'right': '0'
    });
    $('body, html').css({
      'overflow': 'hidden'
    });
    $('#mobile-shadow').fadeIn();
  }

  // Function to hide menu
  function hideMobileMenu() {
    $('#mobile-menu').animate({
      'right': '-260px'
    });
    $('body, html').css({
      'overflow': 'auto'
    });
    $('#mobile-shadow').fadeOut();
  }

});