2

I have one main Category (View All Inventory) under which I have around 76 sub-categories. Right now it prints out all the 76 sub-categories in a single <ul> tag.

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

I would like to somehow divide all those subcategories equally and display them in multiple <ul> tag so the drop down menu spreads horizontally across the page instead of displaying them in a single <ul> tag vertical. How can I achieve it?

2

Refer below links:

http://inchoo.net/magento/custom-category-menu-navigation-in-magento/ http://fishpig.co.uk/magento/tutorials/display-categories-and-subcategories-in-magento/

This might be helpful for your requirement.

  • Those tutorials are for multi level categories but I have one single main categories under which I have around 76 categories. I have already tried those and they all displays the categories in a single <ul> tag. I am on this forum because I am still a beginner in php and I have tried all I could. I hope you understand my situation. – Kevin S Feb 3 '16 at 6:45
  • Okay, can you please share level-top .phtml file content in your question? – Jayesh Patel Feb 3 '16 at 6:50
2

There are 2 ways to do it. You will need test where is your header navigation content coming from.

For instance, in Magento 1.9.2.2 the content comes from: app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml

First Approach

In this file make the below modifications to FOREACH loop ONLY:

foreach ($children as $child) {
 $child->setLevel($childLevel);
 $child->setIsFirst($counter == 1);
 $child->setIsLast($counter == $childrenCount);
 $child->setPositionClass($itemPositionClassPrefix . $counter);

 $outermostClassCode = 'level'. $childLevel;
 $_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

$html .= '<ul><li '. $this->_getRenderedMenuItemAttributes($child) .'>';

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

if (!empty($childrenWrapClass)) {
    $html .= '<div class="'. $childrenWrapClass .'">';
}

$nextChildLevel = $childLevel + 1;



if (!empty($childrenWrapClass)) {
    $html .= '</div>';
}

$html .= '</li></ul>';

if (!empty($_hasChildren)) {
    //$html .= '<ul class="level'. $childLevel .'">';
    //$html .=     '<li class="level'. $nextChildLevel .' view-all">';
    //$html .=         '<a class="level'. $nextChildLevel .'" href="'. $child->getUrl() .'">';
    //$html .=             $this->__('View All') . ' ' . $this->escapeHtml($this->__($child->getName()));
    //$html .=         '</a>';
    //$html .=     '</li>';
    $html .=     $this->render($child, $childrenWrapClass);
    //$html .= '</ul>';
}

$counter++;

}

Next is to navigate to app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml:

<nav id="nav">
    <?php /*<ol class="nav-primary">*/ ?>
        <?php echo $_menu ?>
    <?php /*</ol>*/ ?>
</nav>

The above way you will be able to display each of your categories as required.

Second Approach

if your code comes from this file: app/code/core/Mage/Page/Block/Html/Topmenu.php

You will need to override this file: app/code/core/Mage/Page/Block/Html/Topmenu.php

Create the below files: app/code/local/Namespace/Page/Block/Html/Topmenu.php app/code/local/Namespace/Page/etc/config.xml app/etc/modules/Namespace_Page.xml

Hoping you know what needs to go into which file.

Inside Topmenu.php, copy paste below function:

/**
 * Recursively generates top menu html from data that is specified in $menuTree
 *
 * @param Varien_Data_Tree_Node $menuTree
 * @param string $childrenWrapClass
 * @return string
 * @deprecated since 1.8.2.0 use child block catalog.topnav.renderer instead
 */
protected function _getHtml(Varien_Data_Tree_Node $menuTree, $childrenWrapClass)
{
    $html = '';

    $children = $menuTree->getChildren();
    $parentLevel = $menuTree->getLevel();
    $childLevel = is_null($parentLevel) ? 0 : $parentLevel + 1;

    $counter = 1;
    $childrenCount = $children->count();

    $parentPositionClass = $menuTree->getPositionClass();
    $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

    foreach ($children as $child) {

        $child->setLevel($childLevel);
        $child->setIsFirst($counter == 1);
        $child->setIsLast($counter == $childrenCount);
        $child->setPositionClass($itemPositionClassPrefix . $counter);

        $outermostClassCode = '';
        $outermostClass = $menuTree->getOutermostClass();

        if ($childLevel == 0 && $outermostClass) {
            $outermostClassCode = ' class="' . $outermostClass . '" ';
            $child->setClass($outermostClass);
        }

        $html .= '<ul><li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
        $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
            . $this->escapeHtml($child->getName()) . '</span></a>';

        if ($child->hasChildren()) {
            if (!empty($childrenWrapClass)) {
                $html .= '<div class="' . $childrenWrapClass . '">';
            }
            //$html .= '<ul class="level' . $childLevel . '">';
            $html .= $this->_getHtml($child, $childrenWrapClass);
            //$html .= '</ul>';

            if (!empty($childrenWrapClass)) {
                $html .= '</div>';
            }
        }
        $html .= '</li></ul>';

        $counter++;
    }

    return $html;
}

enter image description here

Let me know if this helps.

Happy Coding...

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.