Magento Vertical Category Menu

Magento vertical category menu with the code adapted from this thread. It’s quite easy to implement and to make it even easier for others.

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

Source : http://asia-connect.com.vn/