Pikabu – Off-Canvas Menu Framework

Pikabu is a speedy, flexible off-canvas framework for flyout panels. Created by the Mobify Team.

Preview

pikabu

Usage

Add the following css in the head of the document:

<link rel="stylesheet" href="//cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.css?x92026">
<link rel="stylesheet" href="//cdn.mobify.com/modules/pikabu/0.2.1/pikabu-theme.min.css?x92026">

and also add the js script:

<script src="//cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.js?x92026"></script>

and then create a instance:

// All options are optional
var pikabu = new Pikabu({
    // Specify left and right sidebar widths independently
    widths: {
        left: '70%',
        right: '70%'
    }
});

after creating creating the instance you can use it like this:

$('.m-pikabu').pikabu({
    viewportSelector: '.pikabu-viewport'
});

Browser Support

  • Safari 4.0+
  • Firefox 4.0+
  • Chrome 12.0+
  • Opera 12.0+
  • Internet Explorer 10.0+