Standard Nested UL cat tree styled via css

Barrett · Posted: 07-06-08, 04:54 PM

I am using the Sebenza Category Tree mod.

I am attempting to build a valid <ul> structured cat tree with minimal resultant html.

Here is what I have in template so far:

Code:

<ul id="catwrapperul">
<mvt:foreach iterator="tree" array="cattree">

   <mvt:if expr="g.Category_Code EQ l.settings:tree:code">


<mvt:if expr="l.settings:tree:parent_id GT 0">
<ul class="cat_ul1">
</mvt:if>

<li class="&mvt:tree:class;">►<a href="/page/&mvta:store:code;/CTGY/&mvta:tree:code;">&mvt:tree:name;</a></li>

<mvt:if expr="l.settings:tree:parent_id GT 0">
</ul>
</mvt:if>


   <mvt:else>


<mvt:if expr="l.settings:tree:parent_id GT 0">
<ul class="cat_ul1">
</mvt:if>

<li class="&mvt:tree:class;"><a href="/page/&mvta:store:code;/CTGY/&mvta:tree:code;">&mvt:tree:name;</a></li>

<mvt:if expr="l.settings:tree:parent_id GT 0">
</ul>
</mvt:if>


   </mvt:if>

</mvt:foreach>
</ul>

It is giving me html like this:

HTML Code:

<ul id="catwrapperul">
<li class="cat"><a href="/page/CPO/CTGY/mul">Mulberry Paper</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/tis">Mulberry Tissue</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mtx">Mulberry Textured</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/msm">Mulberry Smooth</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mmr">Mulberry Marbles</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mbt">Mulberry Handpainted Batiks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mbr">Recycled Mulberries</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mfl">Mulberry Florals</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/lok">Lokta Paper</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/lso">Lokta Solids</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/lmr">Lokta Marbles</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/ltd">Lokta Tie-Dyes</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/lck">Lokta Crinkle</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/lfl">Lokta Florals</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/lrc">Recycled Loktas</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/slk">Silk Paper</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/ssf">Soft Silk</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/slb">Silk Blends</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/japan">Japanese Paper</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/japan-washi">Japanese Washi and Chiyogami</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/japan-other">Japanese Paper Other</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/floral">Floral</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/flt">Other Florals</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/fls">Smooth Florals</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/flc">Floral Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/flp">Pressed Flower Florals</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/flx">Textured Florals</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/batik">Batik</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/indian_solid">Indian Solids</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/thai_handpaint">Thai Handpainted</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/tibetan_batik">Tibetan Batiks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/indian_handpaint">Indian Handpainted</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/metallic">Metallic</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mts">Solid Color Metallics</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mto">Oxidized Metallics</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/metallic_pearl">Pearlized Metallics</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mtm">Metallic Mica Papers</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mth">Other Metallics</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/car">Cardstock</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdw">Whites Ivories</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdp">Pastel Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cde">Earthtone Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdb">Bright Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdn">Natural Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdo">Other Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/cdf">Floral Cardstocks</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/mtc">Metallic Cardstocks</a></li>
</ul>
<li class="cat"><a href="/page/CPO/CTGY/tex">Textured Paper</a></li>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/tlc">Lokta Crinkle</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/ttw">Thai Wrinkles</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/tlp">Leather Paper</a></li>
</ul>
<ul class="cat_ul1">
<li class="cat1"><a href="/page/CPO/CTGY/tot">Other Textured</a></li>
</ul>
snip
</ul>
</ul>

Too many <ul>'s although now valid once I stripped the closing </li>'s.

It need to generate like this:

HTML Code:

    <ul>
            <li class="cat">A PARENT CAT
                <ul>
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                </ul>
            <li class="cat">A PARENT CAT
                <ul>
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                    <li class="cat1">ABC
                </ul>
            
        </ul>

Please help; I'd like "getter done" and everyone could use some clean tree code !

Pete McNamara · Posted: 07-14-08, 04:58 PM

Quote:

everyone could use some clean tree code

Not by using unordered lists though. Unless you are seeking a flyout cattree menu then unordered lists should be avoided. If you are, be prepared to spend a lot of time trying to overcome cross browser compatibility issues. If and when you do get those problems solved, they will likely only be solved for that particular cattree - i.e. when someone else tries to copy your code they are likely to run into cross browser compatibility issues because their tree probably is unlikely to be the same as yours. This is fine if they have the CSS skills to solve the cross browser compatibility issues - if they don't they would be walking into a whole mess of trouble and heartache.

Barrett · Posted: 07-29-08, 02:02 PM

I dumped the sebenza tree and now have the stock one like I want as unordered list with no apparent browser issues down to 3 or 4 levels.
Also have rebuilt WCW's Toolkit tree fully expanded.
All test W3C valid.
http://beta.handmade-paper.us/page/CPO/SFNT
http://beta.handmade-paper.us/page/CPO/TK

Maybe I'm going too geek on this, but somehow after doing too much reading about deprecated elements etc I came to the conclusion of build these trees with UL markup.
Yes the CSS for all the levels was a bit painful with descendant selectors.

wcw · Posted: 07-29-08, 02:07 PM

Looks good. You sure have a lot of categories. :-)

lynnephelps · 10:27 PM

I really like your expanded category tree on the ToolKit page: http://beta.handmade-paper.us/page/CPO/TK

What is the template code you used to get it to show that way? I am going crazy trying to do this exact thing and am crashing and burning in a big way. I can see your stylesheet but would love to know what your cattree template looks like!

I am doing pretty good with all my category and page template edits, but the category tree seems to be beyond my skill level.

I love handmade paper and I think your site is going to be great!

Many thanks,
Lynne
Feel free to email me.

Barrett · 06:36 AM

Hmm thought I posted that, but can't find it - must have got lost when the forums were hacked a while back.
Here is what I built after a bit of pain and suffering.
I couple of the guys on here poo poo the use of UL's or OL's for Cat trees mainly due to hacking related to IE 6.
A prominent author and expert member of the web standards project, Andy Clarke would likely agree with my use of the list based on what I've picked up from his writings.
Let me know how it works for you.

I pasted the whole page template here. You can either try that or pull out the Div for the Cat Tree only .

Code:

<mvt:item name="html_profile" />
<head>
    <title>&mvt:store:name;</title>
    <base href="&mvt:global:basehref;">
    <mvt:item name="head" param="head_tag" />
</head>

<mvt:item name="body">
    <mvt:item name="hdft" param="global_header" />    
    
        <mvt:item name="navbar" />
    
        <mvt:item name="hdft" param="header" />
The fully expanded tool kit tree has the "cattree" class id assigned instead of "toolkit".
<div id="cattree">
TOOL KIT TREE
<mvt:item name="toolkit" param="parentcat|pccount" />
<ul>
<mvt:comment> check for parent cats </mvt:comment>
<mvt:foreach iterator="parent_category" array="parent_categories">
<mvt:if expr="g.Category_Code EQ l.settings:parent_category:code">
 <li>&mvt:parent_category:name;
<mvt:else>
 <li><a href="/page/&mvta:store:code;/CTGY/&mvt:parent_category:code;">&mvt:parent_category:name;</a>
</mvt:if>
<mvt:comment> check for 1st level subcats </mvt:comment>
<mvt:item name="toolkit" param="subcat|ccount|l.all_settings:parent_category:code" />
<mvt:if expr="ccount GT 0">
<ul class="cat_ul1">
<mvt:foreach iterator="sub_category" array="sub_categories">
<mvt:if expr="g.Category_Code EQ l.settings:sub_category:code">
<li> &mvt:sub_category:name;
<mvt:else>
<li><a href="/page/&mvta:store:code;/CTGY/&mvta:sub_category:code;">&mvt:sub_category:name;</a>
</mvt:if>
<mvt:comment> check for 2nd level subcats </mvt:comment>
<mvt:item name="toolkit" param="subcat2|ccount2|l.all_settings:sub_category:code" />
<mvt:if expr="ccount2 GT 0">
<ul>
<mvt:foreach iterator="sub_category2" array="sub_categories2">
<mvt:if expr="g.Category_Code EQ l.settings:sub_category2:code">
<li> &mvt:sub_category2:name;
<mvt:else>
<li><a href="/page/&mvta:store:code;/CTGY/&mvta:sub_category2:code;">&mvt:sub_category2:name;</a>
</mvt:if>
<mvt:comment> check for 3rd level subcats </mvt:comment>
<mvt:item name="toolkit" param="subcat3|ccount3|l.all_settings:sub_category2:code" />
<mvt:if expr="ccount3 GT 0">
<ul>
<mvt:foreach iterator="sub_category3" array="sub_categories3">
<mvt:if expr="g.Category_Code EQ l.settings:sub_category3:code">
<li> &mvt:sub_category3:name;
<mvt:else>
<li><a href="/page/&mvta:store:code;/CTGY/&mvta:sub_category3:code;">&mvt:sub_category3:name;</a>
</mvt:if>
<mvt:comment> check for 4th level subcats </mvt:comment>
<mvt:item name="toolkit" param="subcat4|ccount4|l.all_settings:sub_category3:code" />
<mvt:if expr="ccount4 GT 0">
<ul>
<mvt:foreach iterator="sub_category4" array="sub_categories4">
<mvt:if expr="g.Category_Code EQ l.settings:sub_category4:code">
<li> &mvt:sub_category4:name;
<mvt:else>
<li><a href="/page/&mvta:store:code;/CTGY/&mvta:sub_category4:code;">&mvt:sub_category4:name;</a>
</mvt:if>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
</div>


        <div id="global_footer"><mvt:item name="hdft" param="global_footer" /></div>
</mvt:item>
</html>

Biffy · Posted: 08-20-08, 07:09 AM

If you're going to do flyouts with the UL container then I'd like to see your solution to the Peekaboo bug. Then I'd like to see your solution to the security errors the iFrame shim Peekaboo hack generates. I hope you realize you're gonna need a dynamically sized Peekaboo hack. A static one just won't do.

Then you'll discover you can't use dropdown category trees when the sub-categories are too large. They won't fit on the screen.

I have all this worked out. It is truly a pain in the gluteus maximus. I hope you've found a better solution.

Barrett · Posted: 08-20-08, 07:15 AM

Quote:

Originally Posted by Biffy

If you're going to do flyouts with the UL container then I'd like to see your solution to the Peekaboo bug. Then I'd like to see your solution to the security errors the iFrame shim Peekaboo hack generates. I hope you realize you're gonna need a dynamically sized Peekaboo hack. A static one just won't do.

Then you'll discover you can't use dropdown category trees when the sub-categories are too large. They won't fit on the screen.

I have all this worked out. It is truly a pain in the gluteus maximus. I hope you've found a better solution.

My solution is simply an expanded cat tree as text and does not consider any advanced flyouts, iframes etc. I don't think anybody was asking for those at the moment.

Biffy · Posted: 08-20-08, 07:49 AM

Quote:

Originally Posted by Barrett

My solution is simply an expanded cat tree as text and does not consider any advanced flyouts, iframes etc. I don't think anybody was asking for those at the moment.

If I understand this correctly, you are willing to put up with extensive browser hacks in order to avoid paying for a module that displays an expanded cattree. In my shop the time involved in writing a multi-level CSS UL menu costs a lot more than a module.

Personally, I would never use a UL container unless there was absolutely no other way to do the job. I'm doing drop-down menus now using other containers that do not have browser bugs to hack. For a simple expanded cattree I would never consider the UL container as a candidate.

IE6 commands about 1/3 of the global browser market (decreasing trend) and it is a diseased, infected puss-pocket of evil where the UL container is concerned. We're not allowed enough space in this message forum to list all the IE6 bugs when UL containers are used. There's hundreds of them.

In a few years, when IE6 dies, the UL container will become practical, even preferred, as an elgant cattree solution. Until they hold that funeral I'd avoid the UL like the plague.

wcw · Posted: 08-20-08, 08:04 AM

Steve,

Are you saying don't use <ul>....</ul> anywhere in html?