Full screen burger menu

Full screen burger menu.markdown

Full screen burger menu

Hamburger menu to expand to full screen when toggled.

Forked from Paul Sullivan's Pen Full screen burger menu.

A Pen by ne.mmoj on CodePen.

License.

index.html

<div class="menu-collapsed">
  <div class="bar"></div>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis sunt mollitia molestiae maxime, voluptatibus, voluptas placeat minima natus temporibus culpa repudiandae! Nam porro molestiae possimus, laboriosam, vero tenetur consequatur voluptatibus?</p>

script.js

$(".menu-collapsed").click(function() {
  $(this).toggleClass("menu-expanded");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Quicksand);

html {
  height:100%;
}
body {
  height:100%;
  background-color:#369;
}
.menu-collapsed {
  transition:all .25s;
  position:fixed;
  top:10px;
  left:9px;
  height:36px;
  width:36px;
  z-index:1;
  cursor:pointer;
    ul {
      transition:all .05s;
      position:fixed;
      left:-9000px;
    }
  }
  .bar {
    position:fixed;
    left:12px;
    top:24px;
    height:6px;
    width:30px;
    border-radius:15px;
    background-color:rgba(255,255,255,0.75);
    &:before {
      transition:all .25s;
      content:"";
      position:absolute;
      left:0;
      top:-8px;
      height:6px;
      width:30px;
      border-radius:15px;
      background-color:rgba(255,255,255,0.75);
    }
    &:after {
      transition:all .25s;
      content:"";
      position:absolute;
      left:0;
      top:8px;
      height:6px;
      width:30px;
      border-radius:15px;
      background-color:rgba(255,255,255,0.75);
    }
  }
 

.menu-expanded {
  transition:all .25s;
  text-align:center;
  line-height:200px;
  height:100%;
  width:100%;
  border-radius:0px;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.85);
  ul {
    transition:all .05s;
    position:relative;
    left:0;
    z-index:2;
  }
  a {
    transition:all .15s;
    text-decoration:none;
    color:white;
    font-size:2em;
    font-family: 'Quicksand', sans-serif;
    padding:5px;
    &:hover {
      transition:all .15s;
      letter-spacing:2px;
      border:1px solid rgba(255,255,255,.15);
    }
  }
  .bar {
    background-color:transparent;
    transition:all .25s;
    &:before {
      transition:all .25s;
      content:"";
      transform:rotate(45deg);
      top:-0px;
    }
    &:after {
      transition:all .25s;
      content:"";
      transform:rotate(-45deg);
      top:0px;
    }
  }
}

h1 {
  font-size:3em;
  color:white;
  font-family: 'Quicksand', sans-serif;
  text-align:center;
  line-height:250px;
}
p {
  width:80%;
  margin:0 auto;
  color:white;
  line-height:20px;
  font-family: 'Quicksand', sans-serif;
}