Zur Navigation

Klappmenü und responsive Darstellung

1 krieger98

Ich habe auf meiner Webseite in der obigen Navigation unter <div class="row-2"> ein Klappmenü eingefügt mit dem Namen <div id="menu">". Auf dem Desktop wird alles richtig dargestellt. Bei Bildschirmgrößen kleiner 480 Pixel gehen die Menüpunkte ineinander über und werden nicht richtig dargestellt. Woran liegt das und was muss ich in der "responsive-test.css" noch einfügen bzw. ändern.
Zu Testzwecken habe ich das unter: http://s201291267.online.de/test.htm angelegt.
http://s201291267.online.de/css/responsive-test.css

02.01.2016 17:49

2 Jörg

Die Menüpunkte haben eine feste Höhe:

#menu li {
    top: 0px;
    left: 5px;
    height: 22px;
}

Wenn das Menü so schmal wird, dass der Text in eine zweite Zeile umbricht, kommt es zu diesen Überlappungen

Du kannst für Menüpunkte der zweiten Ebene die Höhe auf auto stellen, dann richtet sich die Höhe dort auf den Inhalt aus:

#menu li li {
    height: auto;
}

02.01.2016 19:41

3 krieger98

Vielen Dank für den Tipp.
Die Menüpunkte gehen nicht mehr ineinander über. Es gibt aber noch einen Fehler, die richtige Boxenbreite von 180 Pixel wird nicht angezeigt es findet ein Zeilen-Umbruch statt und die Boxen werden nicht mittig zentriert bei einem Bildschirm kleiner 480 Pixel.

02.01.2016 20:49

4 Jörg

die richtige Boxenbreite von 180 Pixel wird nicht angezeigt

Definiert sind 170px:

#menu ul {
    float: left;
    list-style-type: none;
    width: 170px;
}

es findet ein Zeilen-Umbruch statt und die Boxen werden nicht mittig zentriert bei einem Bildschirm kleiner 480 Pixel.

Was ist damit gemeint - dass die Hauptmenus untereinander angeordnet werden? für vier Boxen à 170px braucht es halt mindestens eine Breite von 680px. Dadrunter lässt sich ein Einklappmenü nicht auf dieselbe Weise realisieren, da muss man sich überlegen, wie die Elemente dann sinnvoll angeordnet werden können. Eine Möglichkeit wäre es, bei kleineren Bildschirmbreiten alle Menüpunkte untereinander anzuordnen und die untergeordneten Menüpunkte einzurücken. So wie z.B. hier im Forum, wobei das Menü hier nach dem Laden der Seite erstmal als ganzes eingeklappt ist, wozu dann auch noch ein kleines JavaScript benötigt wird

04.01.2016 11:41 | geändert: 04.01.2016 11:42

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]