jQuery

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

November 8, 2015

【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