How to create a advanced menu like this

hello all,

i want to create a menu like this

i want to build it using css. i want that when i hover over on a single block then it should show some color effect and it will be a link. how could i do that?

see if i do slicing then i will be getting whole block as the link(the full image of a single block). this will be a problem to me. how can i achieve this?

also what are the other ways i can create it for a php website.

[font=verdana]If you want to use that design, you will need to use images throughout, because there is no reliable way to display text like that.

(I’m not saying this is necessarily a good idea, but it is the best way I can think of to achieve the effect you’re after)

The good news is that you can make part of an image into a image map, which allows you to select areas to use as links, meaning that you don’t need to slice the original image, you can just leave it there intact.

For the hover effect, the best thing to do would probably be to make copies of the original image, highlight the item you want – on each copy, just do one item – and make the rest of the image transparent. Then you will have a series of images that you can overlay onto the original one, each one highlighting a different item. You can then apply these to area#item1:hover as appropriate.[/font]

Thanks Mr. Stevie. that was a good idea :slight_smile:

also i would like to ask that what are the other ways i can do this? like jquery etc etc

The only way is images to make it. You can use css to make the link areas http://www.visibilityinherit.com/code/irregular-shaped-anchor.php