Download menu

Put this into your <HEAD> section

	<style type="text/css">
	
	#dhtmlgoodies_menu{	/* Menu object */
		margin:0px;
		padding:0px;
		width:150px;	/* Width of menu */
	}
	#dhtmlgoodies_menu li{
		margin-top:2px;	/* Space between each menu item */
		
		
		/* Don't change these four values */
		list-style-type:none;				
		clear:both;
		display:block;	
		overflow:auto;
	}
	
	#dhtmlgoodies_menu li a{	/* Text rules for the menu items */
		color:#000;	/* Black text color */
		text-decoration:none;	/* No underline */
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		letter-spacing:1px;	/* Extra space between each letter of the menu items */
		font-size:0.7em;	/* Fixed font size */
		font-weight:bold;	/* Bold font */
		float:left;
		background-color:#F1F1F1;
		padding-left:3px;
		line-height:25px;	/* Height of menu links */

	}
	#dhtmlgoodies_menu li div{
		float:left;

	}
	</style>
	
	<script type="text/javascript" src="color_functions.js"></script>
	<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
	
	************************************************************************************************************/
	
	/* You can modify the following javascript variables as you like */
	
	var initActiveMenuItem = 0; // 	If one of the menu items should be initially highlighted.(-1 = none, 0 = first item, 1 = second...)
	var activeSmallSquareColor = '#D60808'; // Color of small square at the left of each menu item
	var colorSquareWidth = 2; 	// Width of small square;
	var marginSquare = 1;	// Margin at the right of the small color square at the left of each menu item	
	
	var bgColorLinks = "#E2EBED";	// Background color for menu links
	var degreesToDarkenOrLighten = 5; // How many percent point to darken the color above on mouse over (10-15 percent point is usually enough).
	var darkenOnMouseOver = true;	// Darken or Lighten on mouse over (true = darken, false = lighten) 
	/* ABOUT COLORS
	You can use the color schemer at www.dhtmlgoodies.com to find your colors
	
	We use the HSB color system here, The HSB color system is based on three values
	
	* Hue = Which color, i.e. degree on color wheel
	* Saturation = Intensity of the color to use
	* Brightness = Brightness of the color
	
	
	When you use the color schemer at the site, pick a color from the palett or type it into the RGB text box(format #RRGGBB, example #E2EBED)
	Then adjust the value of brightness by typing in a new value in that text box(label "B"). 
	
	*/		
		
	var timeStepOpacitySquare = 15;	// Microseconds between each opacity change	-> Lower value = faster
	var opacityChangePerStep = 10;	// Steps - change in opacity - on mouse out	= Higher = faster	
	var timeStepSwitchBgColor = 10;	// Microseconds between each text background change(darken or lighten)	-> Lower value = faster
	var bgColorStep  = 0.75;	// lower value = slower bg color fading(Usually, you will always have the value 1 or a little lower)
								// Choose a low value if the number of degrees to darken is low.
	
	/************************************************************************************************************
	* END OF USER VARIABLES
	*
	* Don't change anything below here 
	*
	************************************************************************************************************/
	var activeMenuItem = false;
	var activeMenuLink = false;	
	var menuObj;
	var brightnessLink = false; 
	var brightnessLinkMin = false;
	var darkenBrightnessCounter = false; // Darken or lighten - this variable is set manually
	var startHue = false;
	var startSat = false;
	
	
	
	function showMenuItem()
	{
		var hsb = toHSV(this.getAttribute('bgColorItem'));
		if(darkenOnMouseOver){
			var brightness = hsb[2] - (degreesToDarkenOrLighten/100);
		}else{
			var brightness = hsb[2] + (degreesToDarkenOrLighten/100);
		}
		if(brightness<0)brightness=0;
		if(brightness>1)brightness=1;
		var rgb = toRgb(hsb[0],hsb[1],brightness);
		this.style.backgroundColor = rgb;
		this.currentBgColorItem = rgb;
		this.setAttribute('currentBgColorItem',rgb);
		
		var obj = this.parentNode.getElementsByTagName('DIV')[0];
		obj.setAttribute('okToHide','0');
		obj.okToHide = 0;
		this.setAttribute('okToHide','0');
		this.okToHide = 0;
		obj.style.visibility = 'visible';
		
		obj.style.opacity = 0.98;	
		obj.style.filter = 'alpha(opacity=98)';
		

	}
	
	function hideMenuItem()
	{
		if(this.getAttribute('initActive')=='1')return;
		if(this.initActive=='1')return;
		var obj = this.parentNode.getElementsByTagName('DIV')[0];
		obj.setAttribute('okToHide','1');
		obj.okToHide = 1;
		this.setAttribute('okToHide','1');
		this.okToHide = 1;
		obj.style.visibility = 'visible';		
		if(navigator.userAgent.indexOf('Opera')>=0){
			obj.style.visibility = 'hidden';
		}else{
			progressHideSquare(obj.id,(opacityChangePerStep*-1));	
		}		
		progressShowHideBgColor(this.id);	
	}
	
	
	function progressShowHideBgColor(inputId)
	{
		
		var obj = document.getElementById(inputId);
		var currentBgColor = obj.getAttribute('currentBgColorItem');
		if(obj.getAttribute('okToHide')=='0')return;
		if(!currentBgColor)currentBgColor = obj.currentBgColorItem;
		if(currentBgColor){
			var hsb = toHSV(currentBgColor);
			var brightness = hsb[2];			
			brightness+=darkenBrightnessCounter;
			if((brightness>brightnessLink && darkenOnMouseOver) || (brightness<brightnessLink && !darkenOnMouseOver))brightness = brightnessLink;
			var rgb = toRgb(startHue,startSat,brightness);
			obj.style.backgroundColor = rgb;
			obj.currentBgColorItem = rgb;
			obj.setAttribute('currentBgColorItem',rgb);		
			if((hsb[2]<brightness && darkenOnMouseOver) || (hsb[2]>brightness && !darkenOnMouseOver)){
				setTimeout('progressShowHideBgColor(\'' + inputId + '\')',timeStepSwitchBgColor);				
			}else{
				obj.style.backgroundColor = bgColorLinks;
			}
		}			
	}	
	
	function progressHideSquare(inputId,step)
	{
		
		var obj = document.getElementById(inputId);

		if(obj.getAttribute('okToHide')=='0' && step<0)return;
				
		if(document.all){
			var currentOpacity = obj.style.filter.replace(/[^\d]/g,'')/1;

			if(currentOpacity>=99){

			}
			else if(currentOpacity==11){
				obj.style.visibility='hidden';
			}else{
				currentOpacity = currentOpacity + step;
				if(currentOpacity<1)currentOpacity=1;
				if(currentOpacity>99)currentOpacity=9;
				obj.style.filter = 'alpha(opacity=' + currentOpacity + ')';
				setTimeout('progressHideSquare("' + inputId + '",' + (step) + ')',timeStepOpacitySquare);
			}				
		}else{
			step = step / 100;
			var currentOpacity = obj.style.opacity/1;

			if(currentOpacity>=0.99){

			}
			else if(currentOpacity==0.01){
				obj.style.visibility='hidden';
			}else{
				currentOpacity = currentOpacity + step;

				if(currentOpacity<0.01)currentOpacity=0.01;
				if(currentOpacity>0.99)currentOpacity=0.99;
				obj.style.opacity = currentOpacity;
				setTimeout('progressHideSquare("' + inputId + '",' + (step*100) + ')',timeStepOpacitySquare);
			}	
		}		
	}
	
	
	function dhtmlgoodies_initMenu()
	{
		menuObj = document.getElementById('dhtmlgoodies_menu');
		var hsbArray = toHSV(bgColorLinks);
		brightnessLink = hsbArray[2];
		startHue = hsbArray[0];
		startSat = hsbArray[1];
		if(darkenOnMouseOver){
			brightnessLinkMin = Math.max(hsbArray[2] - (degreesToDarkenOrLighten/100),0);
			darkenBrightnessCounter = bgColorStep/100;
		}else{
			brightnessLinkMin = Math.min(hsbArray[2] + (degreesToDarkenOrLighten/100),1);
			darkenBrightnessCounter = (bgColorStep/100)*-1;
		}
		var listItems = menuObj.getElementsByTagName('LI');
		for(var no=0;no<listItems.length;no++){
			listItems[no].id = 'listItem' + no;	
	
			var menuLink = listItems[no].getElementsByTagName('A')[0];
			var height = menuLink.offsetHeight;	
			menuLink.style.display='block';
			menuLink.style.height=height + 'px';
			menuLink.style.lineHeight=height + 'px';
			menuLink.onmouseover = showMenuItem;		
			menuLink.onmouseout = hideMenuItem;		
			menuLink.style.backgroundColor = bgColorLinks;
			menuLink.setAttribute('bgColorItem',bgColorLinks);
			menuLink.bgColorItem = bgColorLinks;
			menuLink.setAttribute('currentBgColorItem',bgColorLinks);
			menuLink.currentBgColorItem = bgColorLinks;
			menuLink.id = 'listLink' + no;
			
			
			
			var colorDiv = document.createElement('DIV');
			colorDiv.innerHTML = '<span><\/span>';
			colorDiv.style.height = height + 'px';
			colorDiv.style.width = colorSquareWidth + 'px';
			colorDiv.style.backgroundColor = activeSmallSquareColor;
			colorDiv.style.marginRight = marginSquare + 'px';
			colorDiv.style.visibility = 'hidden'			
			colorDiv.id = 'colorSquare' + no;
			colorDiv.style.opacity = 0.99;	// Not possible to use 1 because of JS flickering in Firefox
			colorDiv.style.filter = 'alpha(opacity=100)';
			
			if(initActiveMenuItem==no){
				colorDiv.style.visibility = 'visible';
				menuLink.style.backgroundColor = toRgb(startHue,startSat,brightnessLinkMin);
				menuLink.initActive = '1';
				menuLink.setAttribute('initActive','1');
				
			}
			
			listItems[no].appendChild(colorDiv);			
			listItems[no].appendChild(menuLink);

			var clearDiv = document.createElement('DIV');
			clearDiv.style.clear='both';
			listItems[no].appendChild(clearDiv);
						
			var currentWidth = (listItems[no].offsetWidth - colorDiv.offsetWidth - marginSquare);
			menuLink.style.width =  currentWidth + 'px';
			while(listItems[no].offsetHeight>=(menuLink.offsetHeight*2)){		
				currentWidth--;	
				menuLink.style.width =  currentWidth + 'px';
				
			}
		}		
	}
	window.onload = dhtmlgoodies_initMenu;
	
	</script>

Put this into your <BODY> section

	<ul id="dhtmlgoodies_menu">
		<li><a href="http://www.dhtmlgoodies.com">Menu scripts</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Form widgets</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Table widgets</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Calendar scripts</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Javascript games</a></li>
		<li><a href="http://www.dhtmlgoodies.com">About</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Contact</a></li>			
		<li><a href="http://www.dhtmlgoodies.com">Donate</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Terms of use</a></li>
	</ul>

Download external js file

This script requires the file color_functions.js in order to work. Right click on the link and select "Save target as". Put the file in the same folder as your html file or modify the <SCRIPT> tag referring to the file:
<script src="color_functions.js"></script>

Configuration

The menu items are created by plain HTML, example:
<ul id="dhtmlgoodies_menu">
<li>
  <a href="http://www.dhtmlgoodies.com">Menu scripts</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Form widgets</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Table widgets</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Calendar scripts</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Javascript games</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">About</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Contact</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Donate</a>
</li>
<li>
  <a href="http://www.dhtmlgoodies.com">Terms of use</a>
</li>
</ul>

You have some javascript variables available which you could use to set colors for the script. Each of them is described by comments in the code.

Find a color

You can use the color schemer at www.dhtmlgoodies.com to find your ideal colors for this menu. What you do is to find a background color for your menu items. Then figure out how much you want to darken or lighten that color on mouse over.

This is done by use of the HSB color system. In the color schemer, you have text boxes for Hue, Saturation and Brightness at the right.

What you do is

Select a color as background for your links. You can choose from the palette or type in a RGB color(format : #RRGGBB, example: #FF0000) directly in to the RGB text box(At the bottom of the seven boxes). Write down this color and use it later as value of the "bgColorLinks" javascript variable. The color schemer will now calculate Hue, Saturation and Brightness for this color and show it in the three top text boxes.
Now, try to adjust the brightness(example: changing 90 to 80)
If you're satisfied with this color, write down the difference in brightness between your original color and the new one(example: 90-80 = 10). Assign the variable "degreesToDarkenOrLighten" in the script to this value.

For this specific demo, I have chosen my sites background color(#E2EBED) as value of the variable bgColorLinks link, and 10 for the "degreesToDarkenOrLighten" variable.

You can also modify the small square at the left of each menu item. Size and color is all defined in Javascript variables.