4

I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).

enter image description here

I've looked at the source code, but can't figure out exactly how it works, and what the most efficient way is to replicate the behaviour. From what I can tell it works with javascript by applying a hide/unhide class to the menu, activated by the button.

Would it be possible to replicate this with the css checkbox hack? Or is using javascript better?

1
  • @nailer: Ah, so it's called a hamburger-menu! I had no idea, thanks!
    – user1694077
    Sep 25, 2013 at 16:22

2 Answers 2

3

This is fairly simple:

  • Add the hamburger menu icon
  • Have a CSS class that makes the nav area active
  • Make JS add/remove that class from the nav area
  • Use CSS transitions to take care of the animation (they're more likely to be accelerated on a mobile device)

I like the implementation on http://purecss.io.

Also check out http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

0

edit:

I misread question the first time.

I think you'd have a better time using javascript.

If you are using jquery you could use the toggle method.

$("#hide-show-button").click(function(){
    $(".nav").toggle();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.