Add Categories in Left/Right sidebar in Magento

First add following code into dropdown.js which is created in js/vertical_menu path.

function toggleMenu(el, over)
{
if (over) {
Element.addClassName(el, ‘over’);
}
else {
Element.removeClassName(el, ‘over’);
}
}

var mainNav = function() {

var main = {
obj_nav : $(arguments[0]) || $(“ma-dropdown”),

settings : {
show_delay : 0,
hide_delay : 0,
_ie6 : /MSIE 6.+Win/.test(navigator.userAgent),
_ie7 : /MSIE 7.+Win/.test(navigator.userAgent)
},

init : function(obj, level) {
obj.lists = obj.childElements();
obj.lists.each(function(el,ind){
main.handlNavElement(el);
if((main.settings._ie6 || main.settings._ie7) && level){
main.ieFixZIndex(el, ind, obj.lists.size());
}
});
if(main.settings._ie6 && !level){
document.execCommand(“BackgroundImageCache”, false, true);
}
},

handlNavElement : function(list) {
if(list !== undefined){
list.onmouseover = function(){
main.fireNavEvent(this,true);
};
list.onmouseout = function(){
main.fireNavEvent(this,false);
};
if(list.down(“ul”)){
main.init(list.down(“ul”), true);
}
}
},

ieFixZIndex : function(el, i, l) {
if(el.tagName.toString().toLowerCase().indexOf(“iframe”) == -1){
el.style.zIndex = l – i;
} else {
el.onmouseover = “null”;
el.onmouseout = “null”;
}
},

fireNavEvent : function(elm,ev) {
if(ev){
elm.addClassName(“over”);
elm.down(“a”).addClassName(“over”);
if (elm.childElements()[1]) {
main.show(elm.childElements()[1]);
}
} else {
elm.removeClassName(“over”);
elm.down(“a”).removeClassName(“over”);
if (elm.childElements()[1]) {
main.hide(elm.childElements()[1]);
}
}
},

show : function (sub_elm) {
if (sub_elm.hide_time_id) {
clearTimeout(sub_elm.hide_time_id);
}
sub_elm.show_time_id = setTimeout(function() {
if (!sub_elm.hasClassName(“shown-sub”)) {
sub_elm.addClassName(“shown-sub”);
}
}, main.settings.show_delay);
},

hide : function (sub_elm) {
if (sub_elm.show_time_id) {
clearTimeout(sub_elm.show_time_id);
}
sub_elm.hide_time_id = setTimeout(function(){
if (sub_elm.hasClassName(“shown-sub”)) {
sub_elm.removeClassName(“shown-sub”);
}
}, main.settings.hide_delay);
}

};
if (arguments[1]) {
main.settings = Object.extend(main.settings, arguments[1]);
}
if (main.obj_nav) {
main.init(main.obj_nav, false);
}
};

document.observe(“dom:loaded”, function() {
//run navigation without delays and with default id=”#nav”
//mainNav();

//run navigation with delays
mainNav(“ma-dropdown”, {“show_delay”:”100″,”hide_delay”:”100″});
});

 

Now add following code in page.xml just after <action method=”addJs”><script>mage/cookies.js</script></action>

<action method=”addJs”><script>vertical_menu/dropdown.js</script></action>

 

Now add following code into catalog.xml in <default> tag in <reference name=”left”> or <reference name=”right”>

<block type=”catalog/navigation” name=”catalog.leftnav.nav” after=”-” template=”catalog/navigation/left_nav.phtml”/>

 

Now add following code in catalog/navigation/left_nav.phtml

<div class=”block block-verticalmenu”>
<div class=”block-title”>
<strong><span><?php echo $this->__(‘Categories’) ?></span></strong>
</div><!–End block block-cart–>
<div class=”block-content”>
<ul id=”ma-dropdown” class=”dropdown”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div><!–End Of vertical-nav–>
<?php echo $this->getChildHtml(‘topLeftLinks’) ?>
</div><!–End Of vertical-nav-container box base-mini–>

 

Now add following css code into dropdow.css  which is created in skin\frontend\default\default\css path.

/*———– dropdown menu ———–*/
#ma-dropdown {
width: 193px;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#ma-dropdown li {
position:relative;
text-align:left;
border-bottom: 1px solid #cdcdcd;
}
#ma-dropdown li.last {
border: none;
}
#ma-dropdown li.over {
z-index:998;
}
#ma-dropdown a,
#ma-dropdown a:hover {
display:block;
line-height:1.3em;
text-decoration:none;
}
#ma-dropdown span {
display:block;
cursor:pointer;
white-space:nowrap;
}
#ma-dropdown li ul span {
white-space:normal;
}
#ma-dropdown ul li.parent a {
}
#ma-dropdown ul li.parent li a {

}
/* 0 Level */
#ma-dropdown li.active a {
color:#d96708;
}
#ma-dropdown a {
padding:6px 10px;
color:#464646;
font-weight:bold;
}
#ma-dropdown li.over a,
#ma-dropdown a:hover {
color:#d96708;
}
/* 1st Level */
#ma-dropdown ul li,
#ma-dropdown ul li.active {
margin:0;
}
#ma-dropdown ul li.last {
background:#ecf3f6;
padding-bottom:0;
}
#ma-dropdown ul a,
#ma-dropdown ul a:hover {
background:none;
}
#ma-dropdown ul li a {
font-weight:normal !important;
}
/* 2nd Level */
#ma-dropdown ul,
#ma-dropdown div {
position:absolute;
width:193px;
top:-1px;
left:-10000px;
border:1px solid #cdcdcd;
}
#ma-dropdown div ul {
position:static;
width:auto;
border:none;
}
/* 3rd+ Level */
#ma-dropdown ul ul,
#ma-dropdown ul div {
top:-1px;
}
#ma-dropdown ul li a { background:#fff; }
#ma-dropdown ul li a:hover { background:#d5e4eb; }
#ma-dropdown ul li a,
#ma-dropdown ul li a:hover { color:#2f2f2f !important; }
#ma-dropdown ul span,
#ma-dropdown ul li.last li span { }
/* Show menu */
#ma-dropdown li ul.shown-sub,
#ma-dropdown li div.shown-sub { left:193px; z-index:999; }
#ma-dropdown li .shown-sub ul.shown-sub,
#ma-dropdown li .shown-sub li div.shown-sub { left:193px; }
/********** Navigation > */

Advertisements
  1. We are a gaggle of volunteers and opening a new scheme in
    our community. Your web site offered us with valuable information to
    work on. You have performed an impressive job and our whole community
    shall be thankful to you.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: