<img id="calloumi" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68705/calloumilogo.svg" alt="" />
<section id="p_1">
  <div id="p_case-1">
    <div id="p_screen-1">
      <ul id="menu-1">
        <li class="m_1-item">Home</li>
        <li class="m_1-item">About</li>
        <li class="m_1-item">News</li>
        <li class="m_1-item">Store</li>
        <li class="m_1-item">Contact</li>
      </ul>
      <div id="m_button-1">
        <span class="line-1 top-1"></span>
        <span class="line-1"></span>
        <span class="line-1 bottom-1"></span>
      </div>
    </div>
  </div>
  <article id="info-1">
    <h1>Menu One</h1>
    <p>Nothing too flashy but kinda sharp.</p>
  </article>
</section>

@import url(https://fonts.googleapis.com/css?family=Montserrat);
* {
  box-sizing: border-box
}

body {
  margin: 0;
}

#p_1 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/68705/IMG_0107.JPG);
  background-size: cover;
  width: 100%;
  height: 830px;
  float: left;
  font-family: 'Montserrat';
  padding: 6%;
}

#p_case-1 {
  float: left;
  background: #121212;
  width: 300px;
  padding: 60px 16px;
  border-radius: 20px;
  border: 3px solid #ccc;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.6);
}

#p_screen-1 {
  width: 260px;
  height: 420px;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
  background: #eee;
  margin: 0 auto;
  cursor: pointer;
}

#menu-1 {
  background: #2B3C6D;
  float: left;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
  height: 420px;
  margin: 0;
  padding: 80px 0 0 0;
  overflow: hidden;
  width: 0;
  transition: width 0.3s ease;
}

.m_1-item {
  list-style-type: none;
  padding: 16px 40px;
  font-size: 20px;
  border-top: 1px solid #516190;
  color: #fff;
}

.menu-footer {
  width: 200px;
}

#m_button-1 {
  width: 60px;
  cursor: pointer;
  padding: 4px;
  margin: 16px;
  float: left;
  position: absolute;
}

.line-1 {
  width: 60px;
  height: 10px;
  border-radius: 5px;
  background-color: #444;
  margin-bottom: 6px;
  display: block;
  transition: 0.3s ease;
}

.tilt-top {
  transform: rotate(-45deg);
  width: 40px;
  margin-left: -5px;
  margin-bottom: 1px;
  margin-top: 5px;
}

.tilt-bottom {
  transform: rotate(45deg);
  width: 40px;
  margin-left: -5px;
  margin-top: -5px;
}

.show-menu-1 {
  width: 200px !important;
}

.change-1 {
  background: #fff;
}

#info-1 {
  float: left;
  color: #2B3C6D;
  font-size: 20px;
  width: 50%;
  padding: 6%;
  border-radius: 10px;
}

#info-1 h1 {
  border-bottom: 4px solid;
  font-size: 40px;
}

#calloumi {
  position: fixed;
  width: 160px;
  right: 0;
  margin: 20px;
}

$('#m_button-1').click(function() {
  $('.top-1').toggleClass('tilt-top');
  $('.bottom-1').toggleClass('tilt-bottom');
  $('#menu-1').toggleClass('show-menu-1');
  $('.line-1').toggleClass('change-1');
})