【jQuery】スマホでも使えるスライドナビゲーションPikabu

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したPikabuの使い方です。設定で左からでも右からでもメニューが出てくるのでFacebookアプリのメニューに似てます。

CSS

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

JavaScript

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.js"></script>

基本的な使い方

var pikabu = new Pikabu({
viewportSelector: '.m-pikabu-viewport',
// Specify left and right sidebar widths independently
widths: {
left: '70%', // slide-in from left
right: '70%' // slide-in from right
}
});

HTMLマークアップ

<!-- the viewport -->
<div class="m-pikabu-viewport">
<!-- the left sidebar -->
<div class="m-pikabu-sidebar m-pikabu-left">
<!-- left sidebar content -->
<h2>Left Sidebar Content</h2>
</div>
<!-- the main page content -->
<div class="m-pikabu-container">
<header>
<a class="m-pikabu-nav-toggle" data-role="left">
Left Menu
</a>
<h1>Pikabu</h1>
<a class="m-pikabu-nav-toggle" data-role="right">
Right Menu
</a>
</header>
<section>
<!-- Body content goes in here -->
<h2>
<strong>Pikabu</strong>
is a speedy, flexible framework
for off-canvas flyout panels.
</h2>
<p>
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit.
</p>
</section>
</div>
<!-- the right sidebar -->
<div class="m-pikabu-sidebar m-pikabu-right">
<!-- right sidebar content -->
Right 
</div>
</div>

オプション

var pikabu = new Pikabu({
// The viewport encapsulates all content & pikabu sidebars on the page.
viewportSelector: '.m-pikabu-viewport',
// If you'd like to request different elements be used as controls, you 
// can easily override any of the default pikabu class names.
// IMPORTANT: If you change the class names here, please remember to 
// change the appropriate classes in the stylesheets as well.
selectors: {
element: '.m-pikabu-container', // Selector for page content
navToggles: '.m-pikabu-nav-toggle', // Pikabu toggle button
overlay: '.m-pikabu-overlay',   // Click-to-close overlay
// Sidebars
common: '.m-pikabu-sidebar',    // Base class for either sidebar
left: '.m-pikabu-left',         // Left sidebar class
right: '.m-pikabu-right'        // Right sidebar class
},
// Specify left and right sidebar widths independently
widths: {
left: '70%',
right: '70%'
},
// Functions to trigger on initializing, opening and closing the sidebar
onInit: function() { ... },
onOpened: function() { ... },
onClosed: function() { ... }
});

メソッド

.scrollTo()

pikabu.scrollTo(500);

.device()

pikabu.device({
has3d: [true for 3d transitions],
hasOverflowScrollingTouch: [true overflow scrolling],
height: [returns document height],
isAndroid: [returns true if the device is an Android],
isLegacyAndroid: [returns true if the android < 2.3],
supportsTransitions: [true for transitions],
transitionEvent: [event fired on transition],
width: [returns document width]
});

.openSidebar()

pikabu.openSidebar('right');

.closeSidebars

pikabu.closeSidebars();

.activeSidebar

pikabu.activeSidebar // 'left' or 'right'

.$sidebars

pikabu.$sidebars[pikabu.activeSidebar]

Mobile Safari 3.1.3+
Android Browser 2.1+
Android Chrome 1.0+
Android Firefox 1.0+
Windows Phone 7.5
Safari 4.0+
Firefox 4.0+
Chrome 12.0+
Opera 12.0+
Internet Explorer 10.0+

ライセンスはMIT

 

【jQuery】スマホでも使えるスライドナビゲーションPikabu

  • LATEST
  • RELATED
  • POPULAR