Nav:target
Simple, semantic, script-free, accessible navigation pattern.
What is this?
It’s a very simple UI pattern based on the navigation for this site. I’ve stripped back the styling and tidied-up the code to make it easier to put to use on small projects or for prototyping - if you want to use it.
Structure
The navigation sits at the bottom of your document with an id of “#main-naviagtion”.
In the header you place a ‘jump to link’ with a href of “#main-naviagtion”.
When triggered the navigation is positioned at the top of the viewport and slides into position using CSS transitions.
Within the navigation element there’s another ‘jump to link’ - this one has a blank href of “#” which triggers the navigation to close.
Support
Browsers - Works perfectly in all modern browsers and IE9+. In browsers that don’t support :target or css transitions it degrades to a simple jump menu.
Bugs - If you find a bug email me or fork it on GitHub!
Improve it - Help make it simpler, more semantic and more stable.
