Display Top Level Categories

01
<div class="block-title block-category-title"><h2><?php echo $this->__('Categories') ?></h2></div>
02
<?php $_helper = Mage::helper('catalog/category') ?>
03
<?php $_topCategories = $_helper->getStoreCategories() ?>
04
<?php if (count($_topCategories) > 0): ?>
05
    <ul>
06
        <?php foreach($_topCategories as $_category): ?>
07
            <li><a href="<?php echo $_helper->getCategoryUrl($_category) ?>"><?php echo $_category->getName() ?></a></li>
08
        <?php endforeach; ?>
09
    </ul>
10
<?php endif; ?>

Display Top Categories and Sub-Categories in Hierarchical Manner.  Vertical Navigation in Magento With CSS Style

Vertical Navigation CSS

 PHP | 
 copy code |
?
 
01
02
<style type="text/css">
03
 .tpVerticalNavigation1 ul{ margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 180px; /* Main Menu Item widths */border-bottom: 1px solid #ccc;}
04
  .tpVerticalNavigation1 ul li{position: relative;}
05
 
06
 /* Top level menu links style */
07
 .tpVerticalNavigation1 ul li a{ display: block; overflow: auto; /*force hasLayout in IE7 */color: white;text-decoration: none;padding: 6px;border-bottom: 1px solid #778;border-right: 1px solid #778;}
08
 .tpVerticalNavigation1 ul li a:link, .tpVerticalNavigation1 ul li a:visited, .tpVerticalNavigation1 ul li a:active{ background-color: #012D58; /*background of tabs (default state)*/}
09
 .tpVerticalNavigation1 ul li a:visited{color: white;}
10
 .tpVerticalNavigation1 ul li a:hover{background-color: black;}
11
 
12
 /*Sub level menu items */
13
 .tpVerticalNavigation1 ul li ul{ position: absolute; width: 170px; /*Sub Menu Items width */ top: 0; visibility: hidden;}
14
 .tpVerticalNavigation1 a.subfolderstyle{ background: url(../arrow.gif) no-repeat 97% 50%;}
15
</style>

Little JS Code to show/hide subcategories tab

01
02
<script type="text/javascript">
03
 var menuids=["tpVerticalNavigation1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
04
 function initVerticalMenu(){
05
 for (var i=0; i<menuids.length; i++){
06
 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
07
 for (var t=0; t<ultags.length; t++){
08
 ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
09
 if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
10
 ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
11
 else //else if this is a sub level submenu (ul)
12
 ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
13
 ultags[t].parentNode.onmouseover=function(){
14
 this.getElementsByTagName("ul")[0].style.display="block"
15
 }
16
 ultags[t].parentNode.onmouseout=function(){
17
 this.getElementsByTagName("ul")[0].style.display="none"
18
 }
19
 }
20
 for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
21
 ultags[t].style.visibility="visible"
22
 ultags[t].style.display="none"
23
 }
24
 }
25
 }
26
 if (window.addEventListener)
27
 window.addEventListener("load", initVerticalMenu, false)
28
 else if (window.attachEvent)
29
 window.attachEvent("onload", initVerticalMenu)
30
</script>
31
 
32

the PHP Code

01
02
<?php $_helper = Mage::helper('catalog/category') ?>
03
<?php $_topCategories = $_helper->getStoreCategories() ?>
04
<?php $currentCategory = Mage::registry('current_category') ?>
05
<div class="block block-category tpVerticalNavigation1">
06
<?php if (count($_topCategories) > 0): ?>
07
    <ul id="tpVerticalNavigation1">
08
        <?php foreach($_topCategories as $_category): ?>
09
            <li><a href="<?php echo $_helper->getCategoryUrl($_category) ?>"><?php echo $_category->getName() ?></a>
10
 <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
11
 <?php $_subcategories = $_category->getChildrenCategories() ?>
12
 <?php if (count($_subcategories) > 0): ?>
13
 <ul><?php foreach($_subcategories as $_subcategory): ?>
14
 <li><a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"><?php echo $_subcategory->getName() ?></a></li>
15
 <?php endforeach; ?>
16
 </ul>
17
 <?php endif; ?>
18
            </li>
19
        <?php endforeach; ?>
20
    </ul>
21
<?php endif; ?>
22
</div>
23