Navigation drop down menu

[user4fun]

I cannot wrap my head arround how you have a navigation menu, but when the mouse is over a particular section, only that section background would change!!What is it? multiple images! and if it is multiple images, how do you cut it up so perfect?

[ShadowMage]

I cannot wrap my head arround how you have a navigation menu, but when the mouse is over a particular section, only that section background would change!!What is it? multiple images! and if it is multiple images, how do you cut it up so perfect?

You just use the onmouseover/onmouseout events or the :hover pseudo-class to change the background. No magic, no multiple images (though I'm not entirely sure what you mean by that).

[thescientist]

You just use the onmouseover/onmouseout events or the :hover pseudo-class to change the background. No magic, no multiple images (though I'm not entirely sure what you mean by that).

i think he means multiple images for each state of the navigation menu, one state for each item hovered over with the background changed for that state.most people use un-ordered lists for their menus, and then apply the :hover psuedo class on each individual <li> to achieve the effect. you could use JS if you have complicated/nested menu structures, but for simple color, background, image swaps, CSS is easier and more practical.

[user4fun]

I think i know what you both mean, but I am still lost.I have one long image of the navigation bar (bar.png). it inlcudes Home About, Contact etc etc etcWhen the mouse is over a particular section, that particular section of the image will be replaced with another (i.e a different gradient, or a different image.Should I split up the bar.png into home.png, contact.png, help.png etc, and then swap an image when the ouseisover?If thatisthe case, then how do you cut them up to be exact sizes so home.png will be exact match to home_over.png

[ShadowMage]

I think i know what you both mean, but I am still lost.I have one long image of the navigation bar (bar.png). it inlcudes Home About, Contact etc etc etcWhen the mouse is over a particular section, that particular section of the image will be replaced with another (i.e a different gradient, or a different image.Should I split up the bar.png into home.png, contact.png, help.png etc, and then swap an image when the ouseisover?If thatisthe case, then how do you cut them up to be exact sizes so home.png will be exact match to home_over.png

I see what you mean. Do you have GIMP? Or some other image editing software?All you have to do is create the images you need. You can use sprites if you want to. It'll be faster and take up less space. To create a sprite:Using image editor create an image that is the required dimension of your menu item times 2 (ie, if your menu item is 25x110, create an image that is 50x110)Then on the top half, create the rest-state image for your item (Not hovered)On the bottom, create the hover-state image for your item.Using CSS you'll modify the background-position property to "change" the image.

[user4fun]

I do have gimp and I have two images.one, 1 the bar and the second when the mouse is over. Can you give me some more information of how to chop the bar down into small sections for the home, contact, etc

[ShadowMage]

I do have gimp and I have two images.one, 1 the bar and the second when the mouse is over. Can you give me some more information of how to chop the bar down into small sections for the home, contact, etc

The second image is the mouseover effect on the whole bar?Just open your image in GIMP, select a portion of the image with the square select tool, copy and paste it into a new image of the required dimensions.When you use the select tool there should be someplace in one of the toolboxes that shows you the pixel dimensions of the selection. Use those dimensions to create a new image. Copy the selection from your bar image and paste it into the new one. If you want to go the route of sprites then when you create the new image, just make it twice as tall, copy the selection from the rest-state bar image and paste it in the top half. Then copy the same selection from the hover-state bar image and paste it on the bottom.

[thescientist]

you have 1 nav bar, with say 5 menu items. All you need is one image for what you want the off state (of a single menu item) to look like, and one image for what the on state (of a single menu item) should look like. Follow this and jkloth's advice for creating images.obviously things can (and get) more complicated to achieve more progressive effects, but that is the bare minimum for a simple hover effect.