Phonon Framework

Phonon

Side Panels

The side panel slides in from the left or from the right. On tablets, you you can expose it.

We used/forked a tiny library called snap.js to support gestures.


Live Example


Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="side-panels.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="side-panels.js"></script>

HTML/CSS

Include the HTML code below in your index.html file outside page declarations. If the side panel should be visible from the left, add the class .side-panel-left or from the right .side-panel-right.

Side panels are now supporting a single page or many pages with the data-page attribute.

Data attributes options

Data-attribute Type Description
data-expose-aside string the side panel is visible on tablets only if the value is left or right
data-disable string Disable drag and drop from the left or right
data-page string The page (or couple of pages separated by a comma) that can enable the side panel
<div class="side-panel side-panel-left" data-expose-aside="none" data-disable="right" data-page="home, pagetwo" id="side-home">
    <header class="header-bar">
        <button class="btn pull-right icon icon-close" data-side-panel-close="true"></button>
        <div class="pull-left">
            <h1 class="title">Panel</h1>
        </div>
    </header>

    <div class="content">
        <ul class="list">
            <li><a class="padded-list">Profile</a></li>
            <li><a class="padded-list">About</a></li>
            <li><a class="padded-list">Settings</a></li>
            <li><a class="padded-list">Login</a></li>
        </ul>
    </div>
</div>

JavaScript

Open

Open a side panel with its id.

phonon.sidePanel('#side-panel-id').open()

Close

Close a side panel with its id.

phonon.sidePanel('#side-panel-id').close()