Download Static top bar menu


Put this into your <HEAD> section

Put this into your <BODY> section


The menu is initialized in a window.onload event. This will call the function initMenuWithDocking() which will create the toolbar above the rest of your page content.

You define the buttons and button actions in two separate arrays:
/* Buttons for the toolbar */ var toolbarButtons = ['images/button1.gif','images/button2.gif','images/button3.gif', 'images/button4.gif','images/button5.gif','images/button6.gif', 'images/button7.gif','images/button8.gif']; /* Javascript functions for the buttons on the toolbar */ var toolbarActions = ['jsAction1','jsAction1','jsAction1','jsAction1','jsAction1', 'jsAction1','jsAction1','jsAction1']

The first array is an array of paths to your buttons. The second array is name of the javascript function that will execute when someone clicks on a button.


The toolbar as it is uses images of 30 x 28 pixels. If you want to use a different height of your buttons, remember to update the height of the toolbar. This is done in the CSS(#dockingBar, #dockingBarImageHolder and #dockingBarSpacer).

You can download the example buttons by right clicking on them below and selecting "Save target As". Put them in a sub folder called images.


I like your script. Nice work. I added the title property for "alt" (image type hovering effect) to your "addButtons(initObj)" function/*created another array for the hovertext */var toolbarAlts = ['Button 1','Button 2','Button 3','Button 4','Button 6','Button 7','Button 8','Button 5']/*insert in function*/button.title = toolbarAlts[no];
Mark at 10:50PM, 2011/03/11.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2022