Dx3webs : The Ultimate Magento Host - Speed : Support : Security

Create a left hand navigation / vertical category in Magento

[stextbox id=”custom” caption=”UPDATE” color=”ffffff” bcolor=”ffffff'” bgcolor=”000000″ image=”null” float=”true” width=”600″]
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


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>
<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 ?>
<?php echo $this->getChildHtml('topLeftLinks') ?>


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


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

so it looks like this:

Category default layout
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
        <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 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 {





    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 {


    padding:5px 12px 6px 8px;



    font-family:Trebuchet MS;


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

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

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






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





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

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

    #nav_vert ul {

    position: absolute;





    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


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

to CMS > Pages > Home Page > Custom Design

[stextbox id=”alert” width=”600″ color=”000″ bcolor=”000″ bgcolor=”eeeeee” image=”null” caption=”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

Tags: , , , , ,

14 Comments : Leave a Reply

  1. x3graphics says:

    Exactly what I was looking for but didn’t work for me, I am getting this error:
    Exception printing is disabled by default for security reasons.

  2. admin says:

    What version of magento are you using?

  3. Graphic_Arts says:

    Could you please help me out?

  4. admin says:

    sure, what’s up?

  5. Martin says:

    If you copy and paste from this page, make sure you replace all the slanted ” and ’ with ” and ‘. Caused some problems for a bit.

  6. admin says:

    Hi Martin,

    Thanks for pointing this out.. I have now replaced the code and the escaping problems should be fixed..

    I have also corrected a few missing ‘class’ calls

  7. Tim says:

    Perfect! Thanks for this, I’ve been searching for hours.

  8. Claus H says:

    Submenus does not work in !!!
    or is it me?

    Using safari

  9. admin says:

    you need to follow the instructions In post titled “Create a Left hand Navigation in Magento 1.4 1.4x”

  10. Simon says:

    Hi, Thanks a lot for the contribution!
    Could you explain how to make it visible on search page and contact page? thanks a million!

  11. rami says:

    how do i make it to the right block instead of the left block?


  12. Jean says:


    Thanks for this tutorial! It is great, works. Only thing is, how do I have it either expandable for the subcategories or indent the subcategories so that it does not look so confusing.

    Thanks a million!

  13. Firoz Khan says:

    Firoz Khan:

    Hello everybody, I’m new in magento and using magento- version(with hellowired theme) but i’v some problem about my category,i required category default and in left. so plz help me.
    Firoz Khan

  14. Linda says:

    The tutorial is great but still it seems to be too complicated for me.
    Can you recommend any plugins for that? I’ve recently come across layered navigation by Amasty. Does it suit?
    Thanks in advance for your answer!

Leave a Reply