DEMONAV IS A DEMO OF NAVIGATION
combination of dropdown icons and toggleabe hamburger side drawer. Using flex layout and favoring percents over 4 viewport breakpoints. (i did do a bit of media querying though)
favoring javascript over jquery.
using css3 transitions (not keyframes) over javascript animation.
COMPLETED:
page header reduces content displayed for smaller width (media queries, no other way besides javascript, boo javascript)
dropdown menu appears on hover, closes on mouseleave & toggles on click of the dropdown chevron.
Dropdown menu center aligned, even gutters on large screen (thank you flex)
main content never scrolls, fits page. (thank you flex)
hamburger button toggles side drawer, changes to x to close
side drawer will scroll if there are enough options, else fills full height. close button scrolls with you. (thank you flex)
Side drawer shrinks main content so there is no x overflow (thank you flex)
Main content blurs when side menu is opened.
content components have gutter on large view, minor size adjustments on viewports (thank you flex)
sticky footer (Thank you flex)
clickable buttons change color when hovered
animations: icons slide down/from left for dropdown/side drawer.
Tested in chrome, animations should very rarely (almost never) drop below 60fps (thank you css transitions)