nav_defaualt.html5 Template Anpassung wird nicht übernommen

**Jonas-** · 20.11.2015, 18:14

Ich habe eine Navigation erstellt zu der ich jedem Link eine CSS_Klasse hinzufügen möchte. Deshalb habe ich folgende Zeile im nav_defaualt.html5 Template bearbeitet:

PHP-Code:


      <li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= $item['class'] ?> animsition-link"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>

Das funktioniert soweit auch.
Füge ich eine Subnavigation hinzu (Level2) und befinde mich auf dieser Ebene, setzt er die CSS-Klasse auf einmal nur noch beim ersten und letzten Hauptnavigationspunkt ein (.first und .last). Entferne ich die Unternavigation, dann passt es wieder.

Kann man die CSS-Klasse auch noch an anderer Stelle einfügen? Es handelt sich um Page-Transitions die ich jedem Link speziell zuweisen muss.

**Spooky** · 20.11.2015, 18:19

Hört sich so an wie wenn du

PHP-Code:


<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>

einfach drin gelassen hast. Du musst die Bedingung natürlich entfernen, weil du ja dann überall eine CSS Klasse hast bzw. haben möchtest.

Zitat von Jonas-

Es handelt sich um Page-Transitions die ich jedem Link speziell zuweisen muss.

Müssen tust du das wahrscheinlich nicht, ich vermute es gibt auch andere Wege

**Jonas-** · 20.11.2015, 18:28

Danke Spooky! funktioniert!

Weißt du, wie ich speziell nur der level_2 Navigation eine CSS-Klasse hinzufügen kann?

**folkfreund** · 20.11.2015, 18:35

Musst du doch gar nicht. Du kannst doch die Klasse überall zuweisen, aber im CSS ausdrücklich in Kombination mit level_2 adressieren.
Also z.B.

PHP-Code:


li .sonderklasse.level_2 {
}

Also ohne Leerzeichen zwischen den Klassen desselben Elements.

**Jonas-** · 20.11.2015, 18:57

Ja du hast recht. Das war in meinem speziellen Fall aber nicht möglich. Danke trotzdem für den Denkanstoß!

Schönes Wochenende!

**folkfreund** · 20.11.2015, 18:59

Danke gleichfalls :-)

**Spooky** · 21.11.2015, 11:38

Zitat von Jonas-

Danke Spooky! funktioniert!

Weißt du, wie ich speziell nur der level_2 Navigation eine CSS-Klasse hinzufügen kann?

PHP-Code:


<?php if ($this->level == 'level_2' ): ?> class="myClass<?php echo $item['class'] ? : ' '.$item['class'] : '' ?>"<?php else: ?><?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>

**Jonas-** · 21.11.2015, 12:38

Cool dank!

**Spooky** · 21.11.2015, 14:55

Oder noch besser: nav_default in den Originalzustand zurücksetzen und dann nach dem foreach folgendes einfügen:

PHP-Code:


<?php if($this->level=='level_2') $item['class'].= ($item['class']?' ':'').'myClass'; ?>

**Luminanz** · 23.11.2015, 10:31

Müsste der Code nicht am Anfang (innerhalb) der foreach-Schleife stehen? Bei mir hat es nur so funktioniert!
Ist es irgenwie möglich, dass "myClass" vor den restlichen Klassen ausgegeben wird?

Gruss, Luminanz

**Spooky** · 23.11.2015, 10:37

Zitat von Luminanz

Müsste der Code nicht am Anfang (innerhalb) der foreach-Schleife stehen? Bei mir hat es nur so funktioniert!

Ja, ich meinte mit nach foreach "nach der foreach(…): Anweisung", nicht nach dem endforeach.

Zitat von Luminanz

Ist es irgenwie möglich, dass "myClass" vor den restlichen Klassen ausgegeben wird?

Warum willst du das? Die Reihenfolge der CSS Klassen spielt ja keine Rolle. Und natürlich geht das

.

PHP-Code:


<?php if($this->level=='level_2') $item['class'] = 'myClass'.($item['class']?' '.$item['class']:''); ?>

**Contao-Academy** · 23.11.2015, 10:41

Eine Alternative ohne Template-Anpassung wäre sonst noch die CSS-Klasse direkt den betreffenden Seiten zuzuweisen.

Die Klasse wird sowohl in der Navigation als auch im <body>-Tag verwendet.

**Luminanz** · 23.11.2015, 11:10

Hallo spooky

Danke für die rasche Rückmeldung.

Ja, ich meinte mit nach foreach "nach der foreach(…): Anweisung", nicht nach dem endforeach.

Tut mir leid, mein Fehler

Warum willst du das? Die Reihenfolge der CSS Klassen spielt ja keine Rolle.

Da bei der Animation noch Fehler auftraten, habe ich vermutet, dass es an der Reihenfolge der Klassen liegt. Wie du aber schon weisst spielt dies keine Rolle. Der Fehler liegt vermutlich darin, dass die Klasse nicht nur dem Link-Element, sondern auch dem Listen-Element vergeben wird.

Ich werde noch etwas weiter testen...

Gruss, Luminanz

**Spooky** · 23.11.2015, 11:13

Zitat von Luminanz

Da bei der Animation noch Fehler auftraten, habe ich vermutet, dass es an der Reihenfolge der Klassen liegt. Wie du aber schon weisst spielt dies keine Rolle. Der Fehler liegt vermutlich darin, dass die Klasse nicht nur dem Link-Element, sondern auch dem Listen-Element vergeben wird.

Ich werde noch etwas weiter testen...

Gruss, Luminanz

Ok ja, dann musst du es doch so machen wie ganz am Anfang beschrieben (also nicht einfach nur die class generell setzen). Aber wäre es nicht viel einfacher das JavaScript zu ändern? Was genau benutzt du?

**Luminanz** · 23.11.2015, 11:17

Hallo Fenepedia

Danke für deinen Beitrag

Die Klasse wird sowohl in der Navigation als auch im <body>-Tag verwendet.

Die bei der Seite definierte Klasse wird in der Navigation dem Listen-Element zugeordnet. Für die betreffende Anwendung (animsition) muss die Klasse aber dem Link-Element zugewiesen werden.

Gruss, Luminanz

**Spooky** · 23.11.2015, 11:23

Mach es doch einfach mit

PHP-Code:


$("body").animsition({

  …

  linkElement: '#mainNav ul.level_2 > li > a',

});

anstatt CSS Klassen hinzuzufügen.

**Luminanz** · 23.11.2015, 11:39

Ich ging davon aus, dass das script eine spezifische Klasse benötigt

Danke für diese elegante Lösung

Thema: nav_defaualt.html5 Template Anpassung wird nicht übernommen

Themen-Optionen

Thema durchsuchen

nav_defaualt.html5 Template Anpassung wird nicht übernommen

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher