Do you think the plain menu bars are a bit boring? Would you like some graphic background added? This post is a short tutorial on how you can spice up your menu bar by adding some CSS rules to the <HEAD> Section.
As an example, this site now uses a fading gradient background image on the menu bar. When you hover, the gradient is reversed, leading to a more interesting and easier to navigate menu (at least I think so.) And it was all done with a couple of CSS rules and two png images.
First, the CSS:
#access { background-image: url(http://wpweaver.info/downloads/fade.png);}
#access ul ul a, #access li:hover > a, #access ul ul :hover > a
{background-image: url(http://wpweaver.info/downloads/fadeup.png);}
The first rule sets the menu bar to use the “fade.png” background image. The image is a simple trasnparent png image with a fade gradient – fading from 50% transparent to all transparent – generated with Photoshop. The image is 38px tall, which is the default size for the menu bar in Twenty Ten and all the Weaver subthemes.
The second rule uses the same image, but in reverse, whenever the mouse hovers over a menu item. If you want this effect for your site, you can download the two images directly from http://wpweaver.info/downloads/fade.png (and fadeup.png). This feature will be added as a checkbox option in Weaver 1.3.
Note that the first rule applies to the entire menu bar, while the second to individual menu itmes. One thing nice about using a gradient is that it works with almost any menu background color. The look good with the browns of this site, or with almost any color except white.
If you wanted to have a separate image or color background for each individual menu item, you could use a variant of this rule:
#access ul li { background-color: #FF0000;}
This example rule would make each menu item have a red background. You could use “background-image” to add an image instead. You can also adjust padding, line height, and all the usual CSS parameters.
Please note that if you have two menu bars, you’ll have to duplicate all the #access rules as #access2 rules to make them work for the second menu bar.
The possibilities for adding graphics to your menu bar are almost endless. You could add a bullet or other icon to each menu item, for example. You could have a complete graphic image for each menu item. Designing menus with graphics, and getting them to work right with sub-menu and hover styles can get quite complicated, and the details are really a bit beyond this tutorial.
