Results 1 to 7 of 7
  1. #1
    Join Date
    Mar 2009
    Posts
    13
    Plugin Contributions
    0

    Default 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.

  2. #2
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,655
    Plugin Contributions
    25

    Default Re: How.. do I create navigation like this?

    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.
    See and test drive Zen Cart's free templates at zencarttemplates.info

    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  3. #3
    Join Date
    Mar 2009
    Posts
    13
    Plugin Contributions
    0

    Default Re: How.. do I create navigation like this?

    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.

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,019
    Plugin Contributions
    25

    Default Re: How.. do I create navigation like this?

    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
    Code:
    #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;}
    This will give you different background colors for the first 5 categories, and different colors when hovering over one; extend as required, and adjust colors to taste. You can use background images in this as well.

  5. #5
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,655
    Plugin Contributions
    25

    Default Re: How.. do I create navigation like this?

    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 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.
    See and test drive Zen Cart's free templates at zencarttemplates.info

    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,019
    Plugin Contributions
    25

    Default Re: How.. do I create navigation like this?

    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.

  7. #7
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,655
    Plugin Contributions
    25

    Default Re: How.. do I create navigation like this?

    Quote Originally Posted by gjh42 View Post
    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.
    See and test drive Zen Cart's free templates at zencarttemplates.info

    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

 

 

Similar Threads

  1. How to create New Link in Top Navigation Bar
    By layoyo in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 21 Oct 2008, 08:56 PM
  2. easiest way to change the default category navigation into a table navigation
    By signify in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 1 Oct 2008, 09:55 PM
  3. Create a new drop down menu in admin navigation
    By jscollins in forum General Questions
    Replies: 1
    Last Post: 21 Mar 2008, 06:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •