Magento Forum

   
Left Navigation Update
 
danilo delfino
Jr. Member
 
Total Posts:  2
Joined:  2010-01-05
 

Is there any updated solution for the left menu. Looked all over and everything seems to be dated before 2009.
I almost got it done by tweeking the css file only. But it’s completely out of the place. I just want a simple left nav for my categories.

Anyone
thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gyniolatry
Sr. Member
 
Total Posts:  132
Joined:  2009-11-26
Perth.au
 

Simple Vertical menu for the Left Col
Based on dx3webs.com - vert_nav
Use a text editor like notepad++ if copying code from this page as quotation marks are ” not “ ...

Create a vert_nav.phtml file ie.  template\catalog\navigation\vert_nav.phtml containing

<div class="vertical-nav-container box base-mini">
 <
div class="vertical-nav">
 <
ul id="nav_vert"<?php foreach ($this->getStoreCategories() as $_category): ?> <?php echo $this->drawItem($_category?> <?php endforeach ?> </ul>
 </
div>
 </
div>

In app\design\_interface\_theme\layout\catalog.xml
Replace ref to left.phtml in each category Layout where you want menu to appear ie.  <catalog_category_default> , <catalog_category_layered>

<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"/>      
</
reference>

This is working in V 1.3.2.4

 
Magento Community Magento Community
Magento Community
Magento Community
 
SS_Bob
Jr. Member
 
Total Posts:  1
Joined:  2010-02-05
 

I have got the vert_nav file pulling in and showing on the left hand column for all of my pages.  Right now I have 2 left hand column category navs showing up, one from my custom file and one from the standard Magento configuration.

I want to disable the standard Magento categories from show up but I don’t want to disable all of the the other SHOP BY options, such as price, color, etc.

Is there a way to remove the Magento categories while keeping the other “shop by” features?

Thanks!

Bob

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gyniolatry
Sr. Member
 
Total Posts:  132
Joined:  2009-11-26
Perth.au
 

Admin->System->Configuration > developer, Set current confguration scope to Main Website
Template PathHints YES, Add Block Names to Hints YES and save config.

The above will show you the path and block details.
You will notice they are seperate blocks.

The Layout .xml file is layout/catalog.xml

The default category block is leftnav.
The post above shows it commented out.

it appears in the following page layout modules.
<default>, <catalog_category_default>, <catalog_category_layered>

From your post you mention colors ect. which leads me to assume you are using layered navigation.
page module <catalog_category_layered> which includes in the <reference name="left">

<block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>

The navigation left found in template/catalog/navigation/left.phtml is responsible for ‘Browse By’ (categories)

The layer_view found in template/catalog/layer/view.phtml responsible for ‘Shop by’ (Attributes)

To remove left.phtml comment out the block in the layout file. or remove it using ‘unsetChild’ custom design>layout update on CMS page

So the key to finding anything in magento is the path hints.
Once you get the hang of xml contains block contains .phtml can contain block can contain phtml you should be right ; )

 
Magento Community Magento Community
Magento Community
Magento Community
 
digitalscientist
Jr. Member
 
Total Posts:  3
Joined:  2009-09-14
 

Hey I have tried this solution and it’s still not doing anything for me..... Do you have any other tips?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gyniolatry
Sr. Member
 
Total Posts:  132
Joined:  2009-11-26
Perth.au
 

Hi Digitalscientist,

What’s the issue you are having ?

The menu creation code above is the same as that which creates the standard top menu.
We just add some widths to the css to display it on the left.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Do you want Nav Like this Yogavault

This is the original tread http://www.magentocommerce.com/wiki/how_to_create_a_vertical_left_hand_menu but I found that the directory structure out of Date also the phtml file was wrong and also the CSS

I have how ever got this working on the latest magento Modern theme Here goes

Create vert_nav.phtml in app / design / frontend / base / default / template / catalog / navigation containing this:

vert_nav.phtml

<div class="vertical-nav-container box base-mini">
<
div class="vertical-nav">

<!--<
div class="head">-->

<!--<
h4>-->
<
div class="block block-cart">
    <
div class="block-title">
        <
strong><span><?php echo $this->__('Categories'?></span></strong
</
div><!--End block block-cart-->


<
div class="block-content">

<!--</
h4>-->
<!--</
div>--><!--End Of head-->

<
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>
</
div><!--End Of vertical-nav-->

<?php echo $this->getChildHtml('topLeftLinks'?> 

</div><!--End Of vertical-nav-container box base-mini-->

Then Do this >>>>

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

Use this section below nothing is deleted its just commented out

<!--
Category default layout
-->

    <
catalog_category_default translate="label">
        <
label>Catalog Category (Non-Anchor)</label>
        <
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"/>

I will post the CSS Next Too many characters for this post

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bill007
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2008-01-15
New Zealand
 

Part 2 The CSS is the most complicated for me to get right

in skin/frontend/default/modern/css/widgets.css

add the following to the bottom of the widgets.css

#nav { float:left; margin-top:15px; margin-left:15px; font-size:1.1em; }

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-transform:uppercase; text-align:left;    }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav li { float:left; margin:1px 8px 11px 1px; padding:3px 8px; }
#nav li.active a { color:#444; }
#nav a { float:left; background:url(../images/nav_top_level_arrow.gif) no-repeat 100% 50%; padding-right:11px; color:#444; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#444; }
#nav li.over,
#nav li.active { margin:0 7px 10px 0; border:1px solid #bbb; background:#ececec; }

/************ 1ST LEVEL ************/
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { background:url(../images/nav_parent_arrow.gif) no-repeat 100% 50%; }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav ul { position:absolute; width:15em; top:22px; left:-10000px; border:1px solid #bbb; border-bottom:2px solid #999; padding:3px 8px; background:#fcfcfc; font-size:11px; }

/* Show menu */
#nav li.over > ul { left:-1px; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0; color:#5a7f00 !important; }

/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; }


    /**********************************************Vertical Nav ****************************************/

    #nav_vert { padding:0 8px; 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-widththin;

    
border-bottom-stylesolid;

    
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 {

    
positionabsolute;

    
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 {

    
positionabsolute;

    
left: -1px;

    
top0;

    
z-index: -1;

    
filterprogid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

    
}

Hope it works for you I have not dealt with Magento for ages so I am a bit rusty still need to get rid of the header nav but cant remember

Regards Bill007

 
Magento Community Magento Community
Magento Community
Magento Community
 
Trilby
Member
 
Total Posts:  31
Joined:  2009-07-05
 
Gyniolatry - 05 February 2010 03:51 PM


The navigation left found in template/catalog/navigation/left.phtml is responsible for ‘Browse By’ (categories)

The layer_view found in template/catalog/layer/view.phtml responsible for ‘Shop by’ (Attributes)

Thanks so much for posting these two lines!  I am trying to adapt a purchased template to a customer’s designs and have spent a week trying to understand why I was not getting the same result on the home page as on catalog pages.  I didn’t understand the layer view in catalog.xml or the template.
I hope it’s okay to post keywords so others can find it if having the same issue?
Difference between browse by and shop by. How to add shop by to home page.  How to add browse by to home page.  Where is getItemsCount?
Trilby

 
Magento Community Magento Community
Magento Community
Magento Community
 
Paul Daniel
Member
 
Total Posts:  34
Joined:  2009-12-22
 

checkout this link

http://www.howtocreate.co.uk/tutorials/testMenu.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
bfly03
Member
 
Total Posts:  59
Joined:  2010-06-14
 

@ Gyniolatry

Thanks for the code:
<block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>
It has helped out greatly.

Once the ‘shop by’ layered nav is working and you click on a price, the ‘currently shopping by’ area appears. Do you know what controls this section?

And do you know of any way to get the ‘Browse by’ categories section on every page?

cheers,

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mirasvit
Guru
 
Avatar
Total Posts:  638
Joined:  2009-08-22
 

Hello,

As the matter of fact the current menu system of Magento is not very convenient. It does not allow you to change the menu structure, add the own links or change the markup.
Consider the Menu Manager Pro . This extension simplifies the creation of menus of different types with different structure significantly.

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