Download Static top bar menu

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

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.

Buttons

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.

Comments

Mark
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 Gravatar.com.

Unable to save captcha-image.