README

   1 An SCSS mixin for pure CSS responsive toggle menus without hacks.
   2
   3 The selectors name follows the BEM scheme, the file structure follows SMACSS.
   4
   5 Inspired by:
   6   - http://bradfrost.com/blog/web/responsive-nav-patterns/
   7   - http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800
   8   - https://gist.github.com/joesnellpdx/4151902
   9   - https://codepen.io/joesnellpdx/pen/ktGdx
  10
  11
  12 Dependencies:
  13   - sassc or ruby-sass
  14
  15
  16 Demo:
  17   1. Install 'sassc', on Debian systems:
  18     $ sudo apt-get install sassc
  19   2. Download this code.
  20   3. Run 'make' to build the final css style.
  21   4. Load the page:
  22     $ xdg-open index.html
  23
  24
  25 How it works
  26 ============
  27
  28 In HTML, linking to an element using its fragment id allows to pass some state
  29 info to the page via the URL and then capture it in the CSS :target selector.
  30
  31 Moreover HTML specifies the behavior of scrolling when navigating to
  32 a fragment id, in particular the specification says: "if the destination is
  33 not being rendered the User Agent must do nothing", see also
  34 https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
  35
  36 So, according to the specification linking to an hidden element using its
  37 fragment id does not cause any scrolling.
  38
  39 This behavior is to use a simple link as a mechanism to set the states of the
  40 menu (show, hide) and style them in CSS.