A great free tool for making attractive menus is the List-U-Like CSS Generator “Create cross-browser list-based navigation bars with ease”.
Begin with the pre-designed menu bars in the Load Settings section.
Experiment with using different colors from the Color Schemer, as backgrounds for the buttons. Put the color code (# symbol followed by 6 numbers or letters) in the background: field, in the Unvisited, Rollover, and Visited sections.
Click on any Save button to see the example navigation bar change.
The Color section is where you specify the text color.
If you need to make the buttons wider or narrower, adjust the value in the Navbar Positioning, Width (when vertical) field. 9em is a good value to start with.
You may want to leave all the other settings alone, to keep things simple. If you want to experiment, you can always click on Generate Config and copy the result to a Notepad so you can go back to it if needed (paste it in the Input Configuration section).
Click on Generate CSS and paste the results into your style sheet.
To use the Style Sheet Generator with a List-U-Like menu, replace style lines with these:
background:#<?=$menubg?>;
color:#<?=$menulink?>;
font-family: <?=$sansfont?>;
border-color: <?=$borders?>;Inside the a:hover style, use these:
background:#<?=$linkhoverBG?>;
color:#<?=$linkhoverFG?>;Inside the a:visited style, use these:
background:#<?=$menubg?>;
color:#<?=$linkvisited?>;Inside the a:active style, use these:
background:#<?=$menubg?>;
color:#<?=$$linkactive?>;Then paste these into the section of the style sheet generator script for lul (or lulv for vertical menus).
View the source of the List-U-Like Generator page to see how to define the text and links for your menu.
Here are the settings for a nice menu I used for a site that had #A56ABE as it's base color. Paste this into the specified place on the List-U-Like site.
/* LUL1.0 :: Configuration data [Created: Tue, 22 Mar 2005 03:08:09 -0600] ::
http://www.listulike.com/ */ var um={ "baseSRC":"",
"orientation":["vertical","left","top","fixed","15px","15px","1000"],
"hstrip":["none","yes"], "navbar":["","","9em"], "items":["1","1","collapse","#ead4a4
#edbb85 #edbb85 #ead4a4","solid","#ead4a4 #ead4a4 #fae4b4 #fae4b4","solid","#ead4a4
#edbb85 #edbb85
#ead4a4","solid","9","5","#5c2776","#5c2776","#5c2776","75%","tahoma,sans-serif",
"bold","none","left","#EFC7FF","#009699","#e8c8f5","normal","italic","italic",
"letter-spacing:1px !important;","","","none","","",""] };
Social Bookmarking