An SCSS mixin for pure CSS responsive toggle menus without hacks.

The selectors name follows the BEM scheme, the file structure follows SMACSS.

Inspired by:
  - http://bradfrost.com/blog/web/responsive-nav-patterns/
  - http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800
  - https://gist.github.com/joesnellpdx/4151902
  - https://codepen.io/joesnellpdx/pen/ktGdx


Dependencies:
  - sassc, pysassc, or ruby-sass


Demo:
  1. Install 'sassc', on Debian systems:
    $ sudo apt-get install sassc
  2. Download this code.
  3. Run 'make' to build the final css style.
  4. Load the page:
    $ xdg-open index.html


How it works
============

In HTML, linking to an element using its fragment id allows to pass some state
info to the page via the URL and then capture it in the CSS :target selector.

Moreover HTML specifies the behavior of scrolling when navigating to
a fragment id, in particular the specification says: "if the destination is
not being rendered the User Agent must do nothing", see also
https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid

So, according to the specification linking to an hidden element using its
fragment id does not cause any scrolling.

This behavior is to use a simple link as a mechanism to set the states of the
menu (show, hide) and style them in CSS.