Accordion Navigation in Side Panel

The accordion menu can be easily converted to side navigation menu if you wrap the menu with a Super Panel.

You can configure the Super Panel to slide out or fade out the menu from any positions in any directions.

Steps:

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>

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