Horizontale Navigation mit zwei Ebenen

Druckbare Version

19.06.2009, 20:56
pmmueller

Horizontale Navigation mit zwei Ebenen
Problem

Ich probiere gerade eine horizontale Navigation mit 2 Ebenen zu generieren, die im HTML als verschachtelte Liste notiert wird. Ähnlich wie auf dieser Seite:
- http://little-boxes.de/beispielseiten/teil2/k07/fertig/
Die Menüpunkte der zweiten Ebene sollen dabei nur eingeblendet werden, wenn die erste Ebene auch wirklich Unterseiten hat.

Wenn ich im Modul "Navigationsmenü" für die horizontale Navigation Startlevel 0 und Stoplevel: 2 eintrage, wird die zweite Ebene auf allen Seiten angezeigt, auch z. B. auf der Startseite.

Habe ich da irgendwo einen Denkfehler, oder geht das wirklich nicht?

===
Workarounds

Bis jetzt sind mir zwei Workarounds eingefallen:

1.
Ein zusätzliches Navigationsmodul für die zweite horizontale Ebene mit Start- und Stoplevel auf 1. Dann hätte ich im HTML zwei untereinander stehende div.mod_navigation-Blöcke und keine verschachtelte Liste mehr, die ich semantisch sauberer finden würde.

2.
Die unerwünschte zweite Ebene auf den Seiten ohne Unterpunkte per CSS auf display: none setzen. Dann bleibt das überflüssige HTML aber im Quelltext, und das finde ich noch uneleganter als zwei div-Blöcke.

Fallen euch noch mehr Möglichkeiten ein?
19.06.2009, 21:07
MacKP

Hallo pmmueller,
du musst einfach den Stoplevel auf 1 Stellen. Dann wird das Untermenü nur angezeigt, wenn eins da ist...
Weiteres findest du hier -> http://de.contaowiki.org/DasModulNavigationsmenue

Deine Startseite sollte dann an der Stelle natürlich keine Unterpunkte haben.

Viele Grüße
19.06.2009, 21:23
pmmueller

Hi MacKP,

danke für deine flotte Antwort und den Link zum Tutorial. Das Ding ist ja große Klasse und ich werde es noch intensiv studieren, aber auf den ersten Blick kommt mein Naviwunsch nicht drin vor.

Was ich nämlich vergessen habe zu erwähnen ist, dass es noch eine dritte und vierte Ebene gibt, die links in einem vertikalen Menü dargestellt werden sollen. Das wird mit Startlevel 2 und Stoplevel 3 erzeugt und funktioniert wunderbar.

> du musst einfach den Stoplevel auf 1 Stellen.

Leider ist das nicht ganz so einfach:

Startlevel 0, Stoplevel 1, ohne Hardlimit
- zeigt horizontal auch die dritte und vierte Ebene wenn vorhanden

Startlevel 0, Stoplevel 1, mit Hardlimit
- zeigt die zweite Ebene gar nicht an

Any ideas?
19.06.2009, 21:45
MacKP

Auch dafür habe ich eine Idee:
http://de.contaowiki.org/DasModulNav...Untermen%C3%BC

Ist nicht ganz so schön gelöst, aber es geht. In deinem Fall einfach die beiden letzten Ebenen per CSS in der Hauptavigation ausblenden (wird auch für Screenreader mit der dort beschriebenen Methode ausgeblendet). Und die beiden letzten dann per Startlevel 3 einblenden.

Viele Grüße

PS: könnte ein Forums Admin diesesn Thread zu meinem Tutorial schubsen? Das wäre glaube ich passender ;-)
19.06.2009, 22:07
pmmueller

Habe jetzt erst geschnackelt, dass das Tutorial von dir ist. Tausend Dank dafür. Sehr gut erklärt, und es wird vieles klarer.

Momentan habe ich den Platz für die horizontale zweiten Ebene einer Breadcrumb-Navigation zugewiesen, sodass in der Hlist-Navi nur noch die erste Ebene auftaucht. Der Rest steht in der vertikalen Vlist-Navi.

Hat zwar mit dem Thema nichts zu tun, aber die Arbeit mit TYPOlight macht echt Spaß. Habe gerade entdeckt, dass man Inhaltselemente einfach so in komplett andere Artikel verschieben kann. Es lohnt sich also doppelt, kleine Inhaltsscheibchen zu erstellen.
19.06.2009, 22:16
MacKP

Hallo pmmueller,
dann mal noch viel Erfolg und schöne Grüße in die Niederlande (ik praat en betje nederlads.. puh.. das ist schon über 10 Jahre her in der Schule *g*).

Dir vielen Dank für das Buch! Für viele Menschen ein super Einstieg in die Materie von CSS :-)
19.06.2009, 22:21
pmmueller

Leer je Nederlands in Duisburg? Grappig ;-)

Ich habe vor, den ersten Teil von Little Boxes online zu stellen. TYPOlight als CMS und YAML als Grundlage für das CSS sind gesetzt, und ich experimentiere gerade mit Ideen für den Rohbau. Deswegen auch die Navifragen. Wenn alles glatt geht, habe ich im Juli ein bisschen Zeit dafür, und dann wird das danach irgendwann freigeschaltet.
19.06.2009, 22:27
MacKP

Fast, das war / ist in Moers, da habe ich früher gewohnt. Finde es ganz gut die Sprachen der Nachbarländer zu lernen ^^

Na, dann bin ich mal gespannt auf die neue Seite. Hoffe das wird auch hier Veröffentlicht ;-)
20.06.2009, 23:48
Ingo_G
Zitat:
Zitat von pmmueller

Problem

Ich probiere gerade eine horizontale Navigation mit 2 Ebenen zu generieren, die im HTML als verschachtelte Liste notiert wird. Ähnlich wie auf dieser Seite:

http://little-boxes.de/beispielseiten/teil2/k07/fertig/

Die Menüpunkte der zweiten Ebene sollen dabei nur eingeblendet werden, wenn die erste Ebene auch wirklich Unterseiten hat.

Wenn ich im Modul "Navigationsmenü" für die horizontale Navigation Startlevel 0 und Stoplevel: 2 eintrage, wird die zweite Ebene auf allen Seiten angezeigt, auch z. B. auf der Startseite.

Habe ich da irgendwo einen Denkfehler, oder geht das wirklich nicht?

===
Workarounds

Bis jetzt sind mir zwei Workarounds eingefallen:

1.
Ein zusätzliches Navigationsmodul für die zweite horizontale Ebene mit Start- und Stoplevel auf 1. Dann hätte ich im HTML zwei untereinander stehende div.mod_navigation-Blöcke und keine verschachtelte Liste mehr, die ich semantisch sauberer finden würde.

2.
Die unerwünschte zweite Ebene auf den Seiten ohne Unterpunkte per CSS auf display: none setzen. Dann bleibt das überflüssige HTML aber im Quelltext, und das finde ich noch uneleganter als zwei div-Blöcke.

Fallen euch noch mehr Möglichkeiten ein?
Hallo

meinst Du soetwas?

http://www.ig-transformatoren.com

Gruß
Ingo
22.06.2009, 11:35
pmmueller

Zitat:

Zitat von Ingo_G

meinst Du soetwas?
[URL="http://www.ig-transformatoren.com"]http://www.ig-transformatoren.com[/URL

Optisch ja, aber im HTML hast du keine verschachtelte Liste, sondern zwei getrennte, genau wie das Original von Dirk Jesse.

Die Lizenz zur Nutzung von YAML bezieht sich übrigens auf das CSS-Framework, nicht auf das Layout der Site.