<body>

        <div class="box">
            <div class="container">
                <div class="header-menu">
                  <button><img src="http://www.i2symbol.com/images/symbols/check/multiplication_x_u2715_icon_256x256.png"></button>
                </div>
                    <ul class="top-menu">
							  <li class="menu-items"><a href="#">Inbox</a></li>
							  <li class="menu-items"><a href="#">Files</a></li>
							  <li class="menu-items"><a href="#">Notifications</a></li>
							  <li class="menu-items twitter"><a href="https://twitter.com/juwanpetty">Say 👋 on Twitter</a></li>
                    </ul>
                
                    <ul class="bottom-menu">
                    <li class="bottom-menu-item"></li>
                    </ul>
            </div>
        </div>

        <div class="open-menu">
            <button><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png"></button>
        </div>
        
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script src="js/slideIn.js"></script>
      
        <h1 class="text">A menu will slide over from the left.</h1>

    
    
    
  

</body></html>
html {
	font-size: 1px;
}

body {
    height: 100%;
    margin: 0;
    background: #F44336;
    color: black;
    font-family: 'Roboto', sans-serif;
}

.box {
    height: 100vh;
    width: 300px;
    position: absolute;
    left: -350px;
    z-index: 1001;
    background: #D32F2F;
    overflow: hidden;
    text-align: left;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
}

.active {
    -webkit-transform: translateX(350px);
    -moz-transform: translateX(350px);
    -o-transform: translateX(350px);
    -ms-transform: translateX(350px);
    transform: translateX(350px);
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.open-menu {
    display: inline-block;
}

.open-menu button{
    display: inline;
    z-index: 0;
    background: transparent;
    border: none;
    margin-top: 10px;
    margin-left: 25px;
    padding: 0px;
    cursor: pointer;
}

.open-menu img {
    width: 30px;
    height: 30px;
}

.header-menu {
    height: 50px;
    background: #D32F2F;
	margin-bottom: 200px
}

.header-menu button {
    position: relative;
    left: 260px;
    background: transparent;
    border: none;
    margin-top: 10px;
    padding: 0px;
    cursor: pointer;
}

.header-menu img {
    width: 40px;
    height: 40px;
}

.top-menu {
    margin-top: 35px;
}

.top-menu a {
    text-decoration: none;
    color: black;
    font-weight: 500;
    font-size: 16rem;
    display: block;
    line-height: 40px;
    padding-left: 35px;
	 transition: .2s;
}

.bottom-menu {
    position: absolute;
    bottom: 0px;
    width: 300px;
    background: #D32F2F;
    text-align: center;
}

.bottom-menu li {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
    color: black;
    font-weight: 700;
    font-size: 13px;
}

.text {
  	font-size: 70rem;
  	position: absolute;
   top: 50%;
   left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
}

/* Misc */
li {
    list-style-type: none;
    padding: 0px 0px 0px 0px;
}

ul {
    padding: 0px;
    margin: 0px;
}

button:focus {
    outline: none;
}

.twitter:hover {

}
$(function() {
  var box = $('.box');
  var button = $('.open-menu, .header-menu');
  button.on('click', function(){
    box.toggleClass('active');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.