Download menu

Demo

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 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

  1. 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.
  2. Now, try to adjust the brightness(example: changing 90 to 80)
  3. 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.

Comments

Mark
Hi, I've copied and pasted the text to the appropriate areas on my web page, which I'm building with Dreamweaver CS5.5. While the links themselves work, the menu's visual appearance does not at all resemble the demo you have posted. I just have black text on a white background. There's no rollover effect, etc. Any ideas? I downloaded the script and deposited it into a folder titled "Scripts", perhaps that's not the proper place. You also mention that one could modify the <SCRIPT> tag referring to the file, but I'm not 100% on how to do this correctly. As well, I see that the script's tag is not placed at the beginning of the script, could this be it? Just thoughts. Thanks for any help you can provide.
Mark at 01:25PM, 2011/10/18.
Mark
Hey, got it working now. Had the script in the wrong place. Sorry:)
Mark at 01:50PM, 2011/10/18.
Mark
Well, I thought I had it working.

I installed the menu and only changed the text for the links, nothing else was altered. After uploading the page the menus don't work correctly. Any help would be appreciated.

http://www.worldheadquarters.com/islamorada/

Thanks.

Mark
Mark at 12:16PM, 2011/10/19.
Mark
Hi, sorry for all these posts. I have it working, but for some reason when you roll over the menu the color won't darken as it does in your example. All I did was change the color of the menu itself, thinking the rest would take care of itself.

I did find a few errors with the script though. The code on this page, where it reads "Put this into your <HEAD> section" is different than the code that appears on the page with the Demo - view the source code. The code on the Demo page has code that doesn't appear above and I'm quite sure that's why it wasn't working at first.

Thanks for all the scripts, they're wonderful.
Mark at 02:11PM, 2011/10/19.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com