Resolve "Without JS+narrow screens, top menu bar does not work"

• This change makes the hamburger menu work without requiring JS and by only using CSS techniques
• It is implemented by using a technique referred to as checkbox hack: https://css-tricks.com/the-checkbox-hack/

Browser support seems to be very well: https://caniuse.com/#feat=mdn-css_selectors_checked

Tested it on the most recent version of Chrome, Firefox, Chrome on Android, Firefox on Android, Safari and it's even working on IE

With this change we will be one of very few sites that have a working mobile menu when JS is disabled as far as I just learned when trying out a few popular sites. It's also an accessibility gain.

Closes #16 (closed)

added 1 commit

• 44a825ff - Make hamburger menu work with CSS only

Compare with previous version

unmarked as a Work In Progress

added Progress::4_Can review label

assigned to @erxleb87

@erxleb87 Could you please have a look from a technical perspective?

@jandt-desy Is this what you imagined? It should now also work without JS enabled.

changed the description

Perfect from my side. Thanks! I always like when JS can be avoided (if not absolutely necessary)

Can be merged if Fredo is fine with it.

This is cool

Your implementation is spot on, however I would recommend a few lines of documentation what is going on in the SCSS, since it is by far not self-evident. Best to also include the link to the article (which I instantly bookmarked )

Putting the style="display:none" directly into the HTML is a philosophical question. Yes it is an integral part of the construction, but no, CSS does not belong there. As a purist I would have put it into the SCSS as well, but I am willing to accept that it is in the HTML. (Also a small comment there — at least referring to the SCSS — would be awsome

added 1 commit

• 5d6cd9ae - Add improvements according to review suggestions

Compare with previous version

mentioned in commit 53a21688

merged

removed Progress::4_Can review label

resolved all threads