Navigation zweizeilig machen

Hallo liebe Contao-Nutzer,

ich stehe vor der Herausforderung, für einen Kunden eine zweizeilige Navigation zu programmieren.
Ich hab euch im Anhang ein Beispiel angefügt.
Es sollen beide Zeilen klickbar sein und die oberste fett und die untere Zeile dünn dargestellt werden.

Ich kenne die Möglichkeit, dass ich HTML-Code in den Seiteltitel schreiben kann, aber ich möchte die Seite für den Kunden gut wartbar machen.
Habt ihr eine Idee wie ich dieses Problem am besten lösen könnte?

Danke für eure Hilfe.
Lg Daniel

Es gibt dafür eine recht schöne Erweiterung. Vielleicht macht die genau das was du willst. Hier zu sehen.

navigationSubline_bz

Danke für deine schnelle Antwort. Schau mir die Erweiterung gleich an.

Lg Daniel

Das sollte auch über eine einfache Template-Anpassung und etwas CSS gehen (sofern erst und zweite Zeile nicht zu unterschiedlichen Seiten verlinken sollen).
Idee: Je Menüpunkt zusätzlich ein span mit dem Seitentitel (der sonst im Title-Attribut eingetragen wird) erstellen, eigene Klasse vergeben und per CSS stylen.

Ich würde es mit CSS ::after und conten:"kleine Überschrift" lösen.

den Menüpunkt kannst du in css ja mit den title ansprechen.

a[title="Home"]::after

Hi,

ich suche ebenfalls grad eine Lösung, damit die Navigation wie hier ausschaut:

Anhang 20957

Der HTML-Code, der bei dem Seitennamen (unter Seitenstruktur) eingegeben werden soll,
lautet:

Code:

---

Cabrio-Verdecke <br><span>Cabrio Reparatur & Montage</span>

---

Wie kann man HTML im Seitennamen zulassen?

Zitat:

---

Das sollte auch über eine einfache Template-Anpassung und etwas CSS gehen (sofern erst und zweite Zeile nicht zu unterschiedlichen Seiten verlinken sollen).
Idee: Je Menüpunkt zusätzlich ein span mit dem Seitentitel (der sonst im Title-Attribut eingetragen wird) erstellen, eigene Klasse vergeben und per CSS stylen.

---

Wie passt man so ein Template an?
Gibt es dazu dann im BA bei den Seiteneinstellungen ein zusätzliches Feld für die zweite Zeile?

Zitat:

---

Zitat von Schnippel

Wie passt man so ein Template an?
Gibt es dazu dann im BA bei den Seiteneinstellungen ein zusätzliches Feld für die zweite Zeile?

---

Du gehst im Backend unter Layout auf Templates. Dann oben auf "Neues Template". Aus dem Dropdown wählst du "nav_default.html5" aus. Dieses Template ist für die Darstellung eines Menü-Levels zuständig.
Dann wählst du in der Liste der Templates das "nav_default.html5" aus und bearbeitest den Inhalt. Du kannst die Datei auch direkt im Filesystem bearbeiten.
Hier ein Beispiel für dein Vorhaben:

Code:

---

<ul class="<?= $this->level ?>"> <?php foreach ($this->items as $item): ?>
  <?php if ($item['isActive']): ?>
    <li class="<?= $item['class'] ?>"><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>
        itemprop="name"><?= $item['link'] ?></strong><br><span class="nav2"><?= $item['pageTitle'] ?: $item['title'] ?></span><?= $item['subitems'] ?></li>
  <?php else: ?>
    <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>>
      <a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>
        <?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"'; ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?>
        <?php if ($item['nofollow']) echo ' rel="nofollow"'; ?><?= $item['target'] ?><?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="url">
          <span itemprop="name"><?= $item['link'] ?></span><br><span class="nav2"><?= $item['pageTitle'] ?: $item['title'] ?></span>
      </a><?= $item['subitems'] ?></li>
    <?php endif; ?>
<?php endforeach; ?></ul>

---

Die fetten Teile habe ich ergänzt.

Den Text der zweiten Zeile gibst du bei der Seitendefinition als 'Seitentitel' ein. Ein zusätzliches Feld gibt es nicht - aber so sollte es gut funktionieren :-)

Schließlich musst du noch per CSS die zweite Zeile formatieren, z.B.

Code:

---

nav .nav2 {
  font-size: 0.8em;
  font-weight: normal;
}

---

Viel Erfolg!

Ginge in Contao 4 auch diese Variante, die es bei einer alten (Contao 2) mal gab?

Hier die damalige Anweisung:


Hierzu muss das DCA überschrieben werden.
Wir öffnen deshalb die system/config/dcaconf.php.
Anschließend fügen wir folgende Zeile ans Ende ein:
1.

PHP-Code:

---

$GLOBALS[‘TL_DCA’][‘tl_page’][‘fields’][‘title’][‘eval’][‘preserveTags’] = true; 


---

Nur noch abspeichern und dann kann als Seitentitel zB folgendes eingetragen werden
1. Seitentitel<span>Beschreibung</span>
Den Rest kann dann mittels CSS angepasst werden.

Wäre sowas heute in Contao 4 auch möglich?
Ich finde nur im Ordner system/config keine dcaconf.php mehr

Witzig, dass du DCA erwägst und Tempaltebearbeitung nicht kennst :).

Ob das bei C4 noch funktionieren würde, kann ich dir nicht sagen. In jedem Fall würdest du damit die Verantwortung für syntaktisch validen Code dem Redakteur überlassen.
Wenn schon DCA, dann würde ich ein ganz neues Feld hinzufügen und das über eine Templateanpassung ähnlich oben einbauen.

Edit:
Zum Thema DCA in Contao 4 siehe hier: https://community.contao.org/de/show...l=1#post457952