Simple Off Canvas Menu

a simple off canvas menu with some CSS and jQuery.

by ian_smithz

HTML

<nav id="menu">
    <a href="#" class="menu-link">Menu</a>
       <ul>
       <li><a href="#">Minions</a></li>
       <li><a href="#">poopayee</a></li>
       <li><a href="#">Bappleees</a></li>
       <li><a href="#">bananaaaa</a></li>
    </ul>
   </nav>
   <div id="content">
    <!-- restlicher Seiteninhalt -->
</div>

CSS

#menu {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         left: -15.625em;
         height: 100%;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background:dimgrey;
}

 #menu.active {
        -webkit-transform: translate(15.625em, 0px);
        -moz-transform: translate(15.625em, 0px);
        -o-transform: translate(15.625em, 0px);
        -ms-transform: translate(15.625em, 0px);
        transform: translate(15.625em, 0px);
}

#content {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.25s ease;
       -moz-transition: 0.25s ease;
       -o-transition: 0.25s ease;
       transition: 0.25s ease;
}

#content.active {
       -webkit-transform: translate(15.563em, 0px);
       -moz-transform: translate(15.563em, 0px);
       -o-transform: translate(15.563em, 0px);
       -ms-transform: translate(15.563em, 0px);
       transform: translate(15.563em, 0px);
}

.menu-link {
      position: absolute;
      top: 15px;
      right: -70px;
      background:black;
      color: white;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}

a{
    color:white
}

JavaScript

$(".menu-link").click(function(){
      $("#menu").toggleClass("active");
      $("#content").toggleClass("active");
});