Standard Nested UL cat tree styled via css

Barrett · 08-20-08, 06:15 AM

Re: Standard Nested UL cat tree styled via css

Originally posted by Biffy View Post

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 · 08-20-08, 06:09 AM

Re: Standard Nested UL cat tree styled via css

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 · 08-20-08, 05:24 AM

ToolKit Category Tree Re: Standard Nested UL cat tree styled via css

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:

[SIZE=3]<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>
[/SIZE]

lynnephelps · 08-19-08, 09:26 PM

Re: Standard Nested UL cat tree styled via css

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.

wcw · 07-29-08, 01:07 PM

Re: Standard Nested UL cat tree styled via css

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

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

Re: Standard Nested UL cat tree styled via css

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.

Pete McNamara · 07-14-08, 03:58 PM

Re: Standard Nested UL cat tree styled via css

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.

Standard Nested UL cat tree styled via css

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Standard Nested UL cat tree styled via css