Your store’s navigation is a critical component to the success or failure of your Miva Merchant ecommerce store. After all if your customers can’t find your products, then your sales are going to suffer no matter how good your site looks or what you sell.

Your left navigation or the “Category Tree” as it is called in Miva Merchant plays an important role in providing your customers an easy way to find your products. This blog post is going to show you how to style the Miva Merchant category Tree to have the exact look and feel you need to match your website.

CSSUI vs MMUI

Before I get into the CSS details, let’s first talk about the difference between the category tree in MMUI vs CSSUI. I’ll be the first to tell you that the MMUI category tree is very difficult to understand and figure out. It requires you to understand the category tree stack, and to make matters worse, the category tree recursively calls itself making it even more difficult to follow.

Unless you are a web developer and well-versed in Miva Merchant, chances are you have avoided looking at and customizing the MMUI category tree like the plague.

However, one of the best changes our software development team made in CSSUI is that they recognized these shortcomings and completely rewrote how the category tree works and functions, taking special consideration to allow us to customize its style purely by using CSS.

They built in pre-existing classes for each “level” of the category tree so all we need to do is modify a few lines of CSS,and we have a completely different looking category tree.

On a side note, CSSUI relies heavily on understanding CSS (Cascading Style Sheets), hence the name. If you are interested in learning more about CSS and how it applies to Miva Merchant, the Developer Training Series is a great place to start. Level 2 of the Developer Training Series specifically addresses this and is a great resource to take your Miva Merchant and CSS skills to the next level. Currently, Level 2 is only open to those who have successfully completed Level 1.

CSSUI Category Tree Template

Let’s walk through the CSSUI category tree template to make sure we understand what is going on before we get into the CSS styling.

Here is the default template in a PR8 store:

<div id="category-tree">
<mvt:foreach array="cattree_categories" iterator="cattree_category">
	<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
	<div class="level-&mvte:cattree_category:level; active">
	<mvt:else>
	<div class="level-&mvte:cattree_category:level;">
	</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>
	</div>
</mvt:foreach>
</div>	

This new code is dramatically simpler and easier to understand than its MMUI counterpart. This is essentially a single for each loop that loops through the current category level you’re on all the way back up to the top level parent categories.

Within the foreach loop there are two “if” statements. The first one checks to see which current category you’re on and gives it a class of “active.”

<mvt:if expr="l.settings:cattree_category:code EQ g.Category_Code">
	<div class="level-&mvte:cattree_category:level; active">
<mvt:else>
	<div class="level-&mvte:cattree_category:level;">
</mvt:if>	

It also gives each level a div with a class of level-1, level-2, level-3, etc depending on which level is being shown. Take this category structure as an example:

If I view the source, here is what I see:

 <div id="category-tree">
  <div class="level-1"> <a href="http://demo.coolcommerce.net/category/featured_products.html"> Featured Products </a> </div>
  <div class="level-1"> <a href="http://demo.coolcommerce.net/category/keyboards.html"> Keyboards </a> </div>
  <div class="level-1 active"> <a href="http://demo.coolcommerce.net/category/mice.html"> Mice </a> </div>
  <div class="level-2"> <a href="http://demo.coolcommerce.net/category/wireless.html"> Wireless Mice </a> </div>
  <div class="level-2"> <a href="http://demo.coolcommerce.net/category/wired.html"> Wired Mice </a> </div>
  <div class="level-1"> <a href="http://demo.coolcommerce.net/category/computers.html"> Computers </a> </div>
  <div class="level-1"> <a href="http://demo.coolcommerce.net/category/apparel.html"> Apparel </a> </div>
  <div class="level-1"> <a href="http://demo.coolcommerce.net/category/apple.html"> Apple </a> </div>
</div> 

Things To Note

• Each level is a div with a class of level-1 for the top level categories and level-2 for the second level.
• The Mice category has a class of “active.”

Looking back to the second if else statement within the Category Tree template it checks to see if you have a category tree image uploaded and will display it instead of the category name:

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

Important Note: While this code is there to support the Category Tree Image functionality, we highly recommend you never use an image in place of your category name. Any styling you need to do can be done via CSS, and having images instead of the category name is a huge SEO mistake. The search engines will not able to read the image and crawl your website fully.

The CSS

So now that we understand the HTML structure the category tree structure generates, lets look at the CSS needed to style it.

Here is the part of the default CSS in a brand new PR8 store:

 #category-tree .level-1 a{ padding:4px 6px 4px 12px; }
#category-tree .level-2 a{ padding:4px 6px 4px 24px; }
#category-tree .level-3 a{ padding:4px 6px 4px 36px; }
#category-tree .level-4 a{ padding:4px 6px 4px 48px; }
#category-tree .level-5 a{ padding:4px 6px 4px 60px; }
#category-tree .level-6 a{ padding:4px 6px 4px 72px; }

#category-tree div.active{ background-color:#999999; }

#category-tree div{
	background-color:#666666;
	border-bottom:1px solid #ffffff;	
}

Out of the box we support levels 1 through 6, but if you wanted to go deeper you could (but most likely won’t need to) just by adding more levels to the stylesheet.

Each level has its own padding which is read clockwise like this:

Level 1 has:

padding top 4px
padding right of 6px
padding bottom of 4px and
padding left of 12px.

Notice each subsequent level the last number (padding left) gets bigger and bigger. This is what causes each level to be indented more and more as you go deeper into the category tree.

You’ll also notice the active class. Out of the box we make the active state have a background of #999999 which is light grey:

Let’s say for example I want to add a plus sign icon to each category level and change the background colors. Here is how you do it by only changing the CSS:

 #left-navigation{
	width:28%;
	border-right:1px solid #eeeeee;
	padding:0 0 0 4px;
	vertical-align:top;
}

#category-tree a{
	background: url("/images/plus_icon.jpg") no-repeat scroll right center;
	display:block;
	text-decoration:none;
	color:#000000;
}

#category-tree div{
	background-color:#ffffff;
	border-bottom:1px solid #999999;
	padding:10px 0px;
}

#category-tree .level-1 a{ 
	padding:4px 6px 4px 10px;
	color:#000;
}
#category-tree .level-2 a{ 
	padding:4px 6px 4px 24px;
	color:#999;
	}

#category-tree div.active{ 
	font-weight: bold;
	color:#00F;
	}

The text in red represents the things that I changed, basically all I did was take the default CSS styles that come with Miva Merchant and modify them to get the look and feel I wanted for the category tree.

Here is a video clip from our DTS (Developer Training Series) that talks specifically about how to style the Category Tree. Keep in mind that they update the category tree html structure to use and unordered list (ul’s and li’s) vs divs for each category tree element, however the core concepts are the same. All the styling is going to be done through CSS.

Advanced Left Navigations Menus / Fly Out Menus

To achieve this type of structure, you would need a module like Toolkit to customize the category tree and print all categories to the page. Keep in mind that this is not recommended with stores with a lot of categories, (i.e. thousands) because it will greatly increase page load time Here is some sample code using Toolkit to create a flyout menu:

 <mvt:item name="toolkit" param="parentcat|pccount" />
	<ul class="dropdown flyout">
		<mvt:foreach iterator="parent_category" array="parent_categories">
			<li><a href="/category/&mvte:parent_category:code;.html" title="&mvte:parent_category:name;">&mvte:parent_category:name;</a>
				<mvt:item name="toolkit" param="subcat|ccount|l.all_settings:parent_category:code" />
				<mvt:if expr="ccount GT 0">
					<ul class="sub-menu">
						<mvt:foreach iterator="sub_category" array="sub_categories">
							<li><a href="/category/&mvte:sub_category:code;.html" title="&mvte:sub_category:name;">&mvte:sub_category:name;</a>
								<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">
											<li><a href="/category/&mvte:sub_category2:code;.html" title="&mvte:sub_category2:name;">&mvte:sub_category2:name;</a></li>
										</mvt:foreach>
									</ul>
								</mvt:if>
							</li>
						</mvt:foreach>
					</ul>
				</mvt:if>
			</li>	
		</mvt:foreach>
	</ul>

This code will produce this HTML structure:

 <ul class="dropdown flyout">
  <li><a href="/category/cat1.html" title="Standard Products">Standard Products</a>
    <ul class="sub-menu">
      <li><a href="/category/subcat1.html" title="Subcategory 1">Subcategory 1</a>
        <ul>
          <li><a href="/category/subsubcat1.html" title="Sub-Subcategory 1">Sub-Subcategory 1</a></li>
          <li><a href="/category/subsubcat2.html" title="Sub-Subcategory 2">Sub-Subcategory 2</a></li>
        </ul>
      </li>
      <li><a href="/category/subcat2.html" title="Subcategory 2">Subcategory 2</a> </li>
      <li><a href="/category/subcat3.html" title="Subcategory 3">Subcategory 3</a> </li>
    </ul>
  </li>
  <li><a href="/category/cat2.html" title="Tabs">Tabs</a> </li>
  <li><a href="/category/cat3.html" title="Tool Tips">Tool Tips</a> </li>
  <li><a href="/category/cat4.html" title="Light-Boxes">Light-Boxes</a> </li>
  <li><a href="/category/cat5.html" title="Dropdown Navigation">Dropdown Navigation</a> </li>
</ul>

Here is some sample CSS to style it:

 /* ----- top level category list ----- */
ul.dropdown {
	position: relative;
	margin: 0;
	padding: 0;
}		
	ul.dropdown a:hover {
		color: #000;
	}
	ul.dropdown a:active {
		color: #ffa500;
	}
	ul.dropdown li {
		font-weight: bold;
		float: left;
		zoom: 1;
		background: #ccc;
		vertical-align: middle;
		list-style: none;
		margin: 0;
		padding: 0;
	}
		ul.dropdown li a {
			display: block;
			padding: 4px 10px;
			border-right: 1px solid #333;
			color: #222;
			text-decoration: none;
		}
			/* Reiterated here because IE6 won't recognize like all the other browsers. */
			.ie6 ul.dropdown li a {
				color: #222;
				text-decoration: none;
			}
		ul.dropdown li:last-child a {
			border-right: none;
		}
		ul.dropdown li.hover,
		ul.dropdown li:hover {
			background: #f3d673;
			color: #000;
			position: relative;
		}
		ul.dropdown li.hover a {
			color: #000;
		}
	ul.dropdown code {
		padding: 0 0 0 10px;
	}

	/* ----- second level category list ----- */
	ul.dropdown ul {
		width: 220px;
		visibility: hidden;
		position: absolute;
		top: 100%;
		left: 0;
		padding: 0;
		margin: 0;
	}
		ul.dropdown ul li {
			font-weight: normal;
			background: #f6f6f6;
			color: #000;
			border-bottom: 1px solid #ccc;
			float: none;
		}
			.ie6 ul.dropdown ul li,
			.ie7 ul.dropdown ul li {
				display: inline;
				width: 100%;
			}
			ul.dropdown ul li a {
				border-right: none;
				display: block;
			}
				/* IE 6 & 7 Needs Inline Block */
				.ie6 ul.dropdown ul li a,
				.ie7 ul.dropdown ul li a {
					display: inline-block;
				}
		ul.dropdown .sub-menu code {
			padding: 0;
			display: inline;
			position: absolute;
			right: 10px;
		}

		/* ----- third level category list ----- */
		ul.dropdown ul ul {
			left: 100%;
			top: 0;
		}
			ul.dropdown li:hover > ul {
				visibility: visible;
			}

/* ----- use to convert the menu to a vertical layout for the category tree ----- */
ul.flyout {
	width: 200px;
}
	ul.flyout li {
		float: none;
	}
		ul.flyout ul {
			top: 0;
			left: 100%;
		}

And the finished product will look like this:

The Miva Merchant Category Tree is a powerful and easy to use item once you understand what it is doing and how you need to style it via CSS. Any design is achievable and any functionality is possible with modules like Toolkit.

Here are some creative examples of both top navigation as well as left navigation using both Toolkit and Miva’s Category Tree Template:

Le Travel Store

• Category Tree used for left navigation
• Toolkit used for top drop downs

HAAN USA

Toolkit used for custom left navigation and top drop downs

Bed Bath Home

Miva Merchant Category Tree for left navigation

Toolkit used for top “Mega Menu” drop down

Feel free to post other creative uses/styling of the Miva Merchant Category Tree in the comments to share your customizations and ideas with others.