How to Style the WordPress Menu

WP Custom Menu with Rollover Effect

This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme.

The WP Photo Theme – XO Photo

Best WordPress Black and White Photo ThemeThe Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones.

This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images.

We opted for a solution without sprites in this case considering that the difference will not be material on this site.

The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab.

The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% alpha) over the image for the Normal View. Also the font changes from white to blue.

On other sites we used black and white images which evolve to color or simply two entirely different pictures or text labels.

The question we will answer here is:

HOW DID WE DO THIS?

First of all we create a menu from the WordPress dashboard under Appearance –>Menu.

We call this main navigation ‘Main’. Now, and this is important, open the Screen Options on top right of the screen and tick all options, namely the Advanced Menu Properties.

Advanced WordPress Menu Configuration

Click to see large version.

Advanced Menu Properties

These allow you to configure your menu items further, for example you may open the link in a new tab or window, you may define the link relation, add a description and important for us: you may define CSS Classes!

These classes allow us to style each list item in the menu individually by defining the corresponding styles in the custom syle sheet.

As you can see from the above screen-shot, we created a menu tab for FREE B&W PHOTO FEEDS. We expand the tab in the back-office to see all properties and we create a CSS Class which we call “navfeed” (You just type in the name of the class, not the “.” (dot) which you will use in the CSS Style-sheet only.).

Repeat this procedure for  all menu items creating for each a CSS class (or multiples).

If all tabs will be styled in a uniform way, you may use the same class for all; it is however likely that you wish to create individual styles, namely if you use different images and width of the tabs.

Style your menu from the XO Design Tab

Now we just style the menu from the XO design tab as much as possible: fonts, font color and size and hovers if you wish. Our example shows that we have spread the menu over the full width of the page simply by adapting the fonts and font sizes, right from the XO Design panel.

Take a Screenshot

Once done, take a screenshot of the menu and load it to Photoshop or any other image editor where you dispose of rulers to measure the width of each tab.

In our example, we are using 4 tabs with different width, the page width being 980 pixels.

The tabs have the following width:

  1. navhome:       157 px
  2. navfeed:          459 px
  3. navcontact:    280 px
  4. navy:                 84 px

Total, 980 pixels.

We wish to separate the tabs leaving a space of 1 pixel between them; we therefore decrease the with of 3 tabs by 1 px each to create the space for the spaces (this is getting smart, huh).

If you use Photoshop, you can just design your menu bar and slice it then accordingly, If you go one by one, you just create individual pictures of the same height and the width as defined above.

Create your Pictures

As we like to use the menu layout from XO, we will use the font definition from XO; the images we create will serve just as background pictures for each menu tab.

Our XO Settings for the menu are:

  • Font: Quicksand
  • Font size: 32 px
  • Font Color: #FFFFFF (white)
  • Hover Color:  #0000FF (blue)
  • Background: #000000 (black)

These settings result in a nice menu which we will expand with an image. The height of the menu is 80 px at present and we wish to expand it to 182 px by adding an image.

The Menu Background Images


There you go! Now let’s fit everything together!

Edit your Style-sheet

Finally we open our CSS Style-sheet and define the newly created classes.

As you see above, our classes are:

navhome, navfeed, navcontact and navy.

The corresponding classes in the Style-sheet will be:

.navhome

.navcontact …..   a dot in front of the label defines a “class” in the CSS Style-sheet.

Also, as these tabs contain hyperlinks, we will create the classes

.navhome a

.navcontact a ….  and so on.

This way we will then be able to create the hover pseudo classes:

.navhome a:hover …. and so on.

CSS Syntax

Now we just type into our style-sheet whatever result we want to achieve, in our case this looks as follows for the HOME tab (the others are similar, except the width and image reference).


.navhome, .navhome a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome-o.png') no-repeat !important;height:130px !important;}
.navhome a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome.png') no-repeat !important;}

.navfeed, .navfeed a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed-o.png') no-repeat !important;height:130px !important;}
.navfeed a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed.png') no-repeat !important;}

 

To this we add the little 1 px space:


.navfeed  {margin-left:1px ;}

 

That’s it!

Hope you enjoy and let me know about your results by commenting here below.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *