So I saw a really cool website http://getdigitl.com/ and I thought, I wonder if they have used pseudo after elements to position the arrows between sections?
Yeah they did. It's a really cool effect, that they have used perfectly.
Now if those were to incorporate other SVG's between the elements, I think it could make a very cool diagram system for showing linear progression
Changed some colours and working on styling to make the menu easily reproducible, use less ugly SCSS as BEM is a pile of shite...
Normalize.css added, Fontawesome added, class names fixed AFAIK, changed units to rem's & ems AFAIK...
Designed to be a part of the Standard Computer Interaction Library I am developing as a personal project.
If you use this please know what you are doing or purchase some of my time so I can help you understand how to fit this into your project
Adds tab content behaviour with associated ARIA roles and hints.
modified CSS very basicly
modified JS to read better and to auto-initialize elements with data-directive for tabs
modified CSS to enforce more semantic DOM structure
Adds expandable content behaviour to the element with associated accessibility hints.
Original work by maketea.co.uk
CSS code cleaned
CSS Selectors made more specific
CSS ditched rules for closed state as not open should === closed IMHO
CSS After modified to > with rotation
CSS animations added
CSS removed body tag styling
CSS TODO: separate core from app-specific logic
JS modified to be self-initiated
JS style display none removed