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;
}

For those users using the new CSSUI version of Miva Merchant 5.5, you’ll need to use a different set of code for your creating your list. I’ll be honest, this code below hasn’t been tested (the part I’m not positive on is the creation of the nested list if you’re in a subcategory) so don’t be afraid to let me know if it doesn’t work, and we can tweak it.

<ul id="category-tree">
<mvt:foreach array="cattree_categories" iterator="cattree_category">

	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		<ul class="ul-level-&mvte:cattree_category:level;">
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	<mvt:else>
		<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
		<li class="level-&mvte:cattree_category:level; active">
		<mvt:else>
		<li class="level-&mvte:cattree_category:level;">
		</mvt:if>
	</mvt:if>
			<a href="&mvte:cattree_category:link;">
			<mvt:if expr="l.settings:cattree_category:image">
			<img src="&mvte:cattree_category:image;" alt="&mvte:cattree_category:name;" />
			<mvt:else>
			&mvte:cattree_category:name;
			</mvt:if>
			</a>
		</li>
	<mvt:if expr="((l.settings:cattree_category:level NE 1) AND (pos1 EQ 1))">
		</ul>
	</mvt:if>
</mvt:foreach>
</ul>