Post by jaga on Dec 26, 2011 3:38:32 GMT -8
Move the top menu navigation as left menu navigation
Reffer
follow this link www.magentocommerce.com/boards/viewthread/20632/
To Add vertical Side Menu
In catalog.xml add the following code
<reference name="left.menu">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/leftmenu.phtml"/>
</reference>
In page.xml
find the block left
<block type="core/text_list" name="left" as="left" translate="label">
<label>Left Column</label>
</block>
and replace it with:
<block type="core/text_list" name="left" as="left" translate="label">
<label>Left Column</label>
<block type="core/text_list" name="left.menu" as="leftMenu"/>
</block>
Now u have to call this block to display in left side
for that open app/design/frontend/base/design/template/callouts/left_col.phtml
add or if it does'nt exist create and paste this code
<div class="block block-banner">
<div class="block-content">
<?php echo $this->getChildHtml('leftMenu') ?>
</div>
</div>
Now you have added the block. now u have to code it,
IN the folder app/default/your theme/template/catalog/navigation
add a file leftmenu.phtml as declared by u in catalog.xml
now paste the code below in it
<div class="block Left Nav">
<div class="block-title">
<strong><span><?php echo $this->__('Categories') ?></span></strong>
</div>
<div class="block-content">
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div>
</div>
Now clear your cache and open ur page ull see the menu, but with no alignments, so to add alignments
So open your css folder and in styles.css
paste the code below
/*Vertical Menu Style */
#nav_vert { padding:0 0px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; float:left; }
/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
width:175px;
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:hover{background: #DBDBDB;}
#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:300;
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 li:hover > ul { position:absolute; width:auto; margin-left:175px; top:0px; left:0px; border:1px solid #666666; display:block; background: #efefef }
/* Show menu */
#nav_vert li > ul {display:none}
#nav_vert ul li a { padding:6px 10px; color:#444 !important; border-bottom: 1px solid #b9b9b9;border-top: 1px solid #f4f4f4;border-left: 1px solid #b9b9b9; border-right: 1px solid #b9b9b9; }
#nav_vert ul li a:hover { padding:6px 10px; color:#444 !important;background: #DBDBDB !important; text-shadow: none !important; border-top: 1px solid #f7f7f7;}
/*#nav_vert li.over > ul { left:0px; }
#nav_vert li.over > ul li.over > ul { left:100px; }
#nav_vert li.over ul ul { left:-10000px; }
#nav_vert li:hover > ul li:hover {background-image:none !important;}
#nav_vert li.parent > ul li a { background-image:none;text-shadow: 0px 1px #fff !important; }
#nav_vert li.parent > ul li a:hover { background-image:none;text-shadow: 0px 1px #fff !important; }
#nav_vert ul li.last a { border-bottom: 0px; }*/
/************ 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);
}
Now ur all done clear your cache and run the program
Reffer
follow this link www.magentocommerce.com/boards/viewthread/20632/
To Add vertical Side Menu
In catalog.xml add the following code
<reference name="left.menu">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/leftmenu.phtml"/>
</reference>
In page.xml
find the block left
<block type="core/text_list" name="left" as="left" translate="label">
<label>Left Column</label>
</block>
and replace it with:
<block type="core/text_list" name="left" as="left" translate="label">
<label>Left Column</label>
<block type="core/text_list" name="left.menu" as="leftMenu"/>
</block>
Now u have to call this block to display in left side
for that open app/design/frontend/base/design/template/callouts/left_col.phtml
add or if it does'nt exist create and paste this code
<div class="block block-banner">
<div class="block-content">
<?php echo $this->getChildHtml('leftMenu') ?>
</div>
</div>
Now you have added the block. now u have to code it,
IN the folder app/default/your theme/template/catalog/navigation
add a file leftmenu.phtml as declared by u in catalog.xml
now paste the code below in it
<div class="block Left Nav">
<div class="block-title">
<strong><span><?php echo $this->__('Categories') ?></span></strong>
</div>
<div class="block-content">
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div>
</div>
Now clear your cache and open ur page ull see the menu, but with no alignments, so to add alignments
So open your css folder and in styles.css
paste the code below
/*Vertical Menu Style */
#nav_vert { padding:0 0px; font-size:1em; z-index:999; width:180px; background-color: #F6F6F6; float:left; }
/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
width:175px;
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:hover{background: #DBDBDB;}
#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:300;
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 li:hover > ul { position:absolute; width:auto; margin-left:175px; top:0px; left:0px; border:1px solid #666666; display:block; background: #efefef }
/* Show menu */
#nav_vert li > ul {display:none}
#nav_vert ul li a { padding:6px 10px; color:#444 !important; border-bottom: 1px solid #b9b9b9;border-top: 1px solid #f4f4f4;border-left: 1px solid #b9b9b9; border-right: 1px solid #b9b9b9; }
#nav_vert ul li a:hover { padding:6px 10px; color:#444 !important;background: #DBDBDB !important; text-shadow: none !important; border-top: 1px solid #f7f7f7;}
/*#nav_vert li.over > ul { left:0px; }
#nav_vert li.over > ul li.over > ul { left:100px; }
#nav_vert li.over ul ul { left:-10000px; }
#nav_vert li:hover > ul li:hover {background-image:none !important;}
#nav_vert li.parent > ul li a { background-image:none;text-shadow: 0px 1px #fff !important; }
#nav_vert li.parent > ul li a:hover { background-image:none;text-shadow: 0px 1px #fff !important; }
#nav_vert ul li.last a { border-bottom: 0px; }*/
/************ 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);
}
Now ur all done clear your cache and run the program