Eigenes Navigations Modul ansprechen

**Dora** · 09.07.2010, 10:08

Hallo,

ich habe oben und links eine Navigationsleiste. Oben wollte ich aber einen anderen Text anzeigen als rechts. Also habe ich mir eine eigene Navigation als Modul angelegt.

Ich kann auch mit den Stylesheets darauf zugreifen. Ich habe aber ein Problem, dass den Selektor "li .active" anscheint nicht erkennen kann.

Also wenn ich auf eine Unterseite klicke dann ist in der rechten Navigation die entsprechende Seite ausgewählt aber nicht bei der Navigation oben.

Vielleicht kann mir jemand helfen wie ich das Problem lösen kann.

**do_while** · 09.07.2010, 11:46

Du hast hier in dem Selektor ein Blank zwischen li und .active. Das muss raus, da die Klasse .active direkt auf li wirkt und nicht auf ein folgendes Objekt.

Also versuche es mal mit "li.active"

**Dora** · 12.07.2010, 06:51

Hat leider nicht funktioniert.
Das Modul hat die Klasse "nav".

Mit ".nav a:hover" kann ich das Modul auch ansprechen. Aber ".nav li.active" oder ".nav li .active" funktioniert nicht.

Muss ich irgendetwas besonderes beim erstellen des Moduls beachten?

**do_while** · 12.07.2010, 07:22

Hallo Dora,

ein Link zu der Seite wäre schön, dann können wir besser beurteilen, was Du da machen kannst.

Ich gebe meist meinen Selektoren testweise die Hintergrundfarbe rot, dann kann man schnell sehen, ob der Selektor überhaupt greift. Zusammen mit der Firebug-Erweiterung für Firefox hat man den richten Selektor-String dann schnell zusammen.

**Dora** · 12.07.2010, 07:56

Das ist nur lokal installiert. Dann können Sie mit dem link doch nichts anfangen oder?

**do_while** · 12.07.2010, 08:10

Kannst Du dann vielleicht dieses Stück Quellcode hier posten?
(den generierten Quellcode der Navigation)

**Dora** · 12.07.2010, 08:37

HTML-Code:

<div class="nav block">

<ul class="level_1">
<li class="active first"><span class="active first">Startseite</span></li>
<li><a href="index.php/otto-absetzcontainer-oben-offen.html" title="OTTO - Absetzcontainer oben offen">OTTO</a></li>
<li><a href="index.php/dora-absetzcontainer-mit-deckel.html" title="DORA - Absetzcontainer mit Deckel">DORA</a></li>
<li><a href="index.php/konrad-absetzcontainer-mit-klappe.html" title="KONRAD - Absetzcontainer mit Klappe">KONRAD</a></li>
<li><a href="index.php/heinrich-hamburger-baureihe.html" title="HEINRICH - Absetzcontainer "Hamburger" Baureihe">HEINRICH</a></li>
<li><a href="index.php/mini-absetzcontainer.html" title="MINI-Absetzcontainer">MINI</a></li>

<li><a href="index.php/anton-abrollcontainer.html" title="ANTON Abrollcontainer">ANTON</a></li>
<li><a href="index.php/ersatzteile-fuer-container.html" title="Ersatzteile">Ersatzteile</a></li>

<li class="last"><a href="index.php/planen-und-netze.html" title="Planen und Netze" class="last">Planen und Netze</a></li>
</ul>
 

</div>

**do_while** · 12.07.2010, 09:54

Hallo Dora,

das ist eigentlich recht einfach:
Für alle Menüeinträge gilt:

Code:

.nav ul.level_1 li
{
	margin-bottom:2px;
	background-color:#fccccc;
}

Ich habe einfach mal alle Listeneinträge leicht rot unterlegt, zur optischen Trennung noch einen 2px-Abstand dazwischen.

Für den aktiven Eintrag:

Code:

.nav ul.level_1 li.active
{
	background-color:#b8e0fc;
}

Der aktive Eintrag bekommt die Hintergrundfarbe blau.

Das Ergebnis sieht dann so aus:
nav1.jpg

**Dora** · 12.07.2010, 11:16

ich habe das versucht. Das macht aber kein Unterschied. Anbei ein Screenshot.
Immer ist die "Startseite" als aktiv markiert.

**do_while** · 12.07.2010, 12:30

Ist denn der Quellcode immer unterschiedlich und markiert wirklich den aktiven Eintrag?
Oder hat die Startseite in der Navigation immer das "active"?

**Dora** · 12.07.2010, 12:56

Wie du in dem Screenshot links in der Navigation sehen kannst habe ich auf eine andere Seite gewechselt. Die Linke Navigation ist richtig. Aber die obere Navigation bleibt auf "Startseite" = active.

Die Linke Navigation ist ein Navigations-Modul von Contao. Die obere Navigation ist die Navigation die ich mit einem Modul selber zusammen gebaut habe.

Ich kann auch oben auf die Navigation klicken um auf eine andere Seite zu wechseln. Das funktioniert ohne Probleme. Dort müssten also eindeutig die richten Seiten hinterlegt sein. Aber auch wenn ich oben die Navigation verwende um die Seite zu wechseln ist immer noch die Startseit active.

Kann das sein, dass ich in dem Modul den link nach einer bestimmten Vorgabe schreiben muss? Ich habe mit {{link_url::...}} gearbeitet.

So sieht mein Modul im Backend aus:

Code:

<div class="nav block">

<ul class="level_1">
<li class="active first"><span class="active first">Startseite</span></li>
<li><a href="{{link_url::5}}" title="OTTO - Absetzcontainer oben offen">OTTO</a></li>
<li><a href="{{link_url::6}}" title="DORA - Absetzcontainer mit Deckel">DORA</a></li>
<li><a href="{{link_url::7}}" title="KONRAD - Absetzcontainer mit Klappe">KONRAD</a></li>
<li><a href="{{link_url::8}}" title="HEINRICH - Absetzcontainer "Hamburger" Baureihe">HEINRICH</a></li>
<li><a href="{{link_url::9}}" title="MINI-Absetzcontainer">MINI</a></li>
<li><a href="{{link_url::10}}">ANTON</a></li>
<li><a href="{{link_url::11}}" title="Ersatzteile">Ersatzteile</a></li>
<li class="last"><a href="index.php/planen-und-netze.html" title="Planen und Netze" class="last">Planen und Netze</a></li>
</ul>
 

</div>

**do_while** · 12.07.2010, 13:07

Hallo Dora,

dann scheint Dein Modul immer die Startseite als aktiv zu markieren. Das "active" muss schließlich das Modul an der richtigen Stelle einbauen, sonst geht es nicht.

ABER:
Warum nimmst Du dazu nicht ein Standard-Modul "Navigation" oder "individuelle Navigation". Da die Buttontexte nicht die Gleichen sind, wie im linken Menü, müßtest Du Dir mit Weiterleitungen in der Seitenstruktur ein Menü zusammenbauen. Dieses Menü könntest Du mit der Individuellen Navigation anzeigen und diese Menüpunkte bei der Navigation links ausblenden. Das sollte ohne Probleme mit den Core-Funktionen von Contao funktionieren.

**Dora** · 12.07.2010, 14:13

Ich habe das jetzt so gemacht wie du mir das gesagt hast. Also mit Weiterleitung und individueller Navigation. Aber da passiert genau das Gleiche!!

Kann das sein, dass "active" nur auf einer Navigation gleichzeitig angewendet wird?

**do_while** · 12.07.2010, 14:40

Nein, das ist mit Sicherheit nicht nur 1x pro Seite nutzbar.
Wo oder Wie hast Du denn die Navigation eingebunden? sie sollte ja wohl im Seitenlayout als Modul eingebunden sein.

Warum das nicht funktioniert, weis ich jetzt auch nicht. Ich habe diese Aufteilung von Navigationen schon oft genutzt - und es ging immer.

**Dora** · 12.07.2010, 15:14

Anbei ein Screenshot vom Firebug. Könnte das Problem bei "active first" liegen?

Wie kommt kommt das "active" denn dorthin?

**blueamerican** · 12.07.2010, 15:42

? du schreibst das active doch hart in den code rein! versteh ich nicht...

im normalfall sorgt active dafür dass der aktuelle navigationspunkt ein highlight bekommt.

dafür muss aber dein modul dieses active dynamisch setzen...

**Dora** · 12.07.2010, 15:53

was meinst du?

**blueamerican** · 12.07.2010, 15:55

ich glaub dein problem ist dass dieses active nicht dynamisch ist

**psren** · 12.07.2010, 16:10

Das active darf nicht hardcoded sein, sondern muss dynamisch nur dem Menupunkt zugewiesen werden, der auch wirklich aktiv ist.

Schau dir mal den Code von der nav_default.tpl an:

PHP-Code:


<ul class="<?php echo $this->level; ?>">

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

<?php if ($item['isActive']): ?>

<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>

<?php else: ?>

<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

<?php endif; ?>

<?php endforeach; ?>

</ul>

Da wird für jedes Element der Navigation das selbe ausgeführt als Schleife, aber zusätzlich ist noch ne if-Anweisung drin

PHP-Code:


<?php if ($item['isActive']): ?>

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

die dem momentan aktiven Element die Klasse active zuweist. (zusätlich zu den anderen Klassen wie first oder selbst definierten.

**do_while** · 12.07.2010, 16:13

Also - wenn dieser Teil Quellcode von der individuellen Navigation aufgebaut ist, stehst Du gerade auf dem ersten Menüeintrag. Das Modul "Individuelle Navigation" baut automatisch die Klasse "active" in den Menüeintrag ein, der gerade als Seite aktiv angezeigt wird. Gehst Du auf eine andere Seite, wird die Navigation genauso aussehen, mit dem Unterschied, dass ein anderes li die Klasse "active" zugewiesen hat.
Die Klassen "first" und "last" markieren den ersten und den letzten Menüeintrag, da man hier manchmal, je nach Layoutwünschen, ein leicht verändertes Style haben will, das sollte Dich aber im Moment nicht von dem active-Problem ablenken.

Wenn das mit dem active nicht so ist, funktioniert Dein Modul nicht richtig.

@psren: Wenn man das Core-Modul ohne weitere Template-Veränderungen nutzt, muss es aber klappen. Template-Anpassungen sind ja nur notwendig, wenn die angebotene Vielfalt an Formatier- und Ausgabemöglichkeiten noch nicht ausreichen.

**Dora** · 12.07.2010, 19:34

vielleicht kann mir jemand das mit dem hart und dynamisch mal auf dumm-deutsch-für-anfänger erklären. (Falls das des Rätsels Lösung ist).

Ich zeig euch mal den css und den html-code. Vielleicht könnt ihr den Fehler entdecken.

Code:

<div class="mod_customnav block">
 
<a href="index.php/otto-absetzcontainer-oben-offen.html#skipNavigation26" class="invisible">Navigation überspringen</a>
 
<ul class="level_1">
<li class="first"><a href="index.php/startseite.html" title="Startseite" class="first">Startseite</a></li>
<li><a href="index.php/otto-absetzcontainer-oben-offen.html" title="OTTO">OTTO</a></li>
<li><a href="index.php/dora-absetzcontainer-mit-deckel.html" title="DORA">DORA</a></li>
<li class="last"><a href="index.php/konrad.html" title="KONRAD" class="last">KONRAD</a></li>
</ul>
 
<a name="skipNavigation26" id="skipNavigation26" class="invisible">&nbsp;</a>
 
</div>

Vielen Dank im Voraus für eure Hilfe!!

**do_while** · 12.07.2010, 20:00

Hallo Dora,

ich habe mal genau Deine Beispiele nachgebaut, ich habe nur die Hintergrundbilder weggelassen.

Auf meiner Bastelseite ganz oben findest Du genau Dein Beispielcode:
http://test.homepageumbau.de

Bei mir funktioniert es.

**Dora** · 12.07.2010, 20:24

Ja das zeigt, dass das funktionieren sollte. Bei mir funktioniert es aber trotzdem nicht.
Was soll ich denn jetzt machen? Die Seitenstruktur, Navigationsmodule und CSS-Angaben neu machen?

Welche Möglichkeiten gibt es denn sonst noch?

**do_while** · 12.07.2010, 22:32

Hallo Dora,

jetzt noch einmal ganz langsam:
Das CSS ist auch eingebunden (mal bitte im Quellcode schauen)?

Dann kann es ja nur am Navi-Modul liegen, das habe ich gemacht:
1) Unter Themes | Module habe ich ein neues Modul erstellt
2) Als Modultyp habe ich "Individuelle Navigation" ausgewählt
3) Als Seiten habe ich die gewünschten (in meinem Fall 3) Seiten angehakt
4) Als Navigationstemplate habe ich das "nav_default" belassen
5) Dann Speichern und schließen
-- Das Modul ist erstellt --
6) unter Themes | Seitenlayouts wähle ich das Seitenlayout aus, was für die Seiten verwendet wird
7) Dort muss auch unter Stylesheets mein CSS angehakt sein
8) Bei "Eingebundene Module" setze ich mein Navimodul in die Kopfzeile
9) Als Seitentemplate verwendet ich den Standard, das fe_page
10) Speichern und Schließen

Jetzt sollte die Navigation im Kopfbereich meiner Seite erscheinen und funktionieren.
Wo läuft es bei Deiner Installation anders?

**Dora** · 13.07.2010, 07:07

Hallo Hagen,

ich habe das auch so gemacht wie du das beschrieben hast.
Das CSS muss auch eingebunden sein, weil wenn ich auf der Startseite bin funktioniert das ja auch.

Es funktioniert nur nicht wenn ich auf eine andere Seite wechsel. Aber die a:hover Funktion funktioniert auf allen Seiten.

Es muss also irgendwie so sein, dass die obere Navigation nicht erkennen kann, wann andere Seiten (außer Startseite) aktiv sind.

Bei der CSS deklaration kann es nicht liegen weil es ja mit der Startseite funktioniert.
Den Html-Code hast du ja überprüft also kanns das auch nicht sein.

Ich habe auch mal ein paar von den Seiten gelöscht und neu angelegt. Bringt auch nichts.
Ich habe die Weiterleitungsseite als "interne Weiterleitung" angelegt. Das stimmt doch so oder?

Das einzige wo meiner Meinung nach der Fehler sein kann ist bei Seitenname/Seitenalias.

Bei der Startseite habe ich keine Weiterleitung gemacht weil die Seite oben und links gleich heißt. Und dort funktioniert es.

Wie hast du Seitenname und Seitenalias angelegt?

**do_while** · 13.07.2010, 12:07

Hallo Dora,

den Seitennamen vergibst Du so, wie er im Menü erscheinen soll, der Alias sollte komplett egal sein, den lasse ich immer leer = automatisch erstellt.

Bei mir sind die Seiten 1 bis 3 echte Seiten. Ich habe mal noch eine interne Weiterleitung zu meinem Menü hinzu gebaut. Jetzt sieht man aber vielleicht etwas, was bei Dir passiert:
Ich klicke die Weiterleitung an, es ist dann natürlich die Originalseite markiert und nicht die Weiterleitung. Das könnte bedeuten, dass es Dir so nichts nützt. Aber soweit muss es ja erstmal bei Dir auch funktionieren.
Ich habe langsam keine weiteren Ideen, woran es liegen könnte.

**Dora** · 13.07.2010, 12:14

Genau das ist das Problem!! Genau so wie das jetzt bei dir ist, ist das bei mir auch.

Ich möchte ja oben in der Navigation einen anderen Text haben als in der linken Navigation. Also habe ich oben natürlich nur die internen Weiterleitungen und links die eigentlichen Seiten.

Fällt dir vielleicht eine andere Lösung ein wie ich das Regeln könnte?
Ich möchte in der linken Navigation einen längeren Text anzeigen als oben.

**do_while** · 13.07.2010, 19:08

Dann musst Du wohl doch die Original-Seiten in die Navigation nehmen. Ich kann mir vorstellen, dass man mit etwas PHP ein Template dafür bauen kann, wo aus dem Seitennamen immer nur das erste Wort als li-Text genommen wird.

Das Template muss mit nav_ beginnen und im Verzeichnis /templates liegen, dann kannst Du es bei der individuellen Navigation auswählen und es würde dann die Listenpunkte entsprechend befüllen.

Weitere Idee: man könnte versuchen die Texte über InsertTags zu generieren, evtl. mit dem Modul InsertTags.