Question

I have been looking at this twig code for a while, and tried a few trix to move the flag of the “current” item down to the link object (a) instead of the list item object (li) but I can’t seem to get it right.

The output I get at the moment is

<ul>
<li class="current first">
<a href="myUrl">Hem</a>        
</li>

The desired output is

<ul>
<li class="first">
<a class="current" href="/hemekonomi/web/app_dev.php/">Hem</a>        
</li>

Here is the twig file (the standard twig template file for knpMenuBundle with irrelevant modifications to it).

{% macro attributes(attributes) %}
{% for name, value in attributes %}
    {%- if value is not none and value is not sameas(false) -%}
        {{- ' %s="%s"'|format(name, value is sameas(true) ? name|e : value|e)|raw -}}
    {%- endif -%}
{%- endfor -%}
{% endmacro %}

{% block compressed_root %}
{% spaceless %}
{{ block('root') }}
{% endspaceless %}
{% endblock %}

{% block root %}
{% set listAttributes = item.childrenAttributes %}
{{ block('list') -}}
{% endblock %}

{% block list %}
{% if item.hasChildren and options.depth is not sameas(0) and item.displayChildren %}
    <ul class="art-hmenu">
        {{ block('children') }}
    </ul>
{% endif %}
{% endblock %}

{% block children %}
{# save current variables #}
{% set currentOptions = options %}
{% set currentItem = item %}
{# update the depth for children #}
{% if options.depth is not none %}
{% set options = currentOptions|merge({'depth': currentOptions.depth - 1}) %}
{% endif %}
{% for item in currentItem.children %}
    {{ block('item') }}
{% endfor %}
{# restore current variables #}
{% set item = currentItem %}
{% set options = currentOptions %}
{% endblock %}

{% block item %}
{% if item.displayed %}
{# building the class of the item #}
    {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
    {%- if item.current %}
        {%- set classes = classes|merge([options.currentClass]) %}
        {% set aFlag = ' class="active"' %}
    {%- elseif item.currentAncestor %}
        {%- set classes = classes|merge([options.ancestorClass]) %}
    {%- endif %}
    {%- if item.actsLikeFirst %}
        {%- set classes = classes|merge([options.firstClass]) %}
    {%- endif %}
    {%- if item.actsLikeLast %}
        {%- set classes = classes|merge([options.lastClass]) %}
    {%- endif %}
    {%- set attributes = item.attributes %}
    {%- if classes is not empty %}
        {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
    {%- endif %}
{# displaying the item #}
    <li{{ _self.attributes(attributes) }}>
        {%- if item.uri is not empty and (not item.current or options.currentAsLink) %}
        {{ block('linkElement') }}
        {%- else %}
        {{ block('spanElement') }}
        {%- endif %}
{# render the list of children#}
        {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
        {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
        {%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
        {{ block('list') }}
    </li>
{% endif %}
{% endblock %}

{% block linkElement %}<a href="{{ item.uri }}"{{ _self.attributes(item.linkAttributes) }}>{{ block('label') }}</a>{% endblock %}

{% block spanElement %}<span{{ _self.attributes(item.labelAttributes) }}>{{ block('label') }}</span>{% endblock %}

{% block label %}{% if options.allow_safe_labels and item.getExtra('safe_label', false) %}{{ item.label|raw }}{% else %}{{ item.label }}{% endif %}{% endblock %}

Answer 1

Instead of moving the “current” class, I drilled down to the desired object with this css:

ul.mainmenu>li.current > a > div {
   opacity:0.6;
}