3

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.

2

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>';
  • 2
    I only checked in Enterprise 1.12 and Community 1.9.1, but the top menu block in the header is actually in Mage_Page__Block_Html_Top_Menu. – David Tay May 11 '15 at 13:22
  • I think you are right, the file to change is Mage\Page\Block\Html\Topmenu.php. I will give this shot and share my results. Thanks! – loeffel May 11 '15 at 13:24
  • My bad, the Catalog_Navigation block would be for the left category navigation. I have updated my response with the correct paths ;) – Mayers May 11 '15 at 13:30
  • 1
    I have just checked, since 1.8.0.2, you can directly modify the template in template/page/html/topmenu/renderer.phtml so you don't have to create a module. Although, if you run an older version, you will need this override (I will update my ticket accordingly) – Mayers May 11 '15 at 14:41
  • I am trying to achieve similar layout of the top navigation -> sub navigation however not getting the right result. if($childLevel <= 0) $html .= '<ul class="level'. $childLevel .'">'; ... if($childLevel <= 0) $html .= '</ul>'; any detail explanation to get the desired layout? @Mayers – harry Mar 8 '18 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.