如何在 Drupal 8 中为子菜单设置自定义 class?
How to set a custom class to submenus in Drupal 8?
我正在 Custom Drupal 8 Theme 中处理侧边栏菜单。我正在尝试设置 class
的 sidebar__menu--submenu-1
、sidebar__menu--submenu-2
、sidebar__menu--submenu-3
和依此类推,具体取决于子菜单的级别。
到目前为止,我已经能够将 class
sidebar__menu
添加到第一级 & sidebar__menu--submenu
到所有子菜单的级别。但是,我想添加 'class' sidebar__menu--submenu-(number of the level)
这样我就可以使用 [=30 更好地设计和控制侧边栏=]CSS。
这是我的代码 menu.html.twig:
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level, menu_name) %}
{% import _self as menus %}
{%
set menu_classes = [
'sidebar__menu' ~ menu_name|clean_class,
]
%}
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
]
%}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}>
{% endif %}
{% for item in items %}
{%
set classes = [
'sidebar__item',
item.is_expanded ? 'sidebar__item--expanded',
item.is_collapsed ? 'sidebar__item--collapsed',
item.in_active_trail ? 'sidebar__item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
任何帮助将不胜感激!
我找到了答案。首先我们设置 类:
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
'sidebar__menu--submenu-' ~ (menu_level + 1),
]
%}
然后使用这样的逻辑:
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul{{ attributes.removeClass(menu_classes, 'sidebar__menu--submenu-' ~ (menu_level)).addClass(submenu_classes) }}>
{% endif %}
我正在 Custom Drupal 8 Theme 中处理侧边栏菜单。我正在尝试设置 class
的 sidebar__menu--submenu-1
、sidebar__menu--submenu-2
、sidebar__menu--submenu-3
和依此类推,具体取决于子菜单的级别。
到目前为止,我已经能够将 class
sidebar__menu
添加到第一级 & sidebar__menu--submenu
到所有子菜单的级别。但是,我想添加 'class' sidebar__menu--submenu-(number of the level)
这样我就可以使用 [=30 更好地设计和控制侧边栏=]CSS。
这是我的代码 menu.html.twig:
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level, menu_name) %}
{% import _self as menus %}
{%
set menu_classes = [
'sidebar__menu' ~ menu_name|clean_class,
]
%}
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
]
%}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}>
{% endif %}
{% for item in items %}
{%
set classes = [
'sidebar__item',
item.is_expanded ? 'sidebar__item--expanded',
item.is_collapsed ? 'sidebar__item--collapsed',
item.in_active_trail ? 'sidebar__item--active-trail',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
任何帮助将不胜感激!
我找到了答案。首先我们设置 类:
{%
set submenu_classes = [
'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
'sidebar__menu--submenu-' ~ (menu_level + 1),
]
%}
然后使用这样的逻辑:
{% if menu_level == 0 %}
<ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
{% else %}
<ul{{ attributes.removeClass(menu_classes, 'sidebar__menu--submenu-' ~ (menu_level)).addClass(submenu_classes) }}>
{% endif %}