There have been several posts on the forums lately from people looking to style their category trees. Many of them need the tree to be in an unordered list format in order to implement a flyout or dropdown menu of some sort.
There are numerous methods available for creating accessible, cross-browser compatible flyout or dropdown menus, so I’ll leave it to you to search out the one that works best for your needs. What I will do here, however, is to provide you with the code you need for your category tree to create those unordered lists from your categories and subcategories.
The tree code below does not contain the conditional that removes the link from the current category — I’ve always thought that was a bit nonsensical. It does, however, include a css class that will allow you to highlight the current category in the list, making your Miva Merchant site more user friendly.
Some of the lines in the code below are pretty long — that’s just because I hate seeing “orphaned” <li> tags on their own line in the source code. If you need to break it out to make it more readable for yourself, by all means do so.
<mvt:if expr="l.settings:cattree:stack EQ 0">
<mvt:item name="category_tree" param="cattree_header" />
</mvt:if>
<mvt:if expr="l.settings:nextcount GT 0">
<ul id="catlevel&mvt:cattree:stack;">
<mvt:item name="category_tree" param="nextlevel">
<mvt:foreach iterator="cattree_category" array="categories">
<mvt:if expr="l.settings:cattree_category:image">
<li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;"><img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;"></a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
<mvt:else>
<mvt:if expr="l.settings:cattree_category:code EQ g.Category_code">
<li class="thiscat"><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
<mvt:else>
<li><a href="&mvt:global:sessionurl;Screen=CTGY&Store_Code=&mvta:store:code;&Category_Code=&mvta:cattree_category:code;">&mvt:cattree_category:name;</a><mvt:if expr="l.settings:cattree_category:id NE l.settings:cattreenext"></li></mvt:if>
</mvt:if>
</mvt:if>
<mvt:if expr="l.settings:cattree_category:id EQ l.settings:cattreenext">
<mvt:item name="category_tree"/>
</li>
</mvt:if>
</mvt:foreach>
</mvt:item>
</ul>
</mvt:if>
<mvt:if expr="l.settings:cattree:stack EQ 0">
<mvt:item name="category_tree" param="cattree_footer" />
</mvt:if>
This code will give you a tidy set of nested unordered lists that you can style in your css file using the id of the list item. When the tree is generated, each list will have an id of catlevel, with a number appended to it indicating which level of the category tree is being displayed (i.e. catlevel, catlevel1, catlevel2, etc).
As an example, the code below will get you a category tree that resembles the picture at the top of this post.
ul#catlevel {
list-style-type:none;
margin-left:0;
padding-left:0;
font-weight:bold;
}
ul#catlevel li a {
display:block;
border-bottom:1px dotted #ccc;
padding:5px 3px;
margin-right:5px;
font-size:1.1em;
color:#18316b;
}
ul#catlevel1, ul#catlevel2, ul#catlevel3, ul#catlevel4 {
list-style:none;
margin:5px 0;
padding:5px 0;
}
ul#catlevel li ul li, ul#catlevel li ul ul li, ul#catlevel li ul ul ul li{
padding:2px 0 2px 5px;
}
ul#catlevel li ul a, ul#catlevel li ul ul a, ul#catlevel li ul ul ul a {
border:none;
padding:3px 5px;
}
ul#catlevel1 {
border-bottom:1px dotted #ccc
}
li.thiscat a {
color: #cc0000;
}
I’ve been working on a fairly large project, doing some ‘renovations’ on a php-based site. So far the project has been a great deal of fun. I enjoy working in php, and the original developer clearly followed the golden rule of starting with a plan and building from there. He also had the courtesy to document and comment his code, making it easy for me to follow in his footsteps.
It may seem odd for a 
