Floating Navigation Bar

You've likely seen it while browsing the Internet – a navigation bar that sticks to the top of your screen as you scroll down a page. It ensures the navigation bar is always floating there, waiting to be used.

This can be easily set with the Float Panel script (3kb only).

Demo & Source Code

The demo 4 that you can download from Accordion Menu

Directions

1. Add float panel script

<!-- add the link into the head section of the page --> <script src="float-panel.js"></script>

2. Add class="float-panel" to the menu

<div id="accordion" class="float-panel">...(menu code)...</div>

Note:

• You can wrap the accordion menu with a float panel rather than setting the menu directly to be a float panel: <div class="float-panel"> <div id="accordion">...</div> </div>
• If you want the float panel to always have a space to the top of the screen, you can add data-top attribute: <div class="float-panel" data-top="40">...(content)...</div> <!--Then the panel will be 40px off the top of the screen-->

It's all there is to it.

For more details please visit Float Panel, or download the demo 4 from Accordion Menu.