Drop-down subcategories in top menu

[Goullak]

 

Hello,

I am using ps_mainmenu top menu with default Prestashop theme, but only performs the action of the drop-down menu with the parent category but not with the subcategories, as it appears in the attached image and the HTML code with Chrome. I would like to be able to display the menu of subcategories. Somebody could help me? Thanks! This is my ps_mainmenu.tpl code:

 

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
        {/foreach}
      </ul>
    {/if}
{/function}

<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

 

Edited November 20, 2018 by Goullak (see edit history)

[Goullak]

Solution:

Modify this line in ps_mainmenu.tpl:

<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="js-sub-menu sub-menu2 collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
</div>

And add this class in theme.css:

.top-menu[data-depth="1"] li:hover .sub-menu2  {
    display:  block!important;
}
.top-menu .sub-menu2 ul[data-depth="2"]>li {
    float: left;
    margin: 0 1.25rem;
}
.top-menu .sub-menu2.collapse {
    position: absolute;
    top: auto!important;
    display: none;
    float: left;
    zoom: 1;
    z-index: 10;
    margin: 0 0 40px -1px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
    -o-box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
    border-top: none;
    color: #212121;
    background: -moz-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, #e2e2e2), color-stop(22%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -o-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0, #fff 22%, #fff 100%);
    background: linear-gradient(to bottom, #e2e2e2 0, #fff 22%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',    endColorstr='#ffffff',    GradientType=0 );
}
.top-menu .sub-menu2 {
    box-shadow: 2px 1px 11px 2px rgba(0, 0, 0, .1);
    border: none;
    margin-left: .9375rem;
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    z-index: 18;
    display: none;

 

[marpre]

 

Hello,

did this work four anybody ?   Any solution fort the same question/problem at  PS 1.6 ?

And Goullak, what did you mean by "modify this line in ps_mainmenu.tpl:

<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="js-sub-menu sub-menu2 collapse"{/if} id="top_sub_menu_{$_expand_id}"> {menu nodes=$node.children depth=$node.depth parent=$node} </div>

 

modify the depth ?

 

or add the shown lines to the code ?

 

Thanks so much for a  PS 1.6 solution in advance.

 

 

[elementChaosu]

On 1.7.8 theme i've could not find out why the theme.js code don't show subcategories on ps_mainmenu as it has to, so I've made it work by adding this js which copies intended behaviour into theme/themename/assets/js/custom.js
Worked so far 🙂

 

$(document).ready(function() {
    if (!$('.mobile').is(':visible')) {
        $('.top-menu  li').each(function() {
            $(this).on('mouseover', function() {
                if (!$('.mobile').is(':visible')) {
                    $(this).find('.js-sub-menu').show();
                };
            })
            $(this).on('mouseout', function() {
                if (!$('.mobile').is(':visible')) {
                    $(this).find('.js-sub-menu').hide();
                };
            })
        })
    }
});