HowTo: Create a horizontal menu using CSS and one image.
Friday, November 21st, 2008Lets say you want to create a horizontal menu that uses images. And you want to have a hover/roll-over effect as well. You can do this using only one image and CSS. Here is a tutorial on how to do it. You can of course use this tutorial on links as well, where you want the link to display something different when you put the cursor on the link.
Horizontal menu using CSS tutorial
You need the following:
- One picture containing both normal state of menu link, and the hover state of the menu link.
- Your stylesheet in WordPress, that would probably be style.css (located in your theme folder)
- header.php, presuming that is where you want your menu to be (located in your theme folder)
I used a picture, which has the following dimensions height = 164px, width = 500px, like this:
In your style.css, create the following (more…)