Magento
步骤 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///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有左列显示的网页（如任一产品分类页），你将可能看到如下的代码：
http://www.agoit.com/upload/attachment/47726/4e7ca69a-dfc2-3c58-b5ab-ddf9b0a3242b.png
注：如果点击"两岁到三岁"分类，将进入该分类页面，但是该分类显示将不被展开。因为本例只是最多显示三层分类结构
页:
[1]