So fügen Sie eine Klasse im li-Element (für die Seite, auf der ich mich befinde) im Menü für Drupal 8 hinzu

Ich möchte Klasse in li Element im Menü für Drupal 8 für Seite hinzufügen, wo ich bin. Zum Beispiel, wenn ich auf Seite Start bin, haben diese li aktive Klasse. Oder Wenn ich auf der Join-Seite bin, hat dieses Element für den Join eine aktive Klasse.

<ul class="">
<li class="active"><a href="#" >START</a></li>
<li class=""><a href="#" >About</a></li>
<li class=""><a href="#" >join</a></li>
</ul>

Also, wie kann man fragen, ob li aktiv ist oder nicht?

{% for item in items %}
  {% if item=SOMETHING %}
    <li class="active">
      <a  href="{{ item.url }}">{{ item.title }}</a>
    </li>
  {% else %}
    <li >
      <a  href="{{ item.url }}">{{ item.title }}</a>
    </li>
{% endfor %}

routes 8

— SakaSerbia
quelle

versuchen Sie es zuerst nur mit CSSli a:active { color:red; text-decoration:underline; }

— No Sssweat

Soryy, ich habe keine gute Frage gestellt. :( Ich möchte class = active für die Seite hinzufügen, auf der ich bin.

— SakaSerbia

Ich habe das tatsächlich, aber versuche meinen CSS-Code, um zu sehen, ob es funktioniert. (Es könnte automatisch die Seite erkennen, auf der Sie sich befinden, und das Menü lientsprechend unterstreichen. )

— No Sssweat

Ist Arbeit, aber wenn Sie auf Menüpunkt klicken und ihn prntscr.com/a4tpmy muve es scheint, dass die automatische Erkennung nicht funktioniert.

— SakaSerbia

warum sollte jemand das tun? Glauben Sie wirklich, dass Ihre Benutzer das tun werden?

— Kein Sssweat

Antworten:

Um eine aktive Klasse hinzuzufügen, <li>müssen Sie den folgenden Code in Ihre .themeDatei und einfügenmenu.html.twig

Fügen Sie dies in die .theme- Datei ein

function themename_preprocess_menu(&$variables, $hook) {
  if ($hook == 'menu__main') { // If it is not working replace "main__menu" with "menu"

    // Get the current path.
    $current_path = \Drupal::request()->getRequestUri();
    $items = $variables['items'];
    foreach ($items as $key => $item) {
      // If path is current_path, set active to li.
      if ($item['url']->toString() == $current_path) {
      // Add active link.
      $variables['items'][$key]['attributes']['class'] = 'active';
      }
    }
  }
}

In menu.html.twig ersetzen Sie Ihre <li>durch die folgende Zeile.

Ersetzen Sie diese Leitung

{{ link(item.title, item.url) }}

durch

<li {{ item.attributes }} ><a  href="{{ item.url }}"  {{ item.attributes }} > {{ item.title }}</a></li>

— Vamsi
quelle

Es ist besser, wenn Sie die Seite programmgesteuert erkennen und die Klasse unter dieser Bedingung anwenden. Sie können die folgenden Schritte ausführen.

Erkennen Sie die aktuelle Seite (CODE: Für Drupal 7).

 <php
  $path = current_path();
  $path_alias = drupal_lookup_path('alias',$path);
 ?>

Fügen Sie die if-Bedingung hinzu, die Ihrem Seitennamen mit dem der aktuellen Seite entspricht
```
if($path_alias == "current-page") { print  "active"; }
```

Dies kann Ihr Problem lösen

— Amrendra Kumar
quelle