Whole Screen Menu with BLUR background

by Faisal Khan Janjua

HTML

<div class="screen">
  <header>
    <a class="target-burger">
      <ul class="buns">
        <li class="bun"></li>
        <li class="bun"></li>
      </ul>
      <!--buns-->
    </a>
    <!--target-burger-->
  </header>
  <nav class="main-nav" role="navigation">
    <ul>
      <li><a href=""><span>My Account</span></a></li>
      <li><a href=""><span>Billing Information</span></a></li>
      <li><a href=""><span>Order Tracker</span></a></li>
      <li><a href=""><span>Change Password</span></a></li>
      <li><a href=""><span>Log Out</span></a></li>
    </ul>
  </nav>
  <!--main-nav-->
  <div class="container">
    <div class="app-content">
      <ul class="content-list">
        <li>
          <article>
            <figure>
              <img src="https://unsplash.imgix.net/photo-1428930377079-45a584b6dd6b?dpr=2&fit=crop&fm=jpg&h=1575&q=75&w=1050" alt="The Jim Lewis Dalaman Briefcase">
              <figcaption>
                <span class="category">Accessories</span>
                <h1>Eli DeFaria Dalaman</h1>
                <span class="price"> &pound;255</span>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
      <!--content-list-->
    </div>
    <!--app-content-->
  </div>
  <!--contaienr-->
</div>
<!--screen-->

CSS

/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400|Montserrat:400,700);
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
}
input[type=button],
input[type=submit],
input[type=text],
input[type=search],
input[type=password],
select,
button,
textarea {
  margin: 0;
  cursor: pointer;
  outline: none;
  vertical-align: top;
}
input[type=submit] {
  border: none 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}
input[type=radio],
input[type=checkbox] {
  margin: 0;
  padding: 0;
}
input[type=text],
input[type=search],
select,
textarea {
  cursor: default;
}
button {
  border: none 0;
}
*:first-child + html input.button {
  overflow: visible;
  /* remove padding from left/right */
  width: auto !important;
}
/*
 *...

JavaScript

//Custom JS
$(document).ready(function(){
    $('a.target-burger').click(function(e){
        $('div.container, nav.main-nav, a.target-burger').toggleClass('toggled');
        e.preventDefault();
    });//target-burger-click
});//doc-rdy