New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download menu
Put this into your <HEAD> section
Put this into your <BODY> section
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 class="menuGroup1" href="page.html">About</a>
</li>
<li>
<a class="menuGroup1" href="page.html">Contact</a>
</li>
<li>
<a class="menuGroup1" href="page.html">Donate</a>
</li>
<li>
<a class="menuGroup1" href="page.html">Terms of use</a>
</li>
</ul>
You can specify several colors for the menu and you assign a menu item to a color by giving the <A> tag a class name. Example: <a class="menuGroup1" href="page.html">Donate</a> assign this menu item to the second color. If no class is specified, the menu item will use the first color.
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). You may try to change saturation instead. This version of the menu give you the choice between changing brightness or saturation on mouse over.
- 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.
No one has commented this - be first!
Post your comment
Comment preview: