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.