Aufklappbare Menus
Larry
- css
Hallo,
ich möchte folgenden Aufbau des Menus
Item1
Item2
Item3
Kontakt (Button)
Wenn auf eines der Items gedrückt wird, erscheint ein Untermenu und nachfolgende Items und der Button rücken in der Seite nach unten.
Bei den Items ist es OK.
Den Button möchte ich jetzt aber so weit unten auf der Seite platzieren, dass er nicht mehr verschoben wird, wenn ein Untermenu aufgeklappt wird.
Wie kann ich diese erreichen?
Gruß
Larry
Om nah hoo pez nyeetz, Larry!
Ich gehe davon aus, dass die Navi als <ul> vorliegt und der Button das letzte Element der <ul>, also auch ein <li> ist.
ein Lösungsvorschlag wäre, den "Kontakt-button" absolut zu positionieren und der <ul> eine feste Höhe zu geben.
Ansprechbar ist der "Kontakt-Listeneintrag" dabei über li:last-child
für moderne Browser.
Da er aber ohnehin positioniert wird, kann er auch das erste Element der Liste sein, dann über li:first-child
ansprechbar, was mehr Browser verstehen.
Wenns auch für alte Browser sein soll, müsstest du diesem Element eine ID verpassen.
Matthias
Hi,
danke für die bisherige Hilfe.
Ich gehe davon aus, dass die Navi als <ul> vorliegt
Ja
und der Button das letzte Element der <ul>, also auch ein <li> ist.
Nein, der Button liegt außerhalb.
ein Lösungsvorschlag wäre, den "Kontakt-button" absolut zu positionieren und der <ul> eine feste Höhe zu geben.
Das habe ich jetzt gemacht.
Sieht ganz ordentlich aus, mit einem Schönheitsfehler:
Vor und hinter dem Button hatte ich eine Linie (<div><hr>...button...<hr></div>) definiert, die ich mit dem Button absolut positioniert habe.
Alles ist schön nach unten gerutscht aber jetzt sind die Linien plötzlich viel kürzer.
Ich habe nirgendwo gefunden, dass ich den hr eine Länge mitgegeben hätte.
Daher die Frage:
Wovon hängt diese Länge ab?
Hi,
Vor und hinter dem Button hatte ich eine Linie (<div><hr>...button...<hr></div>) definiert, die ich mit dem Button absolut positioniert habe.
Alles ist schön nach unten gerutscht aber jetzt sind die Linien plötzlich viel kürzer.
Ich habe nirgendwo gefunden, dass ich den hr eine Länge mitgegeben hätte.
Daher die Frage:
Wovon hängt diese Länge ab?
Die Frage ist schwer zu beantworten, wenn du nur winzige Bruchstücke deines Codes zeigst.
Vermutlich hast du nicht berücksichtigt, dass die automatische Breitenberechnung bei absoluter Positionierung nach der Methode shrink-to-fit durchgeführt wird.
Vielleicht wäre es aber sinnvoller, wenn du die Linien gar nicht über HR-Elemente machst (die haben nämlich strukturell eine starke Bedeutung, was die Aufteilung des Dokumentes angeht), sondern einfach per CSS deinem Button entsprechende Rahmen verpasst.
MfG ChrisB
Hi,
Vermutlich hast du nicht berücksichtigt, dass die automatische Breitenberechnung bei absoluter Positionierung nach der Methode shrink-to-fit durchgeführt wird.
Genau - das wusste ich nicht!
Vielleicht wäre es aber sinnvoller, wenn du die Linien gar nicht über HR-Elemente machst (die haben nämlich strukturell eine starke Bedeutung, was die Aufteilung des Dokumentes angeht),
Auch das war mir neu! und ...
sondern einfach per CSS deinem Button entsprechende Rahmen verpasst.
... daher werde ich es hiermit versuchen.
Viel gelernt, danke!
Gruß
Larry
Hi,
jetzt habe ich mich doch zu früh gefreut.
Wenn das Browser-Fenster die normale Größe hat (gesamter Bildschirm) ist es in Ordnung, wenn man aber das Fenster verkleinert (geringere Höhe) rutscht der Butten in die aufgeklappten Menueinträge.
Om nah hoo pez nyeetz, Larry!
Wenn das Browser-Fenster die normale Größe hat (gesamter Bildschirm) ist es in Ordnung, wenn man aber das Fenster verkleinert (geringere Höhe) rutscht der Butten in die aufgeklappten Menueinträge.
Dies kann man nicht wirklich verhindern. Wenn du "richtig" positionierst, also der "Button" zur Navigation und damit zur <ul> gehört, bleibt er am Ende der Liste, rutscht also ggf. wie Teile der Liste aus dem Sichtbereich.
Da der "Button" aber bei dir nicht zur Liste gehört, hast du ihn an irgend einem anderen Element ausgerichtet - wenn du meinen Artikel nicht gelesen hast und deiner Beschreibung zufolge am viewport. Du kannst mit der Vergabe von z-index erreichen, dass der Button in solchen Fällen "unter" die Liste rutscht und nicht die Liste unter den Button. (Aber auch dabei gibt es Stolperfallen)
Die sinnvollste, weil semantisch richtige Herangehensweise wäre, den Kontaktknopf zu einem Teil der Liste zu machen. Damit das Positionieren richtig funktioniert, empfehle ich noch einmal das Studium eines Artikels zur Positionierung.
Matthias