Lektion 10 - Klappmenü gestalten

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

Lektion 10 - Klappmenü gestalten

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

Bei verschachtelten Listen ist häufig das Problem, dass die Listen viel Platz wegnehmen. Vor allem wenn du eine horizontale Navigation verwendest und hier eine verschachtelte Liste verwendest.

Viel schöner ist es doch, wenn sich solch eine verschachtelte Liste nur zeigen würde, wenn man sie betrachten möchte. Wenn man mit der Maus über den Link fährt.

Okay, wie funktioniert das denn nun ?

Horizontales Klappmenü
Zunächst einmal erstellst du deine verschachtelte Liste, wie bereits in der letzten Lektion:[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion10-1.png[/popup]
[col]Gehen wir nun über zum CSS-Teil.

Als Erstes lässt du die Listenpunkte verschwinden und stellst sämtliche Abstände auf 0.

#navi ul
  • Listen - Typ: keine
    Außenabstände - alle auf 0px
    Innenabstände - alle auf 0 px
Deine Liste klebt jetzt schön an der linken Seite deines Div.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Die übergeordnete Liste bekommt nun eine Breite und den Float left:

#navi li
  • Breite 140px
    flotat: Links
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Jetzt kommt noch die Klappfunktion:

Hierzu wird die untergeordnete Liste im Normal-Zustand versteckt und im Hover-Zustand angezeigt:

#navi li ul
  • Anzeige: keine
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]#navi li:hover ul
  • Anzeige: block
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Fertig ist die Klappliste. Jetzt musst du sie nur noch ein bisschen bunt machen. Wie in der vorangegangenen Lektion.

Du wirst hierzu noch einige Styles anlegen müssen zum Beispiel:

#navi li, #navi li a, und #navi li li a

Als kleine Hilfestellung schaltest du die #navi li ul erst einmal wieder auf sichtbar, solange du sie noch formatierst.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Viel Spaß beim Nachbasteln!

Meine Lösung: Klappmenü

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

Re: Lektion 10 - Klappmenü gestalten

Beitrag von kp2709 » Di 9. Sep 2014, 18:13

hi, habe hier ein klappnavi ;), wenn ihr wollt könnt ihr es klappern lassen ;) ein kleines spässli

http://reikuma27.reikuma.bplaced.de/web ... chach.html

bitte mal gucken :)

gruß
kurt
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 10 - Klappmenü gestalten

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

Das klappt ja super :mrgreen:

Weiter gehts :arrow:

Gruß Anke

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

Re: Lektion 10 - Klappmenü gestalten

Beitrag von Hellriders » Mo 26. Okt 2015, 00:06

fertig :)

klappmenue

nur wie bekomm ich mein menue dazu den inhalt nicht wegzuschieben.
ich hätt den inhalt an diesen stellen gern verdeckt. :?

gruß micha

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

Re: Lektion 10 - Klappmenü gestalten

Beitrag von anke » Di 27. Okt 2015, 06:50

Hallo micha

dazu musst du die Position der Menüleiste (1. Liste) absolut setzen und im Stapel ganz nach oben legen.

Gruß Ele ;)

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast