Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Add a left side category list
 
soulrebel
Jr. Member
 
Total Posts:  4
Joined:  2008-11-25
 

Hi there,

I want to add a left side category list to my new Blue skin but I think I’m doing something wrong here.

I changed the catalog.xml and added a block in the default tag:

<reference name="left">
        <
block type="catalog/navigation" name="catalog.leftnav" template="catalog/navigation/left.phtml"/>
 </
reference>

But still it isnt working.

Can someone out here help me? Thnx!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Voot
Sr. Member
 
Total Posts:  261
Joined:  2008-03-20
Long Beach, CA
 

Hi- Unfortunately its not that easy. You’ll even have to edit the CSS file to make it vertical. I have a pre-made theme that have the left navigation feature included, its only $99. Check it out here: http://www.ivutha.com/moderate. PM me if you have any questions.

 
Magento Community Magento Community
Magento Community
Magento Community
 
soulrebel
Jr. Member
 
Total Posts:  4
Joined:  2008-11-25
 

Or you can just tell me wich files I need to edit instead of trying to sell me a template.

 
Magento Community Magento Community
Magento Community
Magento Community
 
stirrell
Jr. Member
 
Total Posts:  15
Joined:  2008-12-04
 

Check out this thread:

http://www.magentocommerce.com/boards/viewthread/4722/

A few messages down should explain the process of making a left-hand category list. I just used it today and it worked like a charm!

Sincerely,
Scott

 
Magento Community Magento Community
Magento Community
Magento Community
 
tonythemediaguy
Member
 
Total Posts:  31
Joined:  2008-08-16
 

I think your theme extension has been pulled. Maybe some copyrighted material was used?

 
Magento Community Magento Community
Magento Community
Magento Community
 
reefnut
Member
 
Total Posts:  72
Joined:  2008-07-05
 

One of the all time great questions here is the code that i have found to work you can see it in action at http://www.hotpricedgiftshop.com.

to create a left hand navigation:

Creating a vertical left-side category menu really is pretty easy. All that you have to do is create a new (really just copied) template and adjust the css. For the navigation, magento outputs an unordered-list, making it pretty easy to put in a vertical format using a couple of lines of css. There are three things that need to be done in order to output a vertical category structure:
1. Create vertical category template
2. Create CSS
3. Reference in xml files.

1. Create Vertical Category Template
Open template/catalog/navigation/top.phtml. Which should look like

<div class="header-nav-container">
<div class="header-nav">
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
</div>
<?php echo $this->getChildHtml('topLeftLinks') ?>
</div> Change:
header-nav-container to vertical-nav-container
header-nav to vertical nav
nav to nav_vert

Which would make look like:

<div class="vertical-nav-container">
<div class="vertical-nav">
<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>

Save this file as template/catalog/navigation/vert_nav.phtml.

2. Create CSS for vertical menu
Now that you have the template for the vertical navigation, you need to adjust the css to make it vertical. Copy the css below into you menu.css file: or just overwrite it.

/**********************************************Vertical Nav ****************************************/
#nav_vert { padding:0 20px; font-size:1em; z-index:999; width:190px; }

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
width:175px;
list-style:none;
position:relative;
text-align:left;
}
#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; }

/************ 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:15em;
margin-left:125px;
top:5px;
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:3px 15px 4px 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);
}

Note: The css is essentially the same for the horizontal nav, except for two spots. nav_vert and nav_vert li. Notice, we put a width on these two items, which will restrict the category menu to the width of the column, thus creating a vertical, rather than horizontal menu, which doesn’t have a defined width for the line items. You’ll also notice that we created a new container and box for the vertical menu called vertical-nav-container and vertical-nav. these allow for additional markup and styling that can be added to the main boxes.css file. Here, I will leave them blank. Also, please note that the above css was copied and altered from one of our test sites, so it may reference background-images that you do not have. Like I said the important think is putting the width restriction on the main vert_nav div and the vert_nav li. The rest can be customised for your site.

3. Reference your new menu
Ok, now you have a new vertical category menu that is not showing up anywhere. Great. You need to reference the new template in the catalog.xml for your template. In the <default></default> block of you catalog.xml file add:
<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>
The default block should be at the top of your catalog.xml file.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top