Off-canvas Navigation/Menu (Mobile) in Pure CSS using Tachyons?

[nelsonic]

Can we build an "off-canvas" in pure CSS (without) an JS...?
Links/examples/code please if you have come across it! 👍

Edit:

Thanks to @Cleop for implementing this for the @dwyl site. #10 (comment)
We have split the code and simplified it so that anyone can learn from it!

GOTO: https://github.com/dwyl/learn-tachyons#responsive-navigation-menu

[iteles]

This is a pure CSS one that looks good, but I needs to be 'converted' to tachyons if we use it (looks mostly achievable without custom tachyons classes): https://isabelcastillo.com/pure-css-mobile-toggle-menu

[Cleop]

This is what has been implemented on the dwyl-site redesign: https://github.com/dwyl/dwyl-site/pull/264/files#diff-b0638442d6af953ff33fca3d49113579L18

It is based on a similar approach to the link shared by @iteles. In summary you use a checkbox as your burger menu which alternates between hiding and revealing the menu when it is checked or unchecked (ie. when a user clicks on the burger to open/close the menu). The checkbox is hidden by using a <label> which is essentially a custom checkbox and in our case we use the burger bars as what we display to the user (to them it looks like a regular button not a toggling checkbox).

In order to display the menu, another class is required which uses the magic of the tilde ~ to alter the display of the menu elements by increasing their height so the hidden content can then be seen. The tilde looks for the sibling of the checkbox which contains the class .menu and changes on the active state of :checked (see the css excerpt below or checkout: https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean to learn more about how tildes work.)

Which looks like:

It was achieved using:

• font awesome for the burger 'bars' shape with tachyons styling for coloring/sizing etc.
• Tachyons absolute positioning to position this absolute top-1 right-1
• Tachyons display options for different screen sizes dn-ns (display none on screens that are not small ie. don't show the burger menu unless you're using a mobile screen)
• There were two custom classes created

As tachyons doesn't have min/max height values or this kind of transition specifically.

[johnyluyte]

Not pure CSS, but for anyone looking for a javascript way, here is an example: https://coralproject.net/

Right click to view its source and search for openNav.

It uses simple javascript to manipulate DOM class, and uses SVG for the burger button. Quite clean and straightforward.

[nelsonic]

GOTO: https://github.com/dwyl/learn-tachyons#responsive-navigation-menu