How to replicate switching mobile bootstrap navigator (without using bootstrap)?

Question

I am talking about a button that appears under a certain width of the screen that hides / hides the menu when pressed (screenshot below). I am trying to reproduce its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).

I looked at the source code, but I can’t determine exactly how this works, and what replication behavior is the most efficient way. From what I can tell, it works with javascript, applying a hidden / hidden class activated by the button in the menu.

Is it possible to reproduce this with the checkbox css flag? Or is it better to use javascript?

Answer 1

It is pretty simple:

• Add hamburger menu icon
• You have a CSS class that activates the navigation area.
• Make JS add / remove this class from the navigation area
• Use CSS transitions to care for animations (they are likely to be accelerated on a mobile device)

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

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

Answer 2

edit:

The first time I misunderstood the question.

I think you better use javascript.

If you are using jquery, you can use the toggle method.

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