Menu that open by itself after clicking on the link of a parent category

Question

When I click on parent category, the page load but the menu re-open if the pointer of the mouse is still present.

What do you recommend so that the menu does not re-open immediately ?

I found PHP of display :

    public function getMegamenu($catTop, $blocks)
{
    // Draw Mega Menu 
    $idTop    = $catTop->getEntityId();
    $hasChild = $catTop->hasChildren();
    $desktopTmp = $mobileTmp  = '';
    if($hasChild || $blocks['top'] || $blocks['left'] || $blocks['right'] || $blocks['bottom']) :
        $desktopTmp .= '<div class="level-top-mega">';  /* Wrap Mega */
            $desktopTmp .='<div class="content-mega">';  /*  Content Mega */
                $desktopTmp .= $blocks['top'];
                $desktopTmp .= '<div class="content-mega-horizontal">';
                    $desktopTmp .= $blocks['left'];
                    if($hasChild) :
                        $desktopTmp .= '<ul class="level0 mage-column cat-mega">';
                        $mobileTmp .= '<ul class="submenu">';
                        $childTop  =  $this->getChildExt($idTop);
                        foreach ($childTop as $child) {
                            $class = $this->isCategoryActive($child->getId()) ? ' level1 active' : ' level1';
                            $url =  '<a href="'. $child->getUrl().'"><span>'.__($child->getName()) . $this->getCatLabel($child) . '</span></a>';
                            $childHtml = ($this->_recursionLevel != 2 ) ? $this->getTreeCategoriesExt($child->getId()) : ''; // include magic_label
                            // $childHtml = ($this->_recursionLevel != 2 ) ? $this->getTreeCategoriesExtra($child->getId()) : ''; // include magic_label and Maximal Depth
                            $desktopTmp .= '<li class="children' . $class . '">' . $this->getImage($child) . $url . $childHtml . '</li>';
                            $mobileTmp  .= '<li class="' . $class . '">' . $url . $childHtml . '</li>';
                        }
                        //$desktopTmp .= '<li>'  .$blocks['bottom']. '</li>';
                        $desktopTmp .= '</ul>'; // end cat-mega
                        $mobileTmp .= '</ul>';
                    endif;
                    $desktopTmp .= $blocks['right'];
                $desktopTmp .= '</div>';
                $desktopTmp .= $blocks['bottom'];
            $desktopTmp .= '</div>';  /* End Content mega */
        $desktopTmp .= '</div>';  /* Warp Mega */
    endif;
    return array('desktop' => $desktopTmp, 'mobile' => $mobileTmp);
}

CSS :

...

.magicmenu .nav-desktop .level0 .level-top-mega,
.magicmenu .nav-desktop .level0.dropdown > .level0{  border-style: solid ;border-width: 1px;padding: 0px 23px;position:absolute;z-index:99999;display:block;opacity:0;top:130%;visibility:hidden;transition:all 300ms ease-in-out 0s;-moz-transition:all 300ms ease-in-out 0s;-webkit-transition:all 300ms ease-in-out 0s;-o-transition:all 300ms ease-in-out 0s;box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);}
.magicmenu .nav-desktop .level0:hover .level-top-mega,
.magicmenu .nav-desktop .level0.dropdown:hover > .level0{opacity:1;top: 39px;visibility:visible;}

...

Answer 1

This would be a great question for https://ux.stackexchange.com/, they provide some really good and often well researched and data-driven answers to this kind of thing.

But quickly what comes to mind, depending on how much control you have over the theme:

• Wait for x seconds after page load to allow the menu to open
• Wait for some amount of mouse movement before allowing the menu hover effects to work (probably the length of one of the larger menu items)
• Wait some small amount to create the hover effect (looks like the menu already has a small delay with animation, any more might annoy users)
• Make menu open when the item is clicked instead, include a nested sub menu item to replace the parent link.

Most of these would require a short delay after page load. You can use an overlay over the menu or add a class to the menu that enables the css to show the dropdown. I won't go into those details and assume that part you can figure out, but I'm happy to help if not... let me know.

Edit - want to add that the last idea, the click option, is my personal preference.

---

Update: By default Magento appears to use jquery ui menu widget. This does what you want as you can tell by installing a fresh magento with Luma theme, or simply check out their example here: https://jqueryui.com/menu/

Also I made a pen to further illustrate how this works: https://codepen.io/anon/pen/JVyKmP

When you hover over the grey box, the words "You Hovered" appears in the box. This happens the same way jqueryui works, which is through the mouseenter javascript event which fires when the mouse moves inside the box.

Notice that if you hover over the box the text appears, but if you keep your mouse in place and refresh the page, the text does not appear until you move the mouse again.

It's hard to give you an exact how-to for your situation because my guess would be that you are using a customized theme that doesn't work the same way. If this is the case you would have to edit either the CSS or JavaScript associated with the menu and replicate or utilize jqueryui. To do this you would wait for the mouseenter event, and when triggered, wait a short delay (hundreds of milliseconds) before showing the menu.

Answer 2

I agree with jamil on many points.

You could have the top category clickable on default. However, if someone does chose a category, you could have it showing the top of the page, but not showing the menu, so this also doesn't occur.

IOW, when any category is clicked, the next page shows (the category clicked on) but the page scrolls to the top of the chosen category, passing the main menu -- could be not the best though.

However, I strongly suggest you talk to the https://ux.stackexchange.com/ folks for sure.