Contributions

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 .= '</a>';

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 .= '&nbsp;(' . $products_in_category . ')';
}
}

$output .= '</a>';

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 .= '&nbsp;(' . $products_in_category . ')';
}
}

$output .= '</a>';

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

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

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. ;)

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!

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.