Create a left hand navigation / verticle category in Magento

Using the modern theme to create a menu like http://www.cl-floraldesigns.co.uk

1)

Create vert_nav.phtml in  app / design / frontend / default / default / template / catalog / navigation

<div> <div> <div> <h4><?php echo $this->__(‘Categories’) ?></h4> </div> <h4><?php echo $this->__(‘Category Navigation:’) ?></h4> <ul id=”nav_vert”> <?php foreach ($this->getStoreCategories() as $_category): ?> <?php echo $this->drawItem($_category) ?> <?php endforeach ?> </ul> </div> <?php echo $this->getChildHtml(‘topLeftLinks’) ?> </div>

2)

in app / design / frontend / default / modern / layout / catalog.xml

change

<!– Category default layout –>

<catalog_category_default>

<reference name=”root”>

<action method=”setTemplate”><template>page/2columns-left.phtml</template></action> </reference> <reference name=”left”>

<block type=”catalog/navigation” name=”catalog.leftnav” after=”currency” template=”catalog/navigation/left.phtml”/>

<block type=”catalog/navigation” before=”-” name=”catalog.vertnav” template=”catalog/navigation/vert_nav.phtml”/>

…….

3) in   skin/frontend/default/modern/css/menu.css

/**********************************************Vertical Nav ****************************************/

#nav_vert { padding:0 20px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; }

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */

#nav_vert li {

width:200px;

list-style:none;

position:relative;

text-align:left;

background-color: #F6F6F6;

border-bottom-width: thin;

border-bottom-style: solid;

border-bottom-color: #CCCCCC;

}

#nav_vert li.over { z-index:999; }

#nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */

#nav_vert a { line-height:1.3em; }

#nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }

#nav_vert span { display:block; cursor:pointer; color: #000; }

/************ 1ST LEVEL ***************/

#nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; }

#nav_vert li.active a { color:#4c6a16; }

#nav_vert a {

float:left;

padding:5px 12px 6px 8px;

color:#4c6a16;

font-weight:bold;

font-family:Trebuchet MS;

font-size:13px;}

#nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }

/************ 1ST LEVEL RESET ************/

#nav_vert ul li, #nav_vert ul li.active {

float:none;

height:auto;

background:none;

margin:0;

}

#nav_vert ul a, #nav_vert ul a:hover {

float:none;

padding:0;

background:none;

}

#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ***********/

#nav_vert ul {

position: absolute;

width:200px;

margin-left:180px;

top:0px;

left:-10000px;

border:1px solid #666666;

}

/* Show menu */

#nav_vert li.over ul { left:0; }

#nav_vert li.over ul ul { left:-10000px; }

#nav_vert li.over ul li.over ul { left:100px; }

#nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; }

#nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }

#nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }

#nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }

#nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; }

#nav_vert ul li.last span { background:none; }

/************ 3RD+ LEVEL ************/

#nav_vert ul ul { top:5px;}

#nav_vert ul ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul li.over ul { left:100px; }

/* Fix for the IE bug */

#nav_vert iframe {

position: absolute;

left: -1px;

top: 0;

z-index: -1;

filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

}

Display on home page

add

<reference name=”content”> <block type=”catalog/product_new” before=”-” name=”home.catalog.product.new” alias=”product_new” template=”catalog/product/new.phtml” after=”cms_page”>

<action method=”addPriceBlockType”><type>bundle</type><block>bundle/catalog_product_price</block>

<template>bundle/catalog/product/price.phtml</template></action></block>

<block type=”reports/product_viewed” name=”home.reports.product.viewed” alias=”product_viewed” template=”reports/home_product_viewed.phtml” after=”product_new”>

<action method=”addPriceBlockType”><type>bundle</type>

<block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action></block>

<block type=”reports/product_compared” name=”home.reports.product.compared” template=”reports/home_product_compared.phtml” after=”product_viewed”>

<action method=”addPriceBlockType”><type>bundle</type>

<block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action></block>

</reference>

<reference name=”left”> <block type=”catalog/navigation” before=”-” name=”catalog.vertnav” template=”catalog/navigation/vert_nav.phtml”/>

<action method=”unsetChild”><alias>right.reports.product.viewed</alias></action>

<action method=”unsetChild”><alias>right.reports.product.compared</alias></action> </reference>