'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic

This contribution is an alternate category box which will output your store's categories as a proper nested unordered list, instead of a collection of non-breaking spaces, quasi-bullets and break tags.

What's the big deal about that you ask? With the categories now output as an unordered list, you can now more easily apply a lot of nifty CSS to turn your category list into a horizontal drop-down or vertical fly-out menu, make it a collapsible menu, easily attach bullets, add cool mouseover effects, or just about anything you can dream up!

The advantage of this technique over pure javascript solutions is that it is much more flexible, easier to apply CSS trickery to, is more search-engine friendly and makes just one query to the database.

Output includes optional CSS class tags to mark categories as selected or as parent cats. You can also choose to render all of your categories (useful for dynamic menus) or to render only the root cats and the selected category tree. Note that this contribution merely provides a foundation for you to construct a more attractive/functional menu by providing a more semantically-correct output. A little CSS-magic is required on your end, though I have included a sample vertical flyout menu CSS. I have included some resources in the readme.

Add All Products Link with Styles

06/30/2010 by btwd

NOT THE FULL PACKAGE

Instructions for adding the ALL PRODUCTS link if installed to the top of your categories menu.

This is just a text doc with simple instructions.

NOT A FULL PACKAGE

Fixed for the "Orange Bubble" Template

06/24/2010 by move_man

FULL PACKED

I have fix for the "Orange Bubble" Template

Demo
http://hoffys-tiershop.de

Version 1.1.3 (ie style bug fix images bug fix)

04/26/2010 by kaczart

I added diffrent stylesheet's for IE browser.

Also found 'display image bug' in li classes: in ul_categories.php line 158:


if (isset($cPath_array) && in_array($key, $cPath_array) && $classname_for_selected) {
$this_cat_class = $classname_for_selected . ' ';
} else {
$this_cat_class = '';
}

$output .= '

}

if (tep_has_category_subcategories($key) && $classname_for_parent) {
$this_parent_class = ' class="'.$classname_for_parent.'"';
} else {
$this_parent_class = '';
}

$output .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '"'.$this_parent_class.'>'.$val;



should be:

if (!$level) {
unset($GLOBALS['cPath_set']);
$GLOBALS['cPath_set'][0] = $key;
$cPath_new = 'cPath=' . $key;

} else {
$GLOBALS['cPath_set'][$level] = $key;
$cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
}

$output .= '

$output .= $classname_for_parent.' ';
} else {
$this_parent_class = '';
}

$output .= $this_cat_class . 'cat_lev_'.$level.'">'.$val;


FULL PACKAGE.
Screenshot included.

Closing Tags Fix 2

02/27/2009 by MickA

The fix by vampirehunter is incorrect.

On about line 196, it should read.

$output .= '';

Not, $output .= '';

ul_categories.php file and instructions for fix only.

Closing Tags Fix

02/26/2009 by vampirehunter

This is just a single line fix to the previous contributions ul_categories file.

The previous contribution does not have the correct closing tags for hyperlinks and lists for the "top level" categories.

So i fixed this.
This is simply a replacement file for that previous contributions.

Version 1.1.2 (Fixed)

06/10/2008 by irishfreakout

I fixed a small issue on the last file with multiple classes not separated correctly. I also added a levels identifier for the links, it allowed me to have more fine-tuned control.

Some CSS tips: you can use the multiple classes to drill down exactly how you want different levels to look. For example, I have the links on level 2 (starts at 0 so 1 is 2) turn red when it is the selected category:
#nav li.selected.cat_lev_1 a.link_lev_1 { color: red;}
Note: multiple classes may not work with some older browsers.

Two Main Fixes:

1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now. I also added the levels to the links themselves.

2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

If you want to change it back, replace lines 187-191 with this:
$output .= ' (' . $products_in_category . ')';
}
}

$output .= '';

Version 1.1.2 (Fixed)

06/10/2008 by irishfreakout

Oops. My first one did not incorporate fixes for #1. Now it should work. Note that older browsers may have troubles with the multiple classes for one element.

Two Main Fixes:

1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now.

2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

If you want to change it back, replace lines 187-191 with this:
$output .= ' (' . $products_in_category . ')';
}
}

$output .= '';

Version 1.1.2

06/10/2008 by irishfreakout

Two Main Fixes:

1) Incorporated category levels changes from "yourmanstan". His addition broke the Selected/Parent classes, so that's fixed now.

2) Moved the category count outside of the link. This is the behavior of the original category box. I liked it better as it gave me more control of modifying how the numbers look.

If you want to change it back, replace lines 187-191 with this:
$output .= ' (' . $products_in_category . ')';
}
}

$output .= '';

If using CSS

07/06/2007 by shooter-boy

I am using a pure CSS layout, and there was an extra DIV that messed the whole layout up.

If i removed the before_nobox_html and after_nobox_html (two opening and one closing DIV tag) then it works.

I realise my store is highly modified, I don't have a table in sight. If you are using tables then this likely doesn't affect you at all as the tables will override the div commands if the DIV is nested inside a cell.

ul_categories.php file only.

Rob

updated with category levels

03/03/2007 by yourmanstan

made a small change to add the category level to each item

Version 1.1 Bug fix and extras

05/02/2006 by nate_02631

This version fixes a slight bug with respect to closing off the unordered lists in certain situations. I have also added a couple extra config options to allow placement of HTML before and/or after the rendered menu in case it's needed to better flow with your layout.

A couple of CSS examples have been included. They are fairly lame, but should give you an idea of what is possible. Other, better submissions are welcome in the forums. ;)

Forum Thread for Contribution

04/30/2006 by nate_02631

Ooops - forgot to inclue the forum thread associated with this contribution:

http://forums.oscommerce.com/index.php?showtopic=207277

Any feedback, bug reports are welcome, or if you just want to post some cool unordered list menu resources or show off what you've done!

'Category Box as Nested Unordered List for EZ(er) CSS & Dynamic menus v 1.00

04/30/2006 by nate_02631

This contribution is an alternate category box which will output your store's categories as a proper nested unordered list, instead of a collection of non-breaking spaces, quasi-bullets and break tags.

What's the big deal about that you ask? With the categories now output as an unordered list, you can now more easily apply a lot of nifty CSS to turn your category list into a horizontal drop-down or vertical fly-out menu, make it a collapsible menu, easily attach bullets, add cool mouseover effects, or just about anything you can dream up!

The advantage of this technique over pure javascript solutions is that it is much more flexible, easier to apply CSS trickery to, is more search-engine friendly and makes just one query to the database.

Output includes optional CSS class tags to mark categories as selected or as parent cats. You can also choose to render all of your categories (useful for dynamic menus) or to render only the root cats and the selected category tree. Note that this contribution merely provides a foundation for you to construct a more attractive/functional menu by providing a more semantically-correct output. A little CSS-magic is required on your end, though I have included a sample vertical flyout menu CSS. I have included some resources in the readme.