Xiao Zhuo Jia avatar Xiao Zhuo Jia

Exploring Pure CSS Navigation

Screenshot of “Exploring Pure CSS Navigation”

http://www.miragecraft.com/articles/exploring_css_menu.html

So there it is, 5 different variations of fully accessible, CSS only mobile menu.

I might have overdone it, but it was fun.

  1. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }