DEMO 1 DEMO 2 DEMO 3 DEMO 4

DEMO 1

Click on the button at the top left corner to see the Super Panel.

The panel has been set to slideInFrom: "left".



Other demos:

Click on the button at the top right corner. The Super Panel has been configured to slideInFrom: "top, 10%", transparentLayer: true.

When the panel is opened, clicking on the semi-transparent layer will also close the panel.

Resize your window to see how the main menu at the top is hiddened, and how it is converted to a side menu that you can expand with a button.

This responsive solution is carried out by the super panel: the panel can automatically show/hide elements in the page when the screen reaches a preset breakpoint.

For details please read the "Built-in event handlers and functions" section in this page.

Click the links below to see how the panel can be opened with different contents which are set by the links' data-click or data-ajax attribute.

Populate panel content by functions:

Link 1   Link 2

<a href="#" data-click="myFunc, c0" class="panel-button btn-primary">Link 1</a> <a href="#" data-click="myFunc, c1" class="panel-button">Link 2</a>

Content retrieved through Ajax:

Link 3   Link 4   Link 5  

<a href="#" data-ajax="src/panel-content1.html, ajaxCallback" class="panel-button">Link 3</a> <a href="#" data-ajax="src/faq.xml, ajaxCallback_2, q1" class="panel-button">Link 4</a> <a href="#" data-ajax="src/faq.xml, ajaxCallback_2, q2" class="panel-button">Link 5</a>

Praesent aliquet erat et luctus placerat.
Nulla fermentum lorem sit amet feugiat efficitur.

Super Panel

Super Panel will slide out from the left or right side of the screen with additional content.

Free Download:   4 demos
Demos & source code  (Release v2016.4.18)


Get Started


 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.