Side Navigation mit und für contao-bootstrap Erweiterung

[sui]

Basiert auf diesem Originaltemplate: nav_default.html5

Kurzbeschreibung was die Modifizierung bewirkt:
Verändert die Navigation, die auf einer unordered list <ul> basiert, so, dass kein Dropdown-Menü für das Submenü geöffnet wird sondern eine "Collapse" die Kind-Elemente anzeigt.

(Bei Bedarf) Ausführliche Beschreibung/Sonstige Infos:
Ich wollte für eine Seite, die auf dem Bootstrap Framework (Erweiterung "contao-bootstrap") aufsetzt, nicht die Standard Navigationsleiste zur die Hauptnavigation nutzen sondern eine Seitennavigation erstellen. Das von Contao Core mitgelieferte Template "nav_default.html5" lies sich für meine Zwecke am besten verändern. Es lässt sich sogar in mehreren Ebenen nutzen - bis Ebene 3 habe ich getestet.

<?php if ($this->level != "level_1"): ?>
  <ul id="<?php foreach ($this->items as $item) { if (strstr($item['class'],'first')) { echo str_replace('/','-',$item['parentAlias']). '-collapse'; } echo '" class="collapse list-unstyled '. $this->level; if (strstr($_SERVER['REQUEST_URI'],$item['parentAlias'])) { echo ' show'; } } ?>">
<?php else: ?>
  <ul class="list-unstyled components <?= $this->level ?>">
<?php endif; ?>

<?php foreach ($this->items as $item): ?>
  <?php if (!empty($item['subitems'])): ?>
    <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="#<?= str_replace('/','-',$item['alias']) ?>-collapse" data-toggle="collapse" aria-expanded="false" <?php if ($item['class']) echo ' class="dropdown-toggle ' . $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'] ?> itemprop="url"><span itemprop="name"><?= $item['link'] ?></span></a><?= $item['subitems'] ?></li>
  <?php else: ?>
    <?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><?= $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></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endif; ?>
<?php endforeach; ?>  
</ul>

Meine PHP Kenntnisse sind rudimentär, und ich habe durch viel rumprobiererei rausbekommen, welche $item-Elemente ich wie kombiniere um den gewünschten Effekt zu erzielen. Es sollte so sein dass das Submenü auch offen bleibt, wenn man auf ein Submenü-Item klickt.

Wenn ein PHP Profi das ganze noch eleganter hinbekommt (z.B. auf eine foreach-Schleife kürzen?) - würde mich freuen.

[marcohe]

Hallo, darf ich fragen wie du das Template eingebunden hast?
Im Modul "Navigationsmenü" und dieses wiederum in Modul "Navigationsleiste (Bootstrap)"?

Frage deshalb weil mein Navigationsmenü nur bis Level 2 vernünftig arbeitet. Brauche aber inkl. Level 3...

[zonky]

Kurzbeschreibung was die Modifizierung bewirkt:
Verändert die Navigation, die auf einer unordered list <ul> basiert, so, dass kein Dropdown-Menü für das Submenü geöffnet wird sondern eine "Collapse" die Kind-Elemente anzeigt.

hast Du eine Seite als Beispiel, wo man das sehen kann?

[sui]

Guten Abend zonky,

entschuldige bitte die verspätete Antwort.

Ich kann dir leider die Seite, bei der ich die Modifikation nutze und die sich noch in Entwicklung befindet, nicht zeigen. Aber Screenshots kann ich machen.

Menü	Aufgeklappt	Aufgeklappt inkl. Ebene 3
Screenshot 2022-03-23 200741.png	Screenshot 2022-03-23 200821.png	Screenshot 2022-03-23 201002.png

Im dritten Screenshot habe ich einfach in der Seitenstruktur unterhalb der Seite "Firmen" eine weitere Seite "Test" angelegt, diese aktiv geschaltet, und schwupps ist sie im Menü zu sehen. Die CSS sind für die dritte Ebene nicht vorbereitet, daher erkennt man es nicht direkt, aber es funktioniert.

Eingebunden habe ich das so:
1) Unter "Templates" ein neues Template erstellt, als Basis das nav_default.html5 ausgewählt und den Quelltext entsprechend verändert
2) In den Modulen habe ich ein Navigationsmenü (ohne Navigationsmodul(Bootstrap)) erstellt -> siehe Screenshot Screenshot 2022-03-23 202136.png
3) Im Seitenlayout habe ich das Navigationsmenü der linken Spalte der Seite zugewiesen -> siehe Screenshot Screenshot 2022-03-23 202408.png

Ist schon länger her, aber das müsste es gewesen sein.
Hoffe, Du kriegst es hin.

Gruß - Sui

[zonky]

prima!