This is the tutorial for Making a CSS mouseover menu, using background position attribute. Also known as the CSS sliding doors menu technique.
I used to think making a mouseover menu in CSS was quite hard. When i was told it would invole measuring and getting the dimensions of each menu item it sounded complex and a long way around something i could do faster using javascript to change from one image to another. Well after doing it a couple of times, it’s actually really easy, and because only one image is used, it helps make the pages loads faster and the menus also work faster.
Download - CSS mouse over menu
Step 1
Ok, I have already made my menu image that i’m going to be using, you can use this image and to make things easy it’s best if you do too. Firstly we need to contain the menu in a div half the vertical size of the image above but the full width. (484px by 50px) Next make 4 divs within the first div, giving each one an individual class such as "home-button" "tutorial-button" "templates-button" "articles-button". Your HTML File should now look something like this:
<div class="menu"> |
Step 2
Within the CSS give these 4 divs a height of 50px To set the width of each image use photoshop or a similar program to divide the menu into 4 sections without any spaces inbetween then enter these widths into each classes CSS attribute Next you need to measure the distance from the left to the start of each menu item, this is another thing you can measure using programs such as Photoshop or a Free tool called JR Screen Ruler. When you have got all the distances keep them for the next step, now you need to assign the same background image to all of your 4 divs. Now you need to enter the distances into the CSS under the attribute for example "background-position: 0px 99;" After doing that your CSS should now look something like this:
| .home-button, .tutorials-button, .templates-button, .articles-button { height: 50px; float: left; } .home-button .tutorials-button .templates-button .articles-button |
Step 3
The final step is to make the image change when the cursor hovers over the menu item. To do this copy the code above but add ":hover" to the end of each class for example .home-button:hover Now change where the background position displays 0px change that to 50px to move the background image up 50px on hover to display the menu set below it. This part of the CSS should look like:
| .home-button:hover { background-image: url(menu-tut.jpg); background-position: 0px 51px; width: 91px; } .tutorials-button:hover .templates-button:hover .articles-button:hover |
discuss this topic to forum
