Is it possible to create "hamburger icon" menu without javascript?

Basically I want to build the expected 3-bar-line menu functionality that is common on the web today. I’m just not sure if it’s possible with “just” css and html. Is it?

If so, please explain or link me to a guide somewhere. Here is what I have currently. https://codepen.io/anon/pen/jLdqBW

Try this:

https://johns-jokes.com/downloads/sp-d/jb-button-menus/index-burger.php

Edit:
Whoops, just noticed JavaScript was required :frowning:

Sorry about the incorrect info.

You can activate the menu using the checkbox hack (or with focus and adjacent sibling selector) which means no JS is needed but does have issues on older IOS and most android.

Here’s an old example of the checkbox hack.

You are better off using Js to activate the menus and pehaps create a fallback with the other methods instead.

This page
uses JS to activate the menu but if js is disabled the menu still works (albeit with the caveats mentioned above).

1 Like

It can also be done using the target pseudo class to hide/show the menu. If the burger links to the menu’s ID, that ID becomes the active target.

2 Likes

Yes I meant to mention that as my last demo is using :target to activate the menu when js is disabled :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.