Left Sidebar
This sidebar (panel) is located on the left side. To close, click on the button below, swipe to close or click off the panel.
Right Sidebar
This sidebar (panel) is located on the left side. To close, click on the button below, swipe to close or click off the panel.
Nightly
Sidebars
You can have as many sidebars on one page as you want. Left or right
CSS3 Transitions
There are 3 transitions types ready for you. Use one of these 3 attributes:
data-display="overlay"data-display="reveal"data-display="push"
You can also specify location of sidebar:
data-position="left"data-position="right"
Where do I put sidebar markup?
In between <div data-role="page"> and <div data-role="header"> like so:
<div data-role="page">
<!-- SIDEBAR start -->
<div data-role="panel" id="sidebar">
<!-- panel content -->
</div>
<!-- SIDEBAR end -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div> <!-- page end-->
How do I open sidebar?
Use anchor tag with panel (sidebar) ID.
<a href='#panel1'>Open sidebar</a>
How do I close sidebar?
Use anchor tag with target ID and data-rel attribute.
<a href='#panel1' data-rel="close">Close sidebar</a>
How do I close sidebar from inside?
Use anchor tag with only data-rel attribute. Use only inside sidebar.
<a data-rel="close">Close sidebar</a>
Sidebar Examples
Left, right sidebars with different transitions and different content.
Left sidebar
Right sidebar
Left sidebar with navigation
Right sidebar with navigation
NIGHTLY 2015. All rights reserved.