Magento Sidebar Category Navigation

running on Magento use it.

But when clients ask for a vertical or side menu, so it can expand or show nicely organized. In this article, I am going to explain how to set the side menu either in the left sidebar or the right sidebar.

In this article, I am going to share how to achieve this including a kind of mega menu(side) with category images. This menu could use a little js and CSS for styling & image on hover but it further concern.

The Idea

The idea for generating such a menu is to get Magento's default navigation block, fetch, and display according to our requirements. We could get here Mage's Model('catalog/category') but in this way we will lose control of Magento's category option "Include in Navigation Menu ". Using the navigation block we will have control over what category to be shown. Now we will create a specific file for this navigation and call to our layout.

The Navigation File

For the navigation we need to get categories to be shown in the menu, for this we need to create a new file inapp/design/frontend/base/default/template/page/html/sidemenu.phtml. We will call this on our layout, we can do it through the controller but let's keep it simple. Open this file in any editor and put the contents as

<div class="menu_body">

<ol>

<?php

$menuobj = new Mage_Catalog_Block_Navigation();

$mainCategories = $menuobj->getStoreCategories();

Mage::registry('current_category') ? $currentCategoryId = Mage::registry('current_category')->getId() : $currentCategoryId='';

foreach ($mainCategories as $_category):

?>

<li>

<strong><?php echo $_category->getName(); ?></strong>

<?php $categoryChildren = $_category->getChildren(); ?>

<?php if($categoryChildren->count()) : ?>

<ol>

<?php foreach($categoryChildren as $_categoryChild) : ?>

<?php $_categoryChildModel = Mage::getModel('catalog/category')->load($_categoryChild->getId());?>

<li><div>

<img src="/<?php echo Mage::getModel('catalog/category')->load($_categoryChild->getId())->getImageUrl(); ?>" hight="100" width="100">

</div>

<?php

$currentCategoryId===$_categoryChild->getId() ? $bold="style="font-weight:bold"" : $bold='';

echo ' ' . '<a href="' . $_categoryChildModel->getUrl() . '"' . $bold . '>' . $_categoryChild->getName() . '</a>';

?>

</li>

<?php endforeach; ?>

</ol>

<?php endif; ?>

</li>

<?php endforeach ?>

</ol>

As you can see there is a small image of 100×100 in front of the child li tag. You can set it on hover by using JS & CSS.

Getting into Layout

For adding it to the layout we need to add a block in our Layout. To do so open app/design/frontend/base(or Your theme)/default/layout/page.xml. Put there.

<reference name="left">

<block type="core/template" name="catalog.sidemenu" template="page/html/sidemenu.phtml" />

</reference>

for Left Side navigation and

<reference name="right">

<block type="core/template" name="catalog.sidenav" template="page/html/sidemenu.phtml" />

</reference>

for the Right side menu. Now the layout part is completed and your file will be called in Magento front. You can now check it and modify it according to your requirements.

Final Words

Now it's time to customize it and make look & feel better, you can turn it into Mega-Menu. Or you can make a tree-like structure. As you can see we use one of the Magento features and turn that into another useful feature. Like this, it has many capabilities and can be modified. I am waiting for your comments and suggestions.