Add Category Accordion in Left/Right Sidebar in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

(function(c){
c.fn.extend({
accordion: function() {
return this.each(function() {

var cul = c(this);

if(cul.data(‘accordiated’))
return false;

c.each(cul.find(‘ul, li>div’), function(){
c(this).data(‘accordiated’, true);
c(this).hide();
});

c.each(cul.find(‘span.head’), function(){
c(this).click(function(e){
activate(this);
return void(0);
});
});

var active = (location.hash)?c(this).find(‘a[href=' + location.hash + ']‘)[0]:”;

if(active){
activate(active, ‘toggle’);
c(active).parents().show();
}

function activate(el,effect){
c(el).parent(‘li’).toggleClass(‘active’).siblings().removeClass(‘active’).children(‘ul, div’).slideUp(‘fast’);
c(el).siblings(‘ul, div’)[(effect || 'slideToggle')]((!effect)?’fast':null);
}

});
}
});
})(c);

c(“ul.accordion li.parent”).each(function(){
c(this).append(‘<span class=”head”><a href=”javascript:void(0)”></a></span>’);
});

c(‘ul.accordion’).accordion();

c(“ul.accordion li.active”).each(function(){
c(this).children().next(“ul”).css(‘display’, ‘block’);
});

});

</script>

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.accordion” after=”currency” template=”catalog/navigation/accordion.phtml”/>

Now add following code in catalog/navigation/accordion.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-accordion” class=”accordion”>
<?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.

/* ======================================================================================= */
/*——Accordion ———*/
.accordion {
list-style-type: none;
padding: 0;
}
.accordion ul {
padding: 0;
margin: 0;
float: left;
display: block;
width: 100%;
}
.accordion li {
background: #ccc;
cursor: pointer;
list-style-type: none;
padding: 0;
margin: 0;
float: left;
display: block;
width: 100%;
position: relative;
}
.accordion li.active>a {
/*background: url(‘../images/close.gif’) no-repeat center right;*/
}
.accordion li div {
padding: 20px;
background: #aef;
display: block;
clear: both;
float: left;
width: 360px;
}
.accordion a {
text-decoration: none;
border-bottom: 1px solid #fff;
/*font: bold 1.1em/2em Arial, sans-serif;*/
font-size: 1.1em;
line-height: 28px;
font-weight: bold;
color: #222;
padding: 0 10px;
display: block;
cursor: pointer;
}
.accordion li.active a, .accordion a:hover {
color: #E26703;
}

.accordion ul a {
color: #222 !important;
}
.accordion ul a:hover, .accordion ul li.active a {
color: #E26703 !important;
}

.accordion ul ul a, .accordion ul li.active ul a {
color: #222 !important;
}
.accordion ul ul a:hover, .accordion ul ul li.active a, .accordion ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion ul ul ul a, .accordion ul ul li.active ul a {
color: #222 !important;
}
.accordion ul ul ul a:hover, .accordion ul ul ul li.active a, .accordion ul ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion ul ul ul ul a, .accordion ul ul ul li.active ul a {
color: #222 !important;
}
.accordion ul ul ul ul a:hover, .accordion ul ul ul ul li.active a, .accordion ul ul ul li.active ul a:hover {
color: #E26703 !important;
}

.accordion li.parent>a {
/*background: url(‘../images/open.gif’) no-repeat center right;*/
}

.accordion li ul li {
background: none repeat scroll 0 0 #ddd;
font-size: 0.9em;
}
.accordion li.active>ul {

}

.accordion ul a {
padding-left: 25px;
}
.accordion ul ul a {
padding-left: 40px;
}
.accordion ul ul ul a {
padding-left: 55px;
}
.accordion ul ul ul ul a {
padding-left: 70px;
}
.accordion ul ul ul ul ul a {
padding-left: 85px;
}

/*———– button accordion ————-*/
.accordion span.head {
position: absolute;
top: 7px;
right: 8px;
}
.accordion span.head a {
background: url(../images/menu_down.png) no-repeat;
color:#333333;
display:block;
height:15px;
padding:0;
width:15px;
border: 0;
}
.accordion span.head a:hover, .accordion li.active>span.head a {
background: url(../images/menu_up.png) no-repeat;
}
.accordion li.selected span.head a {
background: url(../images/menu_up.png) no-repeat;
}
.accordion li.selected span.head a:hover {
background: url(../images/menu_down.png) no-repeat;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/dropdown.css</stylesheet></action>

Now copy following images into skin\frontend\default\default\images path. 

menu_down     menu_up

Thats it..!!!

About these ads
  1. thank you boss :) realy good help..

    • Triveni Gaikwad
    • July 30th, 2013

    Hey can you please give the same menu using hover function

  2. Thanks Its working

  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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: