• Stars
    star
    139
  • Rank 262,954 (Top 6 %)
  • Language
    CoffeeScript
  • Created over 11 years ago
  • Updated about 11 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

offCanvasMenu

offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

When activated, offCanvasMenu "slides" the menu element into view, "pushing" other content to the side.

Setup

1. Include jQuery (or Zepto)

Our example comes with jQuery 1.9.1 (but 2.0.0 should work as well).

<script src="lib/jquery-2.0.0.min.js"></script>

If you'd prefer, you can use Zepto instead.

<script src="lib/zepto-1.0.min.js"></script>

2. Include Modernizr (Optional)

If you're using jQuery but want CSS transitions (Super swank! So much prettier!), you'll need Modernizr. Our example comes with a custom build that only contains the tests needed.

<script src="lib/modernizr.custom.js"></script>

You can check out our Modernizr build details.

Needed tests (if you want to add to an existing Modernizr build):

  • csstransforms
  • csstransitions

Note: Modernizr is optional (and not at all necessary if you're using Zepto). If you don't include it, the plugin will fall back to JS animations.

3. Include the plugin

<script src="lib/jquery.offcanvasmenu.js"></script>

4. Initialize your menu!

$.offCanvasMenu();

Options

$.offCanvasMenu({
  direction : 'left',
  coverage  : '70%',
  trigger   : '#menu-trigger',
  menu      : '#menu',
  duration  : 250,
  container : 'body',
  classes   : {
    inner    : 'inner-wrapper',
    outer    : 'outer-wrapper',
    container: 'off-canvas-menu',
    open     : 'menu-open'
  },
  transEndEventNames: {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
  }
});

Options you may wish to change

  • direction: (string) Direction from which the menu enters the containing element. Valid values are left or right. Default left.
  • coverage: (string) Width (in CSS units) of the menu when it is open/active. Relative units are relative to the container element. In all but the most experimental cases this is the body element, which means this effectively translates to coverage of the visible viewport. px or other non-percentage units are OK, but you must include the unit. Default is 70%. We haven't tested with much variation to that!
  • trigger: jQuery selector for the element that should trigger the show/hide of the menu. Default #menu-trigger.
  • menu: jQuery selector for the menu element itself. Default #menu.

Other options

For the most part, you'll want to leave these alone; they're there in case you run into namespace conflicts in CSS or other deeper issues.

  • duration: The time the animation should take to complete in milliseconds.
  • container: Nominally it should be possible to use a different container element other than the body element that is the default. But we haven't tried it!
  • classes : The class names that get assigned to different elements needed to make the menu work. You can change these if you have a conflict or other burning desire for change.
  • transEndEventNames: When CSS transitions are used we attach some events to the transitionend callback, which can differ in name browser-to-browser. We use a method similar to Modernizr and Twitter Bootstrap for determining the event name, referencing the keys in this list.

5. Functions

  • on(): You'll usually run this function right after initializing the menu. It causes the menu to be moved off-canvas and enables toggle(), show(), and hide().
  • off(): This function causes the menu to move to its original position and disables toggle(), show(), and hide().
  • toggle(): Toggles the menu.
  • show(): Shows the menu.
  • hide(): Hides the menu.

Known Issues

Android animation bugs

Some versions of the Android browser handle percentage transforms rather strangely. Specifying a non-percentage value for coverage should alleviate the issue.

License

Released under the MIT License.

This repository contains other libraries that may or may not fall under the same license:

More Repositories

1

hideShowPassword

Because life's too short to waste time re-typing passwords.
JavaScript
736
star
2

drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries.
HTML
666
star
3

lighthouse-parade

A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.
TypeScript
358
star
4

SimpleSlideView

A nifty little jQuery or Zepto plugin for the simplest of sliding views.
HTML
258
star
5

pleasantest

⛵ Write real-browser tests with Testing Library in Jest
TypeScript
172
star
6

simple-svg-placeholder

A very simple placeholder image generator with zero dependencies.
JavaScript
170
star
7

pwastats

A directory of Progressive Web App case studies.
HTML
101
star
8

image-compare

A web component for comparing images with a slider.
HTML
62
star
9

transition-hidden-element

A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute.
JavaScript
52
star
10

elastic-textarea

A web component for progressively-enhanced auto-expanding textareas
JavaScript
35
star
11

image-breakpoints

Given a source image, generate a series of related images at various file sizes.
PHP
28
star
12

guides

Conventions, processes and notes about how we do things
24
star
13

cloudfour.com-patterns

The design system, component library and documentation for cloudfour.com and related projects
MDX
24
star
14

core-hbs-helpers

Handlebars helpers that we usually need
JavaScript
11
star
15

leveller

A jQuery plugin for equalizing element heights.
HTML
10
star
16

lite-model-viewer

A lazy-loaded model-viewer web component
HTML
9
star
17

core-gulp-tasks

⛔️ DEPRECATED Gulp tasks that we usually need
JavaScript
9
star
18

svg-icon-example

JavaScript
8
star
19

constraint-validation-api-demo

Astro
7
star
20

pwa-workshop

The Progressive Web App workshop files
HTML
7
star
21

svg-icon-stress-test

Test page accompanying an article about performance of way too many SVG icons at once.
JavaScript
7
star
22

drizzle-builder

The tool for building a Drizzle.
JavaScript
6
star
23

slides-svg-101

SVG! ♥‿♥
JavaScript
5
star
24

tpp-research-monorepo

JavaScript
5
star
25

stylelint-config-cloudfour-suit

Cloud Four's shareable config + SUIT naming
JavaScript
4
star
26

eleventy-patterns

(WIP) A boilerplate template used to quickly generate pattern libraries and prototyping environments
JavaScript
4
star
27

eslint-config

JavaScript
4
star
28

smashing-mag-sw

CSS
2
star
29

stylelint-config-cloudfour

Cloud Four's shareable config
JavaScript
2
star
30

code-transform-sandbox

TypeScript
1
star
31

pleasantest-site-sandbox

A design and prototyping sandbox for the new Pleasantest site
Nunjucks
1
star
32

generator-drizzle

Yeoman generator for Drizzle-based projects
JavaScript
1
star
33

generator-core-webapp

Yeoman Generator for core web apps
JavaScript
1
star
34

workshop-here-everywhere

Workshop: How to get from Here to Everywhere (Taking your web skills mobile)
PHP
1
star
35

vite-vue-testing-library

Adding Vue Testing Library to a Vite + Vue 3 installation
Vue
1
star
36

scaffolding-example

A demo of how to write your own automated scaffolding script
JavaScript
1
star
37

sky-nav-cls-pe

Demos for the Sky Nav Cumulative Layout Shift + Progressive Enhancement article
Astro
1
star
38

js-sunrise

Study material and workshop for JavaScript
JavaScript
1
star
39

stencil-backbone-example

TypeScript
1
star