UPDATE

Following reports of formatting problems I have rewritten this page with the help of SyntaxHighlighter Evolved plugin. Please use the View Source options when copying code. This works with magento 1.3x for instruction for 1.4x please go here

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

Looking for Optimised UK Magento Hosting

Rock solid speed and reliability
Robust, reliable, fully backed up, secure UK based Magento hosting for £175 per year. Full details here or Contact us

Related posts:

  1. Create a left hand navigation / vertical category in Magento
  2. Magento: Move Related Products to centre column in Modern theme
  3. Remove side_logo_promo.gif from header in modern theme for Magento