How.. do I create navigation like this?

I'm running version 1.3.8 and would like some advice on how to achieve a navigation area like this:
http://www.exo-terra.com/en/index.php

If it's possible, what's the best way to go about it? What addons are best to install as a base etc?

Also is it possible to make the header image change to match the category you are on like that site does?

Any advice/suggestions welcome.

You don't need any addons for the navigation, just a good knowledge of and skill in using CSS.

Yes, the header background image can be changed by category. This addon might help.

I can only really edit css and don't know too much about how to create anything like that, or where to start to be honest. Could anyone create the basic code that I can copy and edit and play around with?

Is it possible to assign different colours to each category like that site has? or would it just be one colour for all?

I'll take a look at that addon in the meantime, thanks.

Depending on your category organization, it can be quite simple to get the "rainbow" effect like that site. You will have to make at least one simple edit to your tpl_categories.php, though, as the stock file uses inline links separated by <br /> tags, and this is not capable of displaying full-width backgrounds.
For starters, add to your stylesheet```
#categories a {display: block; background: #11bbcc;}
#categories a+a {background: #33bbcc;}
#categories a+a+a {background: #55bbcc;}
#categories a+a+a+a {background: #77bbcc;}
#categories a+a+a+a+a {background: #99bbcc;}

#categories a:hover {background: #11bb66;}
#categories a+a:hover {background: #33bb66;}
#categories a+a+a:hover {background: #55bb66;}
#categories a+a+a+a:hover {background: #77bb66;}
#categories a+a+a+a+a:hover {background: #99bb66;}

Unfortunately the adjacent sibling selector ("+") isn't supported by IE6 and is buggy in IE7.

I was actually thinking of using the unique ID for each category :blush: forgot that this version of Zen Cart doesn't have them by default. They need to be added following the instruction in the sideboxes/tpl_categories.php template.

The inline links and line break thing is a pain, but it should be possible to get around this by changing the links to display:block and either removing the BRs with a display:none or setting their line-height to zero.

I suspect that this will be much easier to work with in Zen Cart 2.

I didn't know it was still buggy in IE7. I was going to get into more detail after a first experiment; the approach above would only work for all top categories anyway. Subcats would make it confusing, as the colors would move from one category to another.

Installing Categories Dressing will allow you to control the individual categories without getting deep into coding.

gjh42:

Installing Categories Dressing will allow you to control the individual categories without getting deep into coding.I agree that this would be the approach for the current version of Zen Cart.