Collapsing Mobile Menu

by Matthew Day

HTML

<div id="theoverlay" class="overlay"></div>

<div id="thenav" class="nav">
  <div class="y-wrap cf">
    <div id="thenimg" class="nimg">
      <img src="http://via.placeholder.com/60x40" />
    </div>
    <div id="thenabs" class="nabs">
      <div id="mobile" class="burger"></div>
    </div>
  </div>
  
  <ul id="themobilemenu" class="mobilemenu">
    <li>About</li>
    <li>Contact</li>
    <li>Mission</li>
    <li>Projects</li>
    <li>Reports</li>
  </ul>
  
</div>

<div class="thebody">
  <div class="y-wrap">
    <h4>Quisque id justo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget diam in enim dictum accumsan sed eu tellus. Proin tempus metus eros, sit amet pharetra metus condimentum eget.</p>
    <p>Ut sed libero et nisi blandit blandit. Vivamus lectus leo, sollicitudin sed porttitor eget, sollicitudin id sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent sagittis faucibus magna eget ultrices. Phasellus eu elementum ligula. Curabitur et ligula nibh. Aliquam erat volutpat. Sed mattis erat vitae tempus suscipit.</p>
    <p>Nulla dignissim varius justo, ac aliquam quam interdum in. Vestibulum sit amet ex feugiat, pretium nunc eget, volutpat nibh. In rhoncus eros nec ipsum sollicitudin malesuada. Nulla suscipit nunc et eros tempor, eget ornare ipsum luctus. Nullam sed dignissim libero.</p>
    <h4>Cras diam ante</h4>
    <p>Sed eu consectetur purus. Nunc placerat magna tempus arcu condimentum fermentum. Nam quis mattis metus. Sed vestibulum viverra erat ac pretium. Aenean aliquam blandit ultricies. Suspendisse tempor ornare justo, nec efficitur massa vehicula vitae. Curabitur non suscipit turpis, quis vulputate tellus. In vulputate accumsan hendrerit. Sed id nisi nibh.</p>
    <p>Phasellus eget tellus tristique, iaculis est quis, fermentum enim. Sed consectetur sem a eros pulvinar imperdiet. Vestibulum tristique sodales accumsan. Nullam pretium lorem viverra, cursus dolor a, consequat ipsum. Etiam ut elit...

SCSS

* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  &.disable {
  overflow: hidden;
  }
}

.overlay {
  background: inherit;
  position: fixed;
  top: 0;
  transition: background 0.6s ease-in-out;
  width: 100%;
  z-index: 1;
  &.active {
    background: rgba(0, 0, 0, 0.7);
    height: 2000px;
  }
}

.y-wrap {
  margin: 0 auto;
  position: relative;
  width: 90%;
}

.nav {
  border: 1px solid #ccc;
  background: white;
  margin: 0 0 24px;
  padding: 12px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
  &.inactive {
    background: none;
    border: 1px solid transparent;
  }
}

.nimg {
  width: 60px;
  &.col2 {
    display: inline-block;
    width: 200px;
    &:first-of-type {
      margin-right: 30px;
    }
  }
  &.opacity {
    opacity: 0.1;
  }
}

img {
  display: block;
  height: auto;
  width: 100%;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.nabs {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

// Burger menu button
$burger--thickness: 4px;
.burger {
	$width: 28px;
  background: none;
  border: 0;
  border-bottom: $burger--thickness solid currentColor;
  cursor: pointer;
	outline: 0;
	padding: 0;
  transition: border-bottom 1s ease-in-out;
	-webkit-transition: border-bottom 1s ease-in-out;
	width: $width; 

	// Fix for extra space in Firefox
	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
  
  &.active {
    border-bottom: 4px solid transparent;
    &:before {
      transform: rotate(-405deg) translateY(1px) translateX(-3px);
      -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
    }
    &:after {
      transform: rotate(405deg) translateY(-4px) translateX(-5px); 
      -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);       
    }
  }

	&:before {
		content: "";
		display: block;
		border-bottom: $burger--thickness solid...

JavaScript

(function($) {

	var app = {
  	mobileToggle: function() {
    	$(document).on('click', '#mobile', function() {
      	$('html').toggleClass('disable');
        $('#mobile').toggleClass('active');
        $('#themobilemenu').toggleClass('active');
        $('#thenav').toggleClass('inactive');
        $('#thenimg').toggleClass('opacity');
        $('#theoverlay').toggleClass('active');
      });
    },
    init: function() {
      app.mobileToggle();
    },
  }

  $(document).ready(function() {
  	app.init();
  })

})(window.jQuery)


// SOURCES

// https://codepen.io/eduardoboucas/pen/BNyKwO