New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download menu

Demo | Demo 2

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

  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). You may try to change saturation instead. This version of the menu give you the choice between changing brightness or saturation on mouse over.
  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

valentina
hello I'm using this great fancy one level menu on my website.
Is it possibe to add slide down submenus to it? I so much enjoy the look of this menu that I would like to keep it trasnforming it in a multiple levels menu. What should I add in my script?
A little help would be really appreciated! :)
valentina at 05:58AM, 2011/05/18.
Admin comment
DHTMLGoodies
Valentina,

Unfortunately, it's very difficult to combine these two scripts.
DHTMLGoodies at 09:16AM, 2011/05/18.
valentina
Well I'll keep it as it is then. It's a very nice one so I can be satisfied :).
Thank you for your reply!
valentina at 04:30AM, 2011/05/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