Implementing a CSS Slideout Menu

$ cat "

Implementing a CSS Slideout Menu

There are plenty of tutorials available for how to implement a CSS slideout menu, but unfortunately the majority use far to complicated examples to be useful. Because of this I decided to put an extremely simple example out there for people (like me) who don't have the patience to wade through loads of unnecessary CSS and markup to find the essential parts.

You can find the HTML, CSS and JavaScript for the slideout menu below. I also created a JSFiddle, for those of you who want to play around with the code yourselves.

To keep the code simple I did not add any vendor prefixes in the CSS, so if you are having trouble viewing the demo, add the vendor prefixes or preferably go grab a decent browser :)

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <link rel='stylesheet' href='style.css' />

    <script type="text/javascript" src='https://code.jquery.com/jquery-2.1.1.js'></script>
    <script type="text/javascript" src='index.js'></script>
  </head>
  <body>
    <nav id='slideout'>
      <a href='' class='menu-toggle'>Close</a>


      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
    <section id='page-content'>
      <a href='' class='menu-toggle'></a>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu dictum tortor. Aenean id sem lobortis, luctus nunc ut, auctor tellus. Mauris et euismod erat. Aenean sollicitudin sapien id tellus convallis, vitae facilisis dui luctus. Cras id tincidunt est, non auctor lectus. Aliquam eleifend, turpis quis vulputate laoreet, risus ligula tincidunt lorem, et mollis sapien lacus at orci. Pellentesque euismod feugiat tortor, ac maximus neque fringilla id. Praesent ut egestas purus. Aenean nec porttitor urna.
      </p>
    </section>

  </body>
</html>

CSS

#slideout {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translatex(-100%);
    transition: all 200ms ease-in-out;

    background: #cecece;
    padding: 20px;
    height: 100%;
}

#slideout.show {
    transform: translatex(0%);
    transition: all 200ms ease-in-out;
}

JavaScript

$(function () {
   $('.menu-toggle').click(function () {
      $('#slideout').toggleClass('show');

       return false;
   });
});

/lambλda/calculus/