offcanvas-menu

0.1.6 • Public • Published

Off Canvas Menu

Gitter chat

devDependencies MIT license Issues


Check here for a demo.

Installation

Bower

bower install offcanvas-menu --save

NPM

npm install offcanvas-menu --save

After Bower or NPM install, copy the files from dist/css and dist/js to your project's assets folder.

Without a Package Manager

Clone repo, or download zip.

Usage

A working sample is available in the download, in the 'dist' folder. Eventually I'll have a Bower and/or NPM installation available. For now clone the repo or download the .zip and copy the CSS and JS files from inside the dist folder, to wherever in your project you would like.

Here is the expected HTML structure:

...
<head>
    ...
    <link rel="stylesheet" href="path/to/css/offcanvas-nav.min.css">
</head>
 
<nav class="offcanvas-nav">
    <ul class="offcanvas-nav__list">
        <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Item 1</a>
        </li>
        <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Item 2</a>
        </li>
        <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Item 3</a>
        </li>
        <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Item 4</a>
        </li>
        <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Item 5</a>
        </li>
    </ul>
</nav>
 
<a id="nav-toggle" href="#" class="offcanvas-nav__toggle">Menu</a>
...
 
    <script src="path/to/js/offcanvas-nav.min.js"></script> 
</body>

Development

Feel free to do what you'd like with this. Clone or fork the repo, type npm install and have your way with it. Use grunt build to compile Less to CSS, and lint and minify JS, and update the dist folder. Use grunt default to run the build, and continue to watch the Less and JavaScript files for changes.

Coming soon

  • Fallback CSS for older versions of IE - maybe.
  • Bower and/or NPM packages
  • Not much other than that. This thing is pretty basic I think...

Off-canvas Menu © 2014-2015, Mark Rabey. Released under the MIT License.
Authored and maintained by Mark Rabey

markrabey.com  ·  GitHub @MarkRabey  ·  Twitter @MarkRabey

Readme

Keywords

none

Package Sidebar

Install

npm i offcanvas-menu

Weekly Downloads

0

Version

0.1.6

License

MIT

Last publish

Collaborators

  • markrabey