How best to code a menu

[danpoulton]

I've attached an image of what i need to create.

It's a menu with A-Z and # down the left side, in squares.

Then once clicked the letter links to a menu (via PHP ?alpha=a, not important to css) which appears on the right in the square.

The picture shows a green border (6px) a black border (1px) and then the menu starts 6px in (padding: 6px).

How would i code the menu (in the image) best?

Also is there a way of when a link is clicked the different clicked on image (the one shown on B in the picture) can be changed and also reverted back if a new link is clicked?

If not i'm sure i can get PHP to change the class to have an alternate clicked on image, its just the CSS i'm stuck on.

Thanks for any help.

[infinityspiral]

Rather than having buried stylings inside stylings I think it'd be much cleaner to just slice the image so the borders are included. Borders act inconsistently between browsers anyway so I like to avoid them and use padding whenever possible.

To show the link that's been clicked, why not add a .active{} style in addition to the normal styles and adjust your script so it adds the active class to the last one that was clicked. This could be done through either php if you reload the page or javascript if you want more of an ajax approach.