Navigation Template li.submenu weitere CSS-Klasse hinzfügen

[Schnippel]

Wie lässt sich im Template mod_navigation bei einem Listenpunkt mit Unterpunkten, also li.submenu,( das ja eine weitere ul enthält), eine zusätzliche Klasse .toggle hinzufügen?

Also li.submenu .toggle, wenn Untermenüs (ul.level_2, ul_level_3 etc.) vorhanden sind?

[mlweb]

Du kannst Dir das im Template nav_default doch anschauen. Ist ja quasi schon vorbereitet
Den Konstrukt

<?php if (!empty($item['subitems'])) echo ... ?>

dort einsetzen, wo Du etwas für Navigationspunkte mit Untermenüs anders ausgegeben haben möchtest.

[Schnippel]

Danke, wie müsste ich das Template genau abändern?

Hier der bisherige Code von dem Template vor der Änderung:

<!-- indexer::stop -->
<nav class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
    



    

  <?php if ($this->headline): ?>
    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
  <?php endif; ?>

  <a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible"><?= $this->skipNavigation ?></a>

  <?= $this->items ?>

  <a id="<?= $this->skipId ?>" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->

Wo genau müsste da die Anweisung eingebunden werden, damit die Listenpunkte mit Untermenüs die Klasse .toggle bekommen?

<?php if (!empty($item['subitems'])) echo ... ?>

Hintergrund der ganzen Sache ist, daß die Navigationspunkte, die Untermenüs / Unterpunkte enthalten, diese Unterpunkte per Klick/Touch ausklappen / ausfahren bzw. bei erneutem Klick/Touch wieder einfahren. Eine Art Schalter.

Ein Beispiel dazu ist hier zu sehen, wenn man auf die Referenzen klickt:
Demo-Beispiel

[dazzle89]

Ist das überhaupt das richtige Template? Ich sehe dort keine Ausgabe von Listenpunkten, also <li>

Und kannst du es nicht anders lösen, ohne die .toggle Klasse? Indem du im Javascript-Aufruf statt .toggle den Selektor ul.level_2 usw. angibst

[mlweb]

Ist das überhaupt das richtige Template? Ich sehe dort keine Ausgabe von Listenpunkten, also <li>

Das ist natürlich nicht das richtige Template. Wie oben geschrieben wird das im Template nav_default.html5 und nicht wie vom TO oben gepostetet in mod_navigation.html5 festgelegt.

Wo genau müsste da die Anweisung eingebunden werden, damit die Listenpunkte mit Untermenüs die Klasse .toggle bekommen?

Bei den Listenelementen in der Klasse und zwar für den aktiven als auch im inaktiven Zustand.

[Schnippel]

Und kannst du es nicht anders lösen, ohne die .toggle Klasse? Indem du im Javascript-Aufruf statt .toggle den Selektor ul.level_2 usw. angibst

Das probiere ich auch grad aus.

Basierend auf folgendem Tutorial: https://blog.kulturbanause.de/2016/0...on-mit-jquery/

Die Demo-Seite des Tutorial ist HIER

Basierend auf dem Jquery-Code von dem Tutorial habe ich das vesucht auf das Contao-Navigations-Template mod_navigation anzupassen.
Ich habe da folgenden Code, der aber nicht funtkioniert:

$('nav.mod_navigation > ul > li.submenu').click(function(e) {
 e.stopPropagation();
 $(this).toggleClass('sub-menu-open');
 var $el = $('ul',this);
  $('.mod_navigation > ul > li >.level_2').not($el).slideUp();
  $('.mod_navigation > ul > li >.level_2').not($el).parent().parent('li').removeClass('sub-menu-open');
 $el.stop(true, true).slideToggle(400);
});

Dieser Code liegt in der Datei files/js/touch.js
welche ich dann in den Layout-Einstellungen unter dem Punkt "zusätzliche Head-Tags"
wie folgt eingebunden habe:

<script src=”/files/js/touch.js"></script>

Ich vermute mal, daß an dem von mir veränderten JS-Code etwas noch nicht stimmig ist.
Wo könnte der Fehler liegen?

[dazzle89]

Für mich sieht der JS-Code richtig aus, kann man aber erst genau sagen, wenn man z.B. einen Link zu deiner Seite hätte.

Ist die Datei auch definitiv richtig eingebunden? Vielleicht ist ja der Pfad falsch. Das würde ich erstmal prüfen. UND ob jQuery eingebunden ist.

Ansonsten das Template bearbeiten, wie von mlweb beschrieben.

[Schnippel]

Betrifft Änderung im nav_default.html5:

Bei den Listenelementen in der Klasse und zwar für den aktiven als auch im inaktiven Zustand

Wäre die Einbindung so richtig?

<ul class="<?= $this->level ?>">
  <?php foreach ($this->items as $item): ?>
  
   <?php if (!empty($item['subitems'])) echo 'class="toggle"' ?> 
   
    <?php if ($item['isActive']): ?>
    
      <li class="<?= $item['class'] ?>"><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>
      
      <?php if (!empty($item['subitems'])) echo 'class="toggle"' ?> 
      
       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 endforeach; ?>
</ul>

[dazzle89]

So ist es falsch. Du möchtest die Klasse doch dem <ul> zuordnen? Und das <ul> wird in der ersten Zeile geschlossen. Es gehört also in die erste Zeile, etwa so:

<ul class="<?= $this->level ?><?php if (!empty($item['subitems'])) echo " toggle"; ?> ">

[fiedsch]

Das wird aber auch nicht funktionieren, da der $item erst eine Code-Zeile später in

<?php foreach ($this->items as $item): ?>

festgelegt wird.

Edit: Tippfehhler korrigiert

[Schnippel]

Und wie genau (in welcher Zeile, an welcher Stelle) muß das eingebunden hier in dem Code (nav_default.html5)?

<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><?= $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 endforeach; ?>
</ul>

[mlweb]

Ich verwende so etwas ähnliches mit einem zusätzlichen Element und eigenem js innerhalb von li

...
<li class="<?= $item['class'] ?>"><strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name"><?= $item['link'] ?><?php if (!empty($item['subitems'])) echo '<button class="dropdown_toggle" aria-expanded="false"><span class="invisible">Untermenü öffnen</span></button>'; ?></strong><?= $item['subitems'] ?></li>

...

Die Anregung zu dieser Lösung stammt übrigens von Peter Müller.

[Schnippel]

Die Anregung zu dieser Lösung stammt übrigens von Peter Müller.

Handelt es sich dabei um das Tutorial bei Video2Brain:
CSS: Responsive Flexbox-Layouts für Profis > Die etwas andere Dropdown-Navigation ?

Also müsste ich das Contao-Template nav_default.html5 mit dem hier ROT markierten so wie zu sehen ergänzen,
damit das Beispiel von dem Tutorial in Contao funktioniert?

<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'] ?>
<?php if (!empty($item['subitems'])) echo '<button class="dropdown_toggle" aria-expanded="false"><span class="invisible">Untermenü öffnen</span></button>'; ?></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 endforeach; ?>
</ul>

[mlweb]

Handelt es sich dabei um das Tutorial bei Video2Brain:
CSS: Responsive Flexbox-Layouts für Profis > Die etwas andere Dropdown-Navigation ?

Ich meine ja.

Also müsste ich das Contao-Template nav_default.html5 mit dem hier ROT markierten so wie zu sehen ergänzen,
damit das Beispiel von dem Tutorial in Contao funktioniert?
[/CODE]

Im Prinzip ja, aber soweit ich mich erinnere habe ich das Beispiel etwas angepasst (css und js). Definitiv sind da ein paar Klassen anders als bei Peter Müller und ich habe auch das javascript an die Gegebenheiten des Projektes angepasst. Bei dem Projekt gab es noch ein paar Besonderheiten/Sonderwünsche zu erfüllen. Link kann ich aber nicht posten - Auftragsarbeit für eine Agentur.

[Andreas]

Habe ich das jetzt richtig verstanden, du möchtest dort, wo die Klasse submenu ausgegeben wird zusätzlich toggle haben?

Das ginge im nav_default so

...
<?php foreach ($this->items as $item): 
  $item['class'] = str_replace('submenu', 'submenu toggle', $item['class'] ); // nur diese Zeile ist neu
?>
...

[Schnippel]

Habe ich das jetzt richtig verstanden, du möchtest dort, wo die Klasse submenu ausgegeben wird zusätzlich toggle haben?

Danke, die Lösung funktioniert.
Damit wäre der erste Schritt getan, indem alle li mit .submenu jetzt die Klasse .toggle dazu bekommen.

Jetzt sollen diese li, wenn auf sie geklickt wird, die Klasse .toggle-on dazu bekommen.
Gleichzeitig sollen die Untermenüs bei Klick aufklappen, und die ul.level_2 die Klasse .toggled-on erhalten.

Bei wiederholten Klick auf die li soll sich das Untermenü wieder schließen und die eben vergebenen Klassen .toggle-on / .toggled-on wieder verschwinden.

Dazu hier ein Code, der aber irgendwie bei mir nicht funktioniert:

( function( $ ) {
	// Drastically modified from the function in the WordPress Twenty Fifteen theme
	// Original source: https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/js/functions.js

	$( '.toggle' ).click( function( e ) {
		var _this = $( this );
		e.preventDefault();
		_this.toggleClass( 'toggle-on' );
		_this.parent().next( 'ul.level_2' ).toggleClass( 'toggled-on' );
		_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
		_this.html( _this.html() === '<span class="screen-reader-text">Untermenü öffnen</span>' ? '<span class="screen-reader-text">Untermenü schließen</span>' : '<span class="screen-reader-text">Untermenü öffnen</span>' );
	} );

})( jQuery );

Dieser Code liegt in der Datei files/js/nav_toggle.js
welche ich dann in den Layout-Einstellungen unter dem Punkt "zusätzliche Head-Tags"
wie folgt eingebunden habe:

<script src=”/files/js/nav_toggle.js"></script>

Woran kann das liegen, daß dies mit den hinzufügen der Klassen .toggle-on und .toggled-on nicht funktioniert?
Das Ganze soll dann auch für die 3. Ebene mit ul.level_3 ebenfalls möglich sein.
Wie liese sich sowas umsetzen?

[Andreas]

Wenn du selber programmierst, dann brauchst du auch, wie @dazzle89 oben bereits erwähnte, die Klasse toggle nicht.

Ist zwar schön, dass du selber was programmieren möchtest, aber ich empfehle dir die Erweiterung [mobile_menu] zu benutzen. Andernfalls würde das hier in nem JS/jQuery Tutorial ausarten. Der Entwickler Kamil hat ja mehr oder weniger den gleichen Ansatz gehabt und das bereits programmiert ¹. Und sowas kann lange dauern und wird auch immer wieder auf Bugs gecheckt. Wieso also das Gleiche nochmal machen, außer zum Lernen?

Wenn du es lernen möchtest, dann schau dir jQuery an und spiele damit herum. Elemente finden, Gruppen von Elementen, get und set von Attributen, CSS ..., Eventlistener aufsetzen ... Du kannst direkt im FF mit den Devtools im Tab JS-Umgebung damit rumspielen. console.clear(); leert die Konsole und mit console.log(myVar); können Objekte in der Konsole gedebuggt werden.

¹ Bei mobile_menu kann man den obersten Punkt sogar als Seite benutzen - erster Klick öffnet das Dropdown, zweiter Klick geht zur Seite.

[fiedsch]

Woran kann das liegen, daß dies mit den hinzufügen der Klassen .toggle-on und .toggled-on nicht funktioniert?

Z.B. weil

• Dein JS einen Fehler hätte
• Dein JS niicht gefunden wird
• Dein JS nicht zu der HTML-Struktur passt, die Dir Contao erzeugt

Wie findest Du das heraus? Verwende die Entwickler-Werkzeuge Deines Browsers und schau nach!