Super Panel
Super Panel will slide out from the left or right side of the screen with additional content.
- Responsive Tool: The panel can automatically show/hide any elements in the page at a preset breakpoint (demo 3).
- Pure JavaScript(5kb). jQuery is not required.
- Cross platform and browser support (including IE 7)
- Completely FREE to use.
Get Started
-
Download the source code
-
Add script and stylesheet links to the page
<!-- add the links into the head section of the page --> <link href="res/super-panel.css" rel="stylesheet" /> <script src="res/super-panel.js"></script> -
Add Super Panel
<div id="panel1"> ... (any content inside the panel) ... </div> -
Add panel buttons or links to toggle the panel
<span data-panel="panel1" class="panel-button"></span>- The access button or link can be any tag: SPAN, DIV, A, ... with data-panel="the panel id", and class="panel-button".
- You can add multiple access buttons (usually when the button has not been styled to position:fixed). For example, in the demo 3, one button is for opening the panel and the other that is placed inside the panel is for closing the panel.
-
If you want to load the panel with dynamic content
Some optional attributes can be added to the panel button if you want to launch the panel with dynamic content or even update something in the page. Example codes are available in the demo 4:-
data-click="functionName[, params]"
Then clicking on the button or link will trigger the function that is usually programmed to update the panel content.
You can optionally include parameters as many as you like following the function name. -
data-ajax="URL, callback[, params]"
Then clicking on the button or link will trigger an Ajax request to the URL. When the response is returned, the callback function will be called to handle the returned data.
- You can optionally include more parameters following the callback function name.
- If the Ajax URL is pointing to a web page, it will only retrieve the content inside the <body>...</body>.
-
-
JavaScript
Open the super-panel.js with Notepad, and customize the options:
var panelOptions = { panelId: "panel1", slideInFrom: "left", // e.g. "none", "bottom", "right", "top,10%" speed: 200, // in ms showMode: "default", //"default", or "yn, 1000, ny" transparentLayer: true, resizeCallback: null }; var panel1 = new McSuperPanel(panelOptions);slideInFrom:The slide direction when the panel is opening. Its value can be:
"left", "right", "top", "bottom", or "none"
"none" means no slide direction. Then the panel will fade in from its default position.
- You can also add an offset value to the direction. For example, "top, 10%" (demo 3 has this setting), then the panel will slide in from 10% of its top position.
- Usually the style of #panel1 is set to:
-
When { slideInFrom: left }:
#panel1 {left:0; right:auto;} -
When { slideInFrom: right }:
#panel1 {left:auto; right:0;}
-
When { slideInFrom: left }:
speed: the sliding or fading speed in milliseconds.
showMode: Its possible values:- "default": The page will by default show the panel button. The panel is hidden.
-
"mode, breakpoint, mode":
- mode has two letters, either "y" or "n". The first one is for the panel button, and the second is for the panel.
- breakpoint is a number, or a number followed by "d". The former stands for browser width, and the later stands for device width.
For example, "yn, 414d, ny":- The panel button is shown and the panel is hidden in mobile devices(414px is the device width of iPhone 6 plus). The panel will be shown when the panel button is clicked.
- With bigger devices (wider than 414px) the panel button is invisible, and the Super Panel will always be present and accessible.
Another example, "yn, 1000, nn":- The panel button is shown and the panel is hidden if browser width is or smaller than 1000px;
- Both the panel button and the panel will be hidden and non-accessible if browser width is larger than 1000px.
transparentLayer:true, 1, or false indicating if other areas of the page should be covered by a semi-transparent layer when the panel is opened.
Difference between true and 1:- true: Clicking on the semi-transparent layer will also close the panel.
- 1: The panel will not close when the semi-transparent layer is clicked. Users have to click the close button to close the panel.
resizeCallback:The handler of the window resize event.
For details please refer to the Event handlers and built-in functions section in this page.
Dynamic Content
The content is retrieved from the page by a callback function.
The target link is configured with the following attribute:
data-click="myFunc, c0"Then clicking the link will trigger the myFunc function with the passed "c0" parameter.
You can include as many parameters as you like.
Click Callback Function
You will see the following function in the super-panel.js of demo 4.
function myFunc(id) { var innerDiv = document.getElementById("panel1-inner"); innerDiv.innerHTML = document.getElementById(id).innerHTML; }API
Common users can skip this section as the built-in functions are rarely used.
-
Stylesheet
- Please refer to the super-panel.css file in the download package for the styles of the Super Panel and the panel button.
- Pay special attention to the z-index value of the panel. Set its value to be larger than that of any other elements in the page.
- If the panel buttons are not styled as position: fixed, you may need to add two panel buttons for the Super Panel: one is for opening the panel and the other is for closing. Please refer to the source code of demo 3 to see how they are styled in the stylesheet.