getbasis-drawer
v4.0.0
Published
This is a css module for the Basis.
Downloads
3
Readme
getbasis-drawer
This is a css module for the Basis.
Basis
- Repository: https://github.com/getbasis/basis/
- Documents : http://getbasis.github.io/
Get Started
Install
$ npm install getbasis
$ npm install getbasis-drawer
Stylus
@import 'node_modules/getbasis-drawer/src/stylus/basis';
@import 'node_modules/getbasis-drawer/src/stylus/object/component/drawer';
Javascript
import $ from 'jquery';
import BasisDrawer from 'node_modules/getbasis-drawer/src/js/drawer.js';
new BasisDrawer();
HTML
[data-c="drawer__body"] must be right under [data-c="drawer"]
<div class="_c-drawer" data-c="drawer">
<nav id="drawer" class="_c-drawer__body" data-c="drawer__body" role="navigation" aria-hidden="true">
<ul>
<li class="_c-drawer__item"><a href="#">menu</a></li>
<li class="_c-drawer__item"><a href="#">menu</a></li>
<li class="_c-drawer__item">
<a href="#">menu</a>
<div class="_c-drawer__toggle" data-c="drawer__toggle" aria-expanded="false" aria-controls="drawer-submenu">></div>
<ul id="drawer-submenu" class="_c-drawer__submenu" data-c="drawer__submenu" aria-hidden="true">
<li class="_c-drawer__subitem"><a href="#">submenu</a></li>
<li class="_c-drawer__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="_c-hamburger-btn" data-c="drawer-btn" aria-expanded="false" aria-controls="drawer"></div>
Browser support
Modern Browser and IE10+
License
MIT License