Magento

koda

步骤 I.编辑layout/catalog.xml

在<default>标签下，加入如下代码
<reference name="left">  <block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" /></reference>

步骤II. 在 template/catalog/navigation/目录下创建一个名为vert_nav.phtml 的文件,代码如下:
    <div class="vertical-nav-container box base-mini">      <div id="vertical-nav">       <div class="head">         <h4><?php echo $this->__('Categories') ?></h4>       </div>       <ul id="nav_vert">         <?php foreach ($this->getStoreCategories() as $_categoryNode): ?>         <?php $open = $this->isCategoryActive($_categoryNode); ?>         <?php $hasChildren = $_categoryNode->hasChildren(); ?>          <li>            <a href="<?php echo $this->getCategoryUrl($_categoryNode); ?>"<?php if($open) { echo ' class="open"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?> >             <?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }else{ echo ' '; }?><?php echo $_categoryNode->getName();?>            </a>            <?php if ($open && $hasChildren): ?>            <ul>             <?php foreach ($_categoryNode->getChildren() as $sonCategoryNode): ?>             <?php $subCat = Mage::getModel('catalog/category')->load($sonCategoryNode); ?>             <?php $open = $this->isCategoryActive($subCat); ?>             <?php $hasChildren = $subCat->hasChildren(); ?>             <li>               <a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($open) { echo ' class="subopen"'; } ?><?php if($hasChildren) { echo ' class="potential"'; } ?><?php if(!$hasChildren&&$open) { echo ' class="final"'; } ?> >                <?php if($hasChildren&&$open) { echo '- '; } elseif($hasChildren) { echo '+ '; }?><?php echo $subCat->getName(); ?>               </a>               <?php if ($open && $hasChildren): ?>                <ul>                  <?php foreach ($sonCategoryNode->getChildren() as $grandsonCategoryNode): ?>                   <?php $subsubCat = Mage::getModel('catalog/category')->load($grandsonCategoryNode); ?>                   <?php $open = $this->isCategoryActive($subsubCat) ?>                   <?php $hasChildren = $grandsonCategoryNode->hasChildren(); ?>                   <li>                     <a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($open) { echo ' class="final"'; } ?>>                      <?php if($hasChildren) { echo '+ '; }?><?php echo $subsubCat->getName(); ?>                     </a>                   </li>                  <?php endforeach; ?>                </ul>               <?php endif; ?>             </li>             <?php endforeach; ?>            </ul>            <?php endif; ?>          </li>         <?php endforeach ?>       </ul>      </div>    </div>
注意上面的代码$this->getStoreCategories()得到的不是Mage_Catalog_Model_Category类的实例，而是Varien_Data_Tree_Node类的实例

步骤III. 在添加到 skin/[yourinterface]/[yourtheme]/css/menu.css 文件里增加下面的代码
#vertical-nav ul {  list-style-type: none; /* get rid of the bullets */  padding:0; /* no padding */  margin:0; /* no margin for IE either */}#vertical-nav ul li {  margin: 0;  padding: 0;  display:block;  margin-top: 1px; /* lines */}#vertical-nav ul ul li a,#vertical-nav ul li{  background-color: #FFFFFF;}#vertical-nav ul li a {  display: block;  padding: 3px 3px 3px 23px;  margin:0;  text-decoration: none;  height:15px; /* hint for IE, alternatively remove whitespace from HTML */  background-color: #CCCCCC;}#vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen {  font-weight: bolder;  text-decoration: underline;  color:#000000}#vertical-nav .final{  background-color:#ECECEC;}#vertical-nav ul ul li a {  margin-left: 20px;}#vertical-nav ul ul ul li a {  margin-left: 40px; /* indent level 2 */}#vertical-nav a {  color:#999999;}#vertical-nav a:hover {  color:#666666;}#vertical-nav ul li ul li a {  border-top-width: thin;  border-bottom-width: thin;  border-top-style: dotted;  border-bottom-style: dotted;  border-top-color: #CCCCCC;  border-bottom-color: #CCCCCC;  margin-bottom:0px;  margin-top:0px;}#vertical-nav ul li ul li {  margin-bottom:0px;  margin-top:0px;}
进入一个layout有左列显示的网页（如任一产品分类页），你将可能看到如下的代码：

注：如果点击"两岁到三岁"分类，将进入该分类页面，但是该分类显示将不被展开。因为本例只是最多显示三层分类结构