css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Here's an easy way to create an iOS style, side sliding menu.


  1. Love the colours, love the style!

  2. Very awesome! I tried coding something similar about a year ago...it didn't go too well. Glad to have this as a resource now!

  3. You don't need JS for this. Look how http://mashable.com/ did it :-)

  4. Thanks for the comments guys. @CREEATION, thats right, you don't need to use JS for this if you nest everything inside a parent element. Why don't you crete a fork and show us how its done?

  5. Awesome @jasonhowmans!

    I like this solution so much better than all of the jQuery options out there.

    I made a fork with a few changes, removed the X scroll bar on the content area and added scrolling to the nav.

    Good show.

  6. I'm having trouble with the menu trigger button. It isn't displaying on my site, so I tried dumbing it down still without luck.

    Finally, I copied your code straight to a new page and it still didn't display on chrome or firefox. Any ideas?

  7. Awesome...this literally saved me hours of hammering away.

    One quick question though, how do you change the icon set in the nav menu? I mean, I can see that it's tied to the "ico" font-family in the CSS, but do you have a library that you were using so I can look through the numbering sequence?

  8. @zapeters This was a few months ago so I can't remember which font I used off the top of my head, but I'd highly recommend using a font generator like fontello (fontello.com) or icomoon (icomoon.io) to generate a font for your specific icon set. There's lots of advantages to doing it this way, and you should just be able to switch out the @font-face for your own font.

    Glad to hear it helped you out :).

  9. Great codepen!

    But have the same problem as @flamingoezz (John) trying to implement the code to my website or even a new website. Could someone please simplify the process we have to take by the menu icon being a font and not an image or such (more newbie-friendly). I tried to use the free picto font: entypo. but with no luck (using the content: '\2261'; in the css for the same three-lined menu icon).

    So please anybody. Simplify this code into something more like this in the HTML:

    <div><a href="menuicon">☰</a></div>

    Hope you understand my weird way of putting things together though! Thanks!

  10. Great work! How do I create/manage the links in the menu? I don't fully understand the JavaScript handling this?

  11. Is there a way to prevent overflow on the x-axis when the menu is opened? Instead of having the content overflow beyond the viewport margins, is there a way to make the content responsive and move to lines below?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.