Lektion 9 - Verschachtelte Navigationslisten

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 9 - Verschachtelte Navigationslisten

Beitrag von Admin » Di 19. Aug 2014, 11:28

Häufig kommt es vor, dass man mehrere Links zu einem Thema anbieten möchte. z.B.

Galerie
  • Urlaubsfotos Sri Lanka
  • Urlaubsfotos Mallorca
  • Urlaubsfotos Korsika
  • Urlaubsfotos Balkonien
Das kann man über eine weitere Navigation lösen, indem du z.B. deine Haupt-Navigation horizontal unter dem Header anlegst und dann für jeden Unterpunkt eine weitere Navigation link vertikal.

Oder du versuchst es einmal mit einer verschachtelten Navigation:
  • Start
  • Hobby
  • Galerie
    • Sri Lanka
    • Mallorca
    • Korsika
  • Balkonien
  • Kontakt
  • Gästebuch
  • Impressum
Vertikale Verschachtelung erstellen

Wie funktioniert das? Zuerst erstellst du wie gewohnt deine unsortierte Linkliste:
  • Start
  • Hobby
  • Galerie
  • Kontakt
  • Gästebuch
  • Impressum
Danach klickst du hinter das Wort Galerie und machst eine weiche Zeilenschaltung (Shift+Enter), sodass du im Listenpunkt der Galerie bleibst. Nun schreibst du die Untergalerien jeweils mit weicher Zeilenschaltung untereinander.
  • Start
  • Hobby
  • Galerie
    Sri Lanka
    Mallorca
    Korsika
    Balkonien
  • Kontakt
  • Gästebuch
  • Impressum
[col]Markiere die "Unter-Galerien" und definiere sie als Liste:
  • Start
  • Hobby
  • Galerie
    • Sri Lanka
    • Mallorca
    • Korsika
    • Balkonien
  • Kontakt
  • Gästebuch
  • Impressum
So hast du eine Liste innerhalb eines Listenpunktes erstellt. Prüfe, ob die neue Liste wirklich im Listenpunkt ist, indem du unter Ansicht - Bereichskonturen aktivierst. Jedes Element wird nun mit einem Rahmen markiert:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Nun hast du eine Liste innerhalb einer Liste erstellt und kannst sie entsprechend formatieren:

Lege wie gewohnt deine IDs an:

#navi, #navi ul, #navi li, #navi a, #navi a:hover

#navi
Breite einstellen.

#navi ul
Listenpunkte entfernen und Abstände enfernen, feste linke Abstände einrichten.

#navi li
Breite der Listenpunkte

#navi a
Als Blockelement definieren, Textformatierung

#navi a:hover
Textformatierung

[anmerk]Bild|Achtung!
Alle Formatierungen der übergeordneten Liste wirken sich auch auf die verschachtelte Liste aus. Beispie:
Formatierst du deinen Text in #nav a fett, formatiert sich automatisch auch der Text in #navi ul ul a fett.

Möchtest du dieses Verhalten verhindern, musst du den Schriftschnitt in der #navi ul ul a auf normal zurück setzen.[/anmerk]

Du wirst feststellen, dass sich alle Formatierungen aus der ul auch auf die verschachtelte ul übertragen. Das Gleiche gilt für die Breitenangaben der li. Um dies zu ändern, fügst du für die Liste in der Liste legst du neue Styleregeln an:

#navi ul ul = Liste innerhalb der Liste
Setze einen kontrollierten Abstand links.

#navi ul ul a = Link innerhalb der Liste in der Liste
Formatiere den Text anders als den aus der übergeordneten Liste.

#navi ul ul a:hover = der Hover-Effekt in der Liste der Liste
Formatiere den Text für den Hover-Effekt.

Die Listenpunktbreite:

[col]Die gesamte Navigation übernimmt die Breite des #navi, da es sich bei den Elementen <ul> und <li> um Blockelemente handelt.

Vergibst du feste Breiten für deinen Listenpunkt, musst du dabei die Abstände berücksichtigen. Die Gesamtbreite der <li> besteht aus:

Gewünschte Gesamtbreite - (Rahmen links + Rahmen rechts + Abstände links + Abstände rechts)

Listen innerhalb der Listen rückst du normalerweise über einen kontrollierten Abstand im #navi ul ul ein. Vergibst du eine feste Breite für deine Listenpunkte in der übergeordneten Liste, werden auch die Listenpunkte innerhalb deiner Liste mit dieser Breite formatiert.

Die Listenpunkte der verschachtelten Liste ragen am rechten Rand über deine übergeordnete Liste hervor:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Um dies zu verhindern, musst du für die verschachtelte Liste eine eigene Breite definieren, in der du den Abstand von der Breite in der übergeordneten Liste abziehst:

Breite #navi li - Abstand #navi ul ul = Breite #navi ul ul li|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Lösung

Horizontal verschachtelte Listen

[col]Die Verschachtelung einer horizontalen Liste funktioniert im Prinzip genauso wie die vertikale Liste.

Das Problem liegt hier darin, dass du in der horizontalen Liste der #navi li einen Puffer links gibst, sodass sich die Listenpunkte nebeneinandner ausrichten. Diese Eigenschaft überträgt sich natürlich auch auf deine Unterliste.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Aber auch hierfür gibt es einen Trick:

In der #navi ul ul li legst du als Puffer: keiner fest. Damit bleibt die Liste in der Liste vertikal formatiert.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Hier mein Beispiel: Lösung
[img]http://www.kreativ-workshops.net/kurse/images/smilies/icon_idea.gif[/img]Beim Einbauen der Navigation musst du die ul absolut positionieren. Das übergeordnete Element musst du relativ positionieren, sodass sich das Klappmenü an das übergeordnete Element ausrichtet. Auf diese Weise verschiebt die Navigation beim Aufklappen die darunterliegenden Inhalte nicht.

Viel Spaß beim Nachbasteln !

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 9 - Verschachtelte Navigationslisten

Beitrag von kp2709 » Di 9. Sep 2014, 15:40

Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 9 - Verschachtelte Navigationslisten

Beitrag von anke » Di 9. Sep 2014, 17:18

Das hat prima geklappt :) Weiter gehts :arrow:

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 9 - Verschachtelte Navigationslisten

Beitrag von Hellriders » Sa 24. Okt 2015, 22:13

mein ergebnis :)

verschachtelte liste

gruß micha

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 9 - Verschachtelte Navigationslisten

Beitrag von camouflage1984 » So 25. Okt 2015, 12:38

Hallo Micha

Die Navigation passt.

Du hast Deiner Seite den Namen verschachtelte Liste.html gegeben da ist ein Leerzeichen zwischen, das sieht dann im Link so aus

Code: Alles auswählen

<a href="verschachtelte%20Liste.html">Sri Lanka</a>
, damit Du nicht solche Links erhältst die evtl. zu Störungen führen können solltest Du Leerzeichen vermeiden oder mit Bindestrich oder unterstrich arbeiten.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast