mobile menu

by polaszk

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="mobile-nav">
  <div class="mobile-menu">
    <div class="x">
      <input type="checkbox" id="menu-x" checked="false">
      <label for="menu-x"><span class="fa fa-bars"></span></label>
    </div>
    <nav id="mobile-nav-links" class="menu-links hidden">
      <a href="#"><i class="fa fa-home"></i>Link 1</a>
      <a href="#"><i class="fa fa-user"></i>Link 2</a>
      <a href="#"><i class="fa fa-archive"></i>Link 3</a>
      <a href="#"><i class="fa fa-envelope"></i>Link 4</a>
    </nav>
  </div>

  <div class="mobile-login-form">
    <div class="mobile-login">
      <input type="checkbox" id="menu-login" checked="false">
      <label for="menu-login"><span class="fa fa-user"></span></label>
    </div>
    <div id="mobile-login-form" class="login-form hidden">
      <p>
        jdsfjhsdfkj
      </p>
    </div>
  </div>
</div>
<div>
  "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." What is Lorem Ipsum? Lorem Ipsum is simply
  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
  five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
  Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
  normal distribution...

CSS

body {
  font-size: 16px;
  position: relative;
  margin: 0;
  padding: 50px 0 0;
  color: #000;
}

.hidden {
  display: none;
  visibility: hidden;
}

.prevent-scroll {
  overflow: hidden;
}

.mobile-nav {
  position: absolute;
  height: 50px;
  top: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
}

.login-form,
.menu-links {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
  overflow-y: auto;
  overflow-x: hidden;
}

.mobile-nav a {
  display: block;
  font-size: 1.5em;
}

.mobile-login-form input,
.mobile-menu input {
  display: none;
}

.mobile-login-form label,
.mobile-menu label {
  display: block;
  position: relative;
}

.mobile-login {
  float: right;
}

.x {
  float: left;
}

.mobile-menu label span,
.mobile-login label span {
  font-size: 2.5rem;
  color: #fff;
  margin: 5px 10px;
}

JavaScript

var showSection = function(element, otherTrigger) {
  var triggerId = '#' + otherTrigger;
  var isTriggerOpen = $('label[for="' + otherTrigger + '"] span').hasClass('fa-close');

  if (isTriggerOpen) {
    $(triggerId).click();
  }

  $(element).toggleClass('hidden');
};

var preventScroll = function() {
  $('body').toggleClass('prevent-scroll');
};

var makeCloseIcon = function(parent, child) {
  $(parent).toggleClass(child);
};

$('#menu-x').on('change', function() {
  makeCloseIcon('.mobile-menu span', 'fa-bars fa-close');
  showSection('#mobile-nav-links', 'menu-login');
  preventScroll();
});

$('#menu-login').on('change', function() {
  makeCloseIcon('.mobile-login span', 'fa-user fa-close');
  showSection('#mobile-login-form', 'menu-x');
  preventScroll();
});