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;)

  8. Hey, would you mind explaining the top part of your js code a bit (the hasClass function)? I feel a bit confused while reading it. However, it works beautifly.

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

You must be logged in to comment.