Learn how to create a basic slide in menu that works for mobile devices. Using the transform property in CSS, we can create a simple animation that slides the menu in and out of the viewport. We connect it all together with a little simple Javascript and get a great solution for a mobile menu.

View the code:

Want to see how I created the mobile header that’s shown in this video? Here’s the first part that shows how to create the header using CSS or Javascript:


If you have any questions or comments, please leave them below or contact me on Twitter:


Be sure to check out my other videos on my YouTube channel. I have a couple of new series on CSS Grid Layout and CSS Flexbox that might be interesting to you.

Also, if this tutorial helped you it will probably help others. Please share it with your social network!


If you are looking to make money from running your own business at home, visit the links below.

Computers and Software Buyers Guide

Compare Computers and Laptops

Mobile Phones Buyers Guide

Compare Mobile Phones

Game Console Buying Guide

Compare Game Consoles

Tech Shop Offers