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,569
    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.
    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,010
    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,569
    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.
    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,010
    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,569
    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.
    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. v151 How to create a game page like this website?
    By yizhihouzi in forum General Questions
    Replies: 4
    Last Post: 19 Dec 2014, 12:52 AM
  2. v150 Would like to create a customer header/side navigation
    By nitrous_oxide_cowboy in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 30 Apr 2012, 12:51 AM
  3. How do I link up my navigation... This seems like it should be easy
    By maxfieldparrish in forum General Questions
    Replies: 5
    Last Post: 5 Jun 2008, 02:12 PM
  4. how do i create a sidebox like this
    By lucianman in forum General Questions
    Replies: 1
    Last Post: 23 Oct 2006, 10:18 PM
  5. How Can I Create the Category list to look like this?
    By Robert T in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 2 Jul 2006, 08:46 PM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR