Generate a left hand menu for product categories in Magento

Question

I'm looking for a method to generate a left hand menu in Magento much like the top menu present in the default template, anyone have a method for doing this?

Answer 1

If you don't want to muck around with the PHP templates, here is how I've done it using JavaScript (jQuery):

<style>
    #left-nav {float:left; width:160px;border:1px solid #000; border-width:1px 1px 0;margin-right:8px;}
    #left-nav li {border-bottom:1px solid #000;}
    #left-nav a {display:block; text-decoration:none; background:#FFF; color:#000; padding:8px;}
    #left-nav a:hover {color:#FFF; background:#000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script>
    $(function(){
        $('<ul id="left-nav" />')
          .html($("#nav").html())
          .find("li")
          .removeClass("level0")
          .prependTo("#main");
        $(".header-nav-container").hide();
    });
</script>

Answer 2

Hy,

there are some extensions and wiki entries which should help fulfill your needs. See some possible solutions here (all can be found, if you look for vertical navigation in Magento Boards):

Vertical Navigation with CSS Classes

How to create a vertical left hand menu

M

Answer 3

We have documented the answer here:

http://dx3webs.com/front/2010/01/create-a-left-hand-navigation-verticle-category-in-magento/