HowTo: Create a horizontal menu using CSS and one image.
Friday, November 21st, 2008
Lets 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
The menu id:
#menu{width: 500px; /* this will be the width of your menu */height: 82px; /* this wil be the height of your menu */float: left; /* When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. */margin: 10px 10px 10px 10px; /* Margin defines the space around elements. In this line we have defined the margin for: bottom, left, right and top respectively. You will have to adjust accordingly to where you want to place your menu */}
The menu a class
#menu a{text-indent: -99999px; /* Moves the text the given value to the left */display: block; /* Means that the element is displayed as a block */float: left;background-color: transparent; /* This makes the underlying colors shine through */background-image: url(images/nav_menu.png); /* Here you will have to use your picture */background-repeat: no-repeat; /* Makes sure that the image is not repeated indefinitely */height: 82px; /* Sets the height of this class */}
The first button
#menu a#btn_first{width: 100px; /* Sets the width of the first button to 100px */background-position: 0px 0px; /* Sets the starting position of the background image to x=0 and y=0 */}#menu a#btn_first:hover{width 100px;background-position: 0px -82px; /* here I have altered the value of the y-coordinate to reflect the hover state in my nav_menu.png image */}
The second button
#menu a#btn_second{width: 100px;background-position: -100px 0px; /* In nav_menu.png my next button is located at this coordinate */}#menu a#btn_second:hover{width 100px;background-position: -100px -82px;}
You will have to create similar values for all of your buttons. It is important to remember that the width of the #menu and the width of all the buttons has to equal one and another. In the case above I have defined each button to have the width of 100px, therefor the whole menu has to have the width 500px. So everytime you create a new button, the background-position value has to be changed accordingly to reflect the new coordinate in your image.
The next step is to create the menu in your header.php. The html code I used looks like this:
<div id=”menu”><a id=”btn_first” href=”http://your-webpage”>First</a><a id=”btn_second” href=”url-to-second-menu”>Second</a><a id=”btn_third” href=”url-to-third-menu”>Third</a><a id=”btn_fourth” href=”url-to-fourth-menu”>Fourth</a><a id=”btn_fifth” href=”url-to-fifth-menu”>Fifth</a></div>
That is sort of it really. I hope this helps you to create a horizontal menu that you will like.
This entry was posted
on Friday, November 21st, 2008 at 13:05 and is filed under Tutorials, WordPress.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
November 22nd, 2008 at 07:34
Thanks for this post.. I wanted to point out that i think you have a misprint in your code for the second button hover. You have “#menu a#btn_first:hover ” when im guessing it should be “#menu a#btn_second:hover”.
Also Im trying this with my site and somehow its not working for me. I have everything looking good except for the 2nd, 3rd, and 4th buttons the background-position doesn’t seem to be responding and I just have a repeat of the first button 4 times… even though the links are responding right. Check it out at nakedhedgefund.com .. any help would be appreciated. Thanks
November 22nd, 2008 at 12:43
Hi Nick,
Thank you for your comment. I have updated the tutorial, so that the misprint is corrected. Also I have created a picture that should help you get the idea of your error. You have forgotten to change the background-position values according to you image. And your image didn’t contain a hover-stage. I hope this helps.
/Phil
November 24th, 2008 at 08:48
Thanks Philip,
I still couldn’t figure it out .. so i decided to make 4 menu classes with each corresponding to each of the 4 buttons that I wanted to have. It worked out. I guess there is always more than one way to skin a cat… Thanks for leading me in the right direction!
Nick
November 26th, 2008 at 08:30
Hi Nick,
You might not be reading this. However, I had a look at the 4 menu classes that you referred to. It is a solution but you are using a lot of lines to achieve what could have been written in a few lines. If you want to optimize your site for faster viewing you could create one picture containing all of yours, and then follow the steps provided above. There are of course always more than one way to skin a cat, the best solution depends of the goal.
/Phil
December 30th, 2008 at 13:32
Thank you for a really straightforward article – it has saved me a lot of time!
March 2nd, 2009 at 06:57
Can you help me figure out how to do this with the header image that is defined in the css stylesheet?
I have the image map created.
The image is set in the header section of the css.
But I don’t know where to put the html in the header.php file or the style.css file.
Or, do I have to remove the background image from the css file and put it all in the header.php file?
Thanks!
March 2nd, 2009 at 07:09
Hey Fuzzie,
I can try, however, it sounds like you are a bit insecure on the whole structure of the template files for a WordPress document, and you might want to look into that.
The HTML code that you have created for your menu goes into the header.php. In my case it is located almost at the end of the header.php inside the DIV that defines the inside boundaries of my webpage content.
The styles that you have created for your stylesheet, can pretty much go anywhere within your style sheet. Though I would suggest that you keep your styles divided into categories that makes sense to you.
I hope that helps.
/Phil
April 27th, 2009 at 19:03
Thanks for the tutorial. Before I build this, one question: Does this work in IE6?
April 27th, 2009 at 22:57
Hi D-Nak
As far as I know it should work, I have not had any complaints about it. However, I cannot tell you for sure as I avoid using IE6, and I cannot use it on my mac either.
May 4th, 2009 at 22:23
Thanks for the response. I avoid IE as well, but I'm building a site for an elementary school and many parents don't upgrade from what was originally on their computers. Yikes!
May 4th, 2009 at 21:40
Hi D-Nak,
Well, I can tell you that my method is valid by WC3 3.0 standards. I just checked today and it also works with WC3 2.0 standards as well. I can also tell you that about 50% of the people that visit my site uses explore, and I have heard no complaints.
However, there is another way. In Norway the major service sites simply installed a check to see if the client was using explore or not. If they were using explore they were asked to install Firefox instead, which have had the outcome that most of the population in Norway uses firefox. =) I hope you will find a solution.
June 7th, 2009 at 18:04
Hi D-Nak, I am building a menu that has 2 images (one on the left and one of the right) that are not links and don't have the hover. I have been playing with the codes but haven't been able to make it work, any suggestions or recommendations?
Thank you!!!!!