Demo of menu: Look to the left
Move your mouse quickly over the menu items to see the color animations in action
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 base color as background for your links. Write down this RGB color(format : #RRGGBB, example: #FF0000). The color schemer will now calculate Hue, Saturation and Brightness for this color and show it in the three text boxes.
- Try to adjust the brightness(example: changing 90 to 75)
- If you're satisfied with this color, write down the difference in brightness between your original color and the new one(example: 90-75 = 15).
These values is something you could use in this script to modify the layout
For this specific demo, I have chosen my sites background color as primary link color(#E2EBED) and 15 to be the amount to darken the color on mouse over.
You can also modify the small square at the left of each menu item. Size and color is all defined in Javascript variables.