我正在使用带有默认 Prestashop 主题的 ps_mainmenu 顶部菜单,但只对父类别执行下拉菜单的操作,而不对子类别执行下拉菜单的操作,因为它显示在附加图像和 Chrome 的 HTML 代码中。我希望能够显示子类别的菜单。
我认为解决方案是添加如下行:
<div {if $depth === 1} class="top-menu collapse"{/if} id="top_sub_menu_{$_expand_id}">
{menu nodes=$node.children depth=$node.depth parent=$node.children}
</div>
HTML 菜单:https://ibb.co/dWcYfV
这是我的 ps_mainmenu.tpl 代码:
{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"></i>
<i class="material-icons remove"></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>
谢谢!
最佳答案
解决方法:
修改 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>
并且 在 eme.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;
关于php - Prestashop 1.7 - 顶部菜单中的下拉子类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53410148/