Download Static top bar menu

Put this into your <HEAD> section

	<style type="text/css">

	/* 
	CSS for this example only
	*/
	body{
		width:100%;
		margin:0px;
		padding:0px;
		text-align:center;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		background-color:#E2EBED;
	}

		
	#mainContainer{
		width:760px;
		border-left:1px solid #000;
		border-right:1px solid #000;
		background-color:#FFF;
		margin: 0 auto;

		text-align:left;
		padding-left:10px;
		padding-right:10px;
	}

	/* End example CSS */
	
	/* Docking bar CSS */
	#dockingBar{
		background-color:#f1f1ec;	/* Background color */
		border-bottom:2px solid #A5A397;	/* Bottom border of docking bar - to get the simulated 3D effect */

		
		left:0px;	
		top:0px;
		z-index:100;
		position:absolute;
		width:100%;
			
		overflow: hidden;
		text-align:left;
		
		height: 45px;	/* IE 5.x  - 2 pixels more than other browsers, height + border bottom*/
		height/* */:/**/43px;	/* Other browsers */
		height: /**/43px;
				
	}
	/* Inner DIV where the buttons are added */
	#dockingBarImageHolder{
		margin-left:5px;
		height:30px;
	
	}
	#dockingBarImageHolder img{
		cursor:pointer;
	}
	.spacer{	/* 3D inset spacer */
		border-top:1px solid #D8D2BD;
		border-bottom:1px solid #FFF;
		height:0px;
	}
	
	body > div#dockingBar{	/* Firefox rule */
		position:fixed;
	}
	/* Spacer  - Same height as toolbar - This element pushes the content on the page down below the toolbar */
	#dockingBarSpacer{
		height: 45px;	/* IE 5.x */
		height/* */:/**/43px;	/* Other browsers */
		height: /**/43px;
				
	}



	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	
	var floatingBarDiv;
	var dockingBarDiv;	
	var dockingBarDivImages;
	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
	var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
	/*  Functions that are executed when buttons are clicked */
	function jsAction1()
	{
		alert('You clicked a button');
	}

	
	function highlightButton()
	{
		if(document.all){
			this.style.filter = 'alpha(opacity=100)';
		}else{
			this.style.opacity = 1;
		}
	}
	
	function deHighlightButton()
	{
		if(document.all){
			this.style.filter = 'alpha(opacity=70)';
		}else{
			this.style.opacity = 0.7;
		}
	}

	/* 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']

		
	function addButtons(initObj)
	{
		for(var no=0;no<toolbarButtons.length;no++){
			var button = document.createElement('IMG');
			button.style.opacity = 0.7;
			button.style.filter = 'alpha(opacity=70)';
			button.onmouseover = highlightButton;
			button.onmouseout = deHighlightButton;
			button.src = toolbarButtons[no];
			if(toolbarActions[no]){
				eval("button.onclick="+toolbarActions[no]);
			}
			initObj.appendChild(button);
		}
	}
	
	function initMenuWithDocking()
	{	
		/* Getting reference to the first tag on the page */
		if(!document.all || Opera)
			var firstBodyEl = document.body.getElementsByTagName('*')[0];
		else
			var firstBodyEl = document.body.childNodes[0];
			
					
		while(firstBodyEl && !firstBodyEl.tagName){
			firstBodyEl = firstBodyEl.nextSibing;
		}	
		
		/* Creating spacer of the same height as the top bar */
		var dockingBarSpacer = document.createElement('DIV');
		dockingBarSpacer.id = 'dockingBarSpacer';		
		document.body.insertBefore(dockingBarSpacer,firstBodyEl);

		/* Creating docking bar */
		dockingBarDiv = document.createElement('DIV');
		dockingBarDiv.id = 'dockingBar';		
		document.body.appendChild(dockingBarDiv);
		
		var spacerRow = document.createElement('DIV');
		spacerRow.innerHTML = '<span></span>';
		spacerRow.style.marginTop = '5px';
		spacerRow.className = 'spacer';
		dockingBarDiv.appendChild(spacerRow);
		
		dockingBarDivImages = document.createElement('DIV');
		dockingBarDivImages.id = 'dockingBarImageHolder';
		dockingBarDiv.appendChild(dockingBarDivImages);	
		
		var spacerRow = document.createElement('DIV');
		spacerRow.innerHTML = '<span></span>';
		spacerRow.className = 'spacer';
		dockingBarDiv.appendChild(spacerRow);
					
		addButtons(dockingBarDivImages);
		
		// General events
		if(MSIE && !Opera && navigatorVersion<7)window.onscroll = repositionDockingBar;
	}
	
	function repositionDockingBar()
	{
		if(MSIE && navigatorVersion<6){
			dockingBarDiv.style.top = document.body.scrollTop  + 'px';
		}else{
			dockingBarDiv.style.top = document.documentElement.scrollTop  + 'px';
		}
	}
	
	window.onload = initMenuWithDocking;
	
	</script>

Put this into your <BODY> section

<!-- No code - Just your page content -->

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.