Magento Vertical Menu using Peter Hamilton’s code

In one of our premium Magento themes we implemented a vertical category menu with the code adapted from this thread. It’s quite easy to implement and to make it even easier for others, we decided to write a step by step tutorial.

  • Add a new block type in “catalog.xml” file
  • Create a new phtml file and name it “leftnav.phtml”, place it inside catalog/navigation
  • Edit CSS

Add a new block type in “catalog.xml” file

Here we presume you want to have the vertical category menu shows up on every page, to do so, we will place the code in the <default> layout like so, and we want it to always stay on the top, so we added “before=”-”:


<default>
<!-- Mage_Catalog -->
<reference name="right">
<block type="catalog/navigation"before="-"
name="leftNav" as="leftNav" template="catalog/navigation/leftnav.phtml"/>
</reference>

You can change the reference name from ‘right’ to left if you prefer to have the vertical menu placed on the left column.

Create a leftnav.phtml file

This code is copied directly from the above mention thread posted by Peter Hamilton on #63 with a bit of modification to fix the validation error.:


<div class="sidebox">
<h6>Browse Category</h6>
<ul id="side-nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php if ($_category->getIsActive()) { ?>
<?php $open = $this->isCategoryActive($_category); ?>
<?php $potential = $_category->hasChildren(); ?>
<li class="subcat"><a href="<?php echo $this->getCategoryUrl($_category); ?>"<?php if($open) { echo ' class="open"'; } ?><?php if($potential) { echo ' class="potential"'; } ?> ><?php echo $_category->getName();?></a>
<?php if ($open && $potential): ?>
<ul id="sub-sidenav">
<?php foreach ($_category->getChildrenCategories() as $subcategory): ?>
<?php $subCat = Mage::getModel('catalog/category')->load($subcategory); ?>
<?php $open = $this->isCategoryActive($subCat); ?>
<?php $potential = $subCat->hasChildren(); ?>
<li><a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($open) { echo ' class="subopen"'; } ?><?php if(!$potential&&$open) { echo ' class="final"'; } ?> ><?php if($potential&&$open) { echo ' '; } elseif($potential) { echo ' '; }?><?php echo $subCat->getName(); ?></a>
<?php if ($open && $potential): ?>
<ul>
<?php foreach ($subcategory->getChildrenCategories() as $subsubcategory): ?>
<?php $subsubCat = Mage::getModel('catalog/category')->load($subsubcategory); ?>
<?php $open = $this->isCategoryActive($subsubCat) ?>
<li><a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($open) { echo ' class="final"'; } ?>><?php echo $subsubCat->getName(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php } ?>
<?php endforeach ?>
</ul>
</div>

Edit your CSS


ul#side-nav li.subcat {background-color:#f5f4f0;border-bottom:1px solid #ddd;
color:#222;margin: 0 -5px;display: block;}
ul#side-nav li.subcat a {display: block;padding: 2px 10px;font-size: .85em;}
ul#side-nav li.subcat:hover {
background-color:#fefefe;background-position: 50% top;}
ul#side-nav li.subcat ul li {padding-left:18px;
line-height: 1.6;background:#fff }
ul#side-nav li.subcat ul li a {color: #1a443c;font-weight: bold;
font-size: .85em!important;
background: url(../images/base_images/icon-arrow-set.png) no-repeat 0 -59px;}
ul#side-nav li.subcat ul li:hover {text-decoration: underline;}
ul#side-nav li.subcat a ,
ul#side-nav li.subcat ul li a:hover {text-decoration: none;}

That’s it! Simple isn’t it?

Known issue in Magento version 1.3

The recent release of Magento v1.3 has introduced Flat Catalog Category and Flat Catalog Product features, and some codes had changed in code/core/Mage/Catalog/Naviation.php that resulting Peter’s code not compatible with v1.3, as such, you need to update:

<?php foreach ($_category->getChildren() as $subcategory): ?>

to <?php foreach ($_category->getChildrenCategories() as $subcategory): ?>

if you wish to switch on Flat Catalog Category; however, we found a bug related to custom options when add to cart is performed with Flat Catalog Category switched on. The bug has been assigned, and before Varien releases an update, your choice is to use the old code with “getChildren” with no Flat Catalog Category enables if you have Configurable products or Simple Products with Custom Options setup.

The above leftnav code is for Flat Catalog Category switch on. Simply revert “getChildrenCategories()” to “getChildren()” if you do not want to use Flat Catalog Category feature.

Closing note

The code calls “getStoreCategories” and “getChildrenCategories” and it works a bit similar to the Layered Navigation’s category. Nice it is but has a tiny issue that we didn’t aware, that is, on our Magento New Red Theme, on the homepage, you see Bestsellers and New Products are listed, if you click on any of the products there, in the product page, you do not see the vertical category menu. This is because we didn’t setup categories for “bestsellers” and “new products”, so as far as that product page concerned, it belongs to no category (in another word, none of the categories are ‘active’ – see the code: <?php if ($_category->getIsActive()) { ?> ) therefor vertical menu is not presented.

In conclusion, we think this vertical category menu works best in conjunction with horizontal “topMenu” and should not be a substitute of topMenu.