Ok here’s how to make a dynamic jQuery sliding accordian menu in Magento, as seen on http://www.waterfrontbathrooms.com/.

Waterfront bathrooms also has a dynamic tree menu system to deal with there being more than 2 levels of categories, but I’ll cover this in a future post.

  1. Upload jQuery
    Upload the latest jQuery version to js/jquery/jqueryfile.js. You can get the latest jQuery file from: http://docs.jquery.com/Downloading_jQuery

     

  2. Upload ddAccordian
    Upload ddAccordian menu script to js/ddaccordian.js. You can get ddaccordian.js from http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js

     

  3. Call the javascript files from the page head
    Open app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml and put the following lines in anywhere after the default lines of code.
    <script type="text/javascript" src="/js/jquery/jqueryfile.js"></script><br /> <script type="text/javascript" src="/js/ddaccordion.js"></script>

     

  4. Create the navigation template file [download here]
    Create a new phtml file in app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/ You can call this whatever you like, but for the purpose of this post lets call it AccordianMenu.phtml.

    This would be app/design/frontend/yourpackage/yourtheme/template/catalog/navigation/AccordianMenu.phtml.

    In this file you want to put this code. This is what gets all the categories from the database and displays them in a way that ddAccordian can understand.

    <?php
/* Get the categories that are active for the store */ $_main_categories=$this->getStoreCategories();
/* Get the current category the user is in */   $_default_category=$this->getCurrentCategory();
?>
<div id="leftmenu">
<?php
if ($_main_categories):
/* This bit cycles through the categories - setting the next one to current */
foreach ($_main_categories as $_main_category):
// if(($_main_category->getIsActive()) && ($_main_category->getId() != 37)): // Skip Category with ID of 37  if($_main_category->getIsActive()):
$cur_category=Mage::getModel('catalog/category')->load($_main_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
?>
<?php $_categories=$this->getCurrentChildCategories()?>
<?php if($_categories->count()):?>
<div><?php echo $this->getCurrentCategory()->getName();?></div>
<div> <ul>
<? foreach ($_categories as $_category):?>
<? if($_category->getIsActive()):
$cur_subcategory=Mage::getModel('catalog/category')->load($_category->getId()); $layer = Mage::getSingleton('catalog/layer'); $layer->setCurrentCategory($cur_subcategory);
?>                          <li>&raquo; <a href="<?php echo $this->getCategoryUrl($_category)?>"><?php echo $_category->getName()?></a></li>
<? endif;?>
<?endforeach?>
</ul> </div>
<?else:?>
<div><a href="<?php echo $this->getCategoryUrl($_main_category)?>"><?php echo $_main_category->getName();?></a></div>
<?endif;?>
<?php
endif;
endforeach;
?>
<?php endif; ?>
<?php $layer->setCurrentCategory($_default_category);  ?>
<div><a href="#">Information Page</a></div> <div><a href="#">Information Page</a></div> <div><a href="#">Information Page</a></div>
</div>

  5. Refence the AccordianMenu.phtml in catalog.xml

    In your main layout file (app/design/frontend/yourpackage/yourtheme/layout/catalog.xml), you need to tell Magento what the Accordian file is, and where to put it. This tutorial isn’t really about covering the workings of your catalog.xml file, you’ll find plenty of tutorials about this if you search around google. The code I use to link the accordian menu to the left column is:

    <reference name="left"> <block type="catalog/navigation" name="catalog.accordianmenu" template="catalog/navigation/AccordianMenu.phtml"/> </reference>

  6. Configure ddAccordian settings
    Open your head file again (app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml) and add the following code underneath where you called the scripts. 
    <script type="text/javascript"><br /> //Initialize first demo:<br /> ddaccordion.init({<br /> headerclass: "navhead", //Shared CSS class name of headers group<br /> contentclass: "navcontent", //Shared CSS class name of contents group<br /> revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"<br /> mouseoverdelay: 400, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover<br /> collapseprev: true, //Collapse previous content (so only one open at any time)? true/false<br /> defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.<br /> onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)<br /> animatedefault: true, //Should contents open by default be animated into view?<br /> persiststate: true, //persist state of opened contents within browser session?<br /> toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]<br /> togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)<br /> animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"<br /> oninit:function(expandedindices){ //custom code to run when headers have initalized<br /> //do nothing<br /> },<br /> onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed<br /> //do nothing<br /> }<br /> })<br /> </script>

    You can play with these values to get the desired effect, such as opening the sub categories on mouseover rather than click.

Now hopefully with a bit of styling you should be in business. If you have any questions/problems with this, leave a comment and I’d be happy to help.

Credit for the ddAccordian script goes to the guys at www.dynamicdrive.com. They have some pretty cool scripts over there, you should check it out.

Incase you missed it, you can download my AccordianMenu file from http://www.msinternet.co.uk/AccordianMenu.txt

Ben
Creative Lead
MS Internet