Having encountered this clever, mobile-friendly navigation that uses Javascript (JS):

CodyHouse Smart Fixed Navigation

...I challenged myself with creating something similar, using only CSS.

Here's the result:

agib.dk's version of CodyHouse's Smart Fixed Navigation

View on Codepen  (HTML+CSS/Less source code)

Please note, that my version may have accessibility issues, and should thus only be used for progressive enhancement like same-page jumplinks, i.e. not as the only means of (primary) navigation.

Update 06 Apr 2016

Note the "hamburger button" (three horizontal lines) might not be sufficiently recognizable as navigation.

Also, I have discovered that my version doesn't work in iOS Safari. I haven't found a fix (yet), but it has likely to do with position: fixed and/or z-index.



Tags

html-css navigation widget-design


Related posts