Magento – Magento 2 Custom Category Nav Submenu

category-listingmagento2navigationsubmenu

So i have created a Magento 2 theme based on Blank, and the customer wants the submenu of the navigation to be a big window instead of the little dropdown that comes out of the box. They also want custom links in this window..

Im totally lost, I have inserted the topmenu.phtml into the theme and from there i can only tweak so much.. It would be great if i could get the submenu out of the menu such as this:

<nav class="custom navigation" data-action="navigation">
<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>

    <?php /* @escapeNotVerified */ echo $_menu; ?>
    <div class="custom-submenu">
    <!-- custom div for submenu  -->
    </div>



    <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
</ul>

But the function for $_menu is quite complicated and i havent managed to get the backend of topmenu.php into my project properly.

Moving stuff around in the default.xml doesnt help since i need to build a layout for the block/div with custom links and styling.

What do i do? Buying extensions like mega-menu is not an option..
Building a whole new module with the category-navigation seems super hard and overkill?

Best Answer

I've also been looking into this for the past few days. The Magento 2 blank theme uses out of the box jquery ui for the menu. I was able to use CSS to stretch the drop down to full width but I couldn't get custom links working in this or multiple columns under one drop down. I think the only option is to write a module or plugin to reformat the html. Remember that if you write a plugin you can only use this to override public methods. I'm looking at overriding or writing something to run before/after the getHTML function in Magento\Theme\Block\Html\Topmenu

Another possibility may be to remove the menu.js jquery part and write something entirely custom for this but I think you still wouldn't be able do anything about custom links without a plugin.

Related Solutions

Magento – Vertically Position Main Navigation on Home Page

I would suggest using unsetChild and insert rather than remove and then having to create the block again. Oddly unsetChild takes the block alias set via as but insert takes the block name.

<default>
    <reference name="header">
        <action method="unsetChild"><name>topMenu</name></action>
    </reference>
    <reference name="content">
        <action method="insert"><name>top.menu</name></action>
    </reference>
</default>

Using insert also gives you some more power as regards to positioning of the block etc as you can pass some more parameters.

public function insert($block, $siblingName = '', $after = false, $alias = '')

NOTE: the main functions you can use via layout xml can be found in Mage_Core_Block_Abstract

Magento – Submenu Magento 1.9 not showing

I think i found a solution, after looking for hours onto google i found it myself.

Thank you all for viewing. To Tell you its in the renderer.phtml file change it like this an it will work.

$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 = 'level'. $childLevel;
    $_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

    $html .= '<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($_hasChildren)) {
        $html .= '<ul class="level'. $childLevel .'">';
        $html .=     '<li class="level'. $nextChildLevel .'">';
        $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>';
    }

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

    $html .= '</li>';

    $counter++; }

return $html;

Best Answer

Related Solutions

Magento – Vertically Position Main Navigation on Home Page

Magento – Submenu Magento 1.9 not showing

Related Topic