Create a left hand navigation / vertical 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 class="vertical-nav-container box base-mini">
<div class="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
<h4 class="no-display"><?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

add

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

so it looks like this:

<!--
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"/>
            <block type="core/template" name="right.latest.news" template="callouts/latest_news.phtml"/>
</reference>
        <reference name="content">

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="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>

to CMS > Pages > Home Page > Custom Design