Display Subcategories in Topnavigation
-
12-12-2019 - |
Question
I am trying to display my top navigation like this:
_________________
| Main Category |
|_______________|
|
(on hover)
| _________________________________________________
| | |
|--> | Category 1.1 Category 1.2 Category 1.3 |
| _____________ _____________ _____________ |
| Subcat. 1.1.1 Subcat. 1.2.1 Subcat. 1.3.1 |
| Subcat. 1.1.2 Subcat. 1.2.2 Subcat. 1.3.2 |
| Subcat. 1.1.3 Subcat. 1.2.3 Subcat. 1.3.3 |
|_______________________________________________|
So my goal is to list the subcategories below the parent category, directly in the ul.level0 dropdown, instead of having them inside of another ul (ul.level1).
I know there are several extensions that would allow me to do this, but it seems they all offer too much functionality and therefore have a huge impact on store performance while I could probably achieve the same result with a simple template change adding no extra page load.
Solution
Magento 1.8.0.2 and above
You can change this directly in app/design/frontend/yourtheme/default/template/page/html/topmenu/renderer.html
For your reference, this is defined in page.xml
:
<block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
<block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>
</block>
Then you can just these two lines:
if($childLevel <= 0)
$html .= '<ul class="level'. $childLevel .'">';
...
if($childLevel <= 0)
$html .= '</ul>';
For older versions of Magento
The HTML for the top navigation is located in: app/code/core/Mage/Page/Block/Html/Topmenu.php
so you will need to rewrite this block in a custom module
<config>
...
<blocks>
<page><rewrite><html_topmenu>Namespace_Module_Block_Html_Topmenu</html_topmenu></rewrite></page>
</blocks>
...
</config>
Then you just need to override the _getHtml
function - you will notice when it populates the children dropdown, it adds <ul>
tags. You can do the following:
if($childLevel <= 0)
$html[] = '<ul class="level' . $childLevel. '">';
$html[] = $this->_getHtml($child, $childrenWrapClass);
if($childLevel <= 0)
$html[] = '</ul>';