douyu3145 2019-02-27 22:27
浏览 116
已采纳

如何在Drupal 8中将自定义类设置为子菜单?

I am working on sidebar menu in a Custom Drupal 8 Theme. I am trying to set a class of sidebar__menu--submenu-1,sidebar__menu--submenu-2, sidebar__menu--submenu-3 and so on depending on the level of the submenus.

So far, I was able to add the class sidebar__menu to the first level & sidebar__menu--submenu to all the submenus. However, I want to add the class sidebar__menu--submenu-(number of the level) so I can style & control the sidebar better on css.

Here it is my code 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 %}

Any help will be really appreciate it!

  • 写回答

1条回答 默认 最新

  • doukun5339 2019-02-28 16:01
    关注

    I have found the answer. First we set the classes:

    {%
    set submenu_classes = [
      'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
      'sidebar__menu--submenu-' ~ (menu_level + 1),
    ]
    

    %}

    Then using the logic like so:

    {% 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 %}
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B