CSS design advice


I need to start a design but i don’t really know what the best way is to go about doing it…

Take a look at this page:


Basically what i want to achieve is to have the left navigation links slide across the page somehow. Now if i use JavaScript then i will only have one page but i need to have 4 different pages for each navigation link. If there is not a way to do this, i am happy to see any methods similar to this already done?

Can someone help?

Thanks again.

If you want an animation effect, yes, it will have to be JS.

Otherwise, you can make use of the :hover pseudo-class.

Ok, can someone transfer this thread to the JavaScript forum please?

Hopefully someone can help…


I will pm a moderator :slight_smile:

Thread moved to javascript forum.

You should be able to find something similar here.

The accordion handles on this horizontal accordion demo page appear to do what you require.

The first set trigger on hover, the second set trigger on click.


Thanks for your input, so it looks like Accordion menu’s is the technique used to do this.

Does this mean i will have only one page with 4 tabs? If so, i can’t use it because i will need 4 pages, one of which will be a shopping cart section. So I don’t think i ca have the sliding animation effect?

Or another method could be to slide the page across and then direct the user to the actual page? That way users won’t know?? I’m not sure how to go about this… :confused:

Can someone advise?

You should be able to load a separate page in via ajax, so that when the click occurs the page content is retrieved while the slide occurs, with the content appearing as soon as it’s retrieved.

That’s a process that I cannot help you with at this stage, but others might be able to. If all else fails there is the Marketplace where you can find people who can help too.

Ok thanks, i will look into Marketplace.

In the mean time can anyone comment on using AJAX and Accordion? Are there any examples of this being done before? pmw57 has kindly suggested to load in the page via AJAX and slide the page via Accordion.

What would be the best approach to take?

I was thinking of starting the design (CSS etc), get the Accordion slider working, and then do the AJAX? Again i was hoping to see how the AJAX would work by looking at examples…

Any ideas anyone??


The standard jQuery tabs documentation page has a section dedicated to [url=“http://docs.jquery.com/UI/Tabs#Ajax_mode”]Ajax mode