Make the Side Menu Responsive

With the Super Panel tool, the side menu bar on the right will become a menu icon when the screen is smaller than a preset breakpoint.

A simple responsive side menu solution

• Include the super panel scripts into the head section of the page: <link href="res/super-panel.css" rel="stylesheet" /> <script src="res/super-panel.js"></script>
• Wrap the menu markup with a super panel <div id="panel1">...(menu markup)...</div>
• Add a super panel button to the page: <span data-panel="panel1" class="panel-button"></span>
• Open the super-panel.js, and configure its options to: var panelOptions = { panelId: "panel1", slideInFrom: "default", speed: 200, showMode: "yn, 1000, ny", //breakpoint: 1000px transparentLayer: false, resizeCallback: null };

Done!

For details please visit Super Panel (demo 3), or see the source code of this demo (the demo 3 that you can download from Accordion Menu).