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

A simple push menu without jQuery. Just pure vanilla Javascript and CSS.


  1. Nice! If you do not need to support older browsers you might even use element.classList.add, element.classList.remove, element.classList.contains and element.classList.toggle to add an remove classes on elements.

  2. This works great. It would be nice to be able to close the menu by clicking anywhere in the body (to the right of the menu). Awesome job either way!

  3. Thanks! @rendro, I needed to support older browsers. @abrahamjuliot, agree! I'll put up another menu tomorrow and will add that feature.

  4. Cool! It's always nice to see some vanilla js for these simple solutions! Although I'd probably use classList and polyfill it when needed, but I assume your solution s safer and has better performance.

  5. Sometimes you don't need even javascript :) http://codepen.io/suez/pen/LEzabX (this fork weaker in usability, but your code is really hard to refactor...)

    Few tips:

    1) Don't use margins or left for simple content movement. Learn and use css transforms (translateX/translateY).

    2) Don't use css vendor prefixes. You can press magic checkbox "Autoprefixer" in css tools and this will save you from suffering.

    3) Try to learn css preprocessors like SASS (with SCSS syntax). This will make your life much simpler and pleasant.

    Nice sense of style btw :)

  6. did a CSS version of this here(http://codepen.io/flowbob/pen/Eawzzw) with checkbox. The CSS is the same mess, dind't refactor. As Nicolay said, try to lern SCSS, you'll love it. I like the styles as well ;) Keep it up!

  7. @suez Thank's for you input. I use SCSS or LESS (depending on the project) in 99% of the time. But I did the base of this menu for a client that only use vanilla css in their system so I decided to limit myself to that. I think is good to write some old school css once in a while to not forget what I compile all day;) Same with Autoprefixer that I totally love but limited myself not to use.

    @flowbob The classic checkbox solution:) I did a similar solution the other day, but it's not semantic so I rather go for js;)

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

You must be logged in to comment.