ga('send', 'pageview'); skip to Main Content
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.