Sliding Menu

menu.css

.navigation {
  background-color: black;
  display: block;
  width: 100%;
  padding: 20px;
}

#closer {
  display: none;
}

.linkblock {
  width:80%;
  background-color: white;
  height: 100px;
  display: block;
  margin-left: 10px;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .navigation {
    width: 100%;
    margin-left: -100%;
    position: absolute;
    z-index: 100;
    transition: all .2s ease-out;
  }

  #closer {
    display: block;
  }

  .showNavigation {
    margin-left: 0;
  }
  
}

menu.html

				<div class="navigation">
					<img src="images/defaultImage.jpg" style="width: 100px; cursor: pointer;" id="closer" />
					<div class="linkblock"></div>
					<div class="linkblock"></div>
					<div class="linkblock"></div>
				</div>
				
				<img src="images/defaultImage.jpg" style="width: 100px; cursor: pointer;" id="clicker" />

menu.js

			$('#clicker').click(function() {
				$('.navigation').addClass('showNavigation');
			});

			$('#closer').click(function() {
				$('.navigation').removeClass('showNavigation');
			})