Ich erstelle ein großes dynamisches Navigationsmenü, das so aussehen soll:
[----------- 100% PAGE WIDTH -----------]
| GROUP A | GROUP C | GROUP F | GROUP G |
| item | item | item | item |
| item | | item | item |
| | GROUP D | item | item |
| GROUP B | item | item | |
| item | | | |
| item | GROUP E | | |
| | item | | |
|---------------------------------------|
| |
| |
[------------- END OF PAGE -------------]
Siehe mein JS-Geigenbeispiel .
Anforderungen
Wenn die Breite der Seite wächst, möchte ich, dass es mehr Spalten gibt, wenn es verkleinert wird Ich möchte weniger Spalten.
Wenn ich doppelt so viele Elemente hinzufügen möchte, möchte ich, dass die Höhe der Spalten größer wird , damit Platz für die zusätzlichen Elemente besteht.
Die Auffüllung / Leerzeichen zwischen jeder Gruppe sollten gleich sein.
Im Idealfall werde ich kein JavaScript verwenden (aber wenn das der einzige Weg ist).
Problem
Wenn ich die Bildschirmhöhe / -breite verkleinere, läuft der Inhalt über die rechte Seite des Menüs hinaus.
Gedanken
Ich habe nach einer CSS-Lösung gesucht, kann aber keine finden, die keinen Abstand zwischen den unebenen Gruppen hinzufügt. (Z. B. Ungleichmäßige Leerzeichen )
Alles, was mir einfällt, ist die Verwendung von JavaScript, um die Höhe des Flexbox-Parent dynamisch festzulegen (die Höhe wird erhöht, bis die letzte Elementgruppe (TITEL F) vollständig angezeigt wird und nicht vom Bildschirm überläuft).
Vielleicht so etwas ( jsfiddle ):
%Vor%Wahrscheinlich müsste es auf mindestens die Breite eines 4K-Monitors erweitert werden. Wenn Sie SASS oder ähnliches haben, würde das die Dinge weniger mühsam machen.
Es gibt keine inhaltsbewussten Spaltenbreiten, sodass Sie eine wahrscheinliche minimale Spaltenbreite erraten können.
Das Problem, das Sie angesprochen haben, dass das Menü von rechts fällt, wird nicht wirklich mit einer Lösung gelöst, wenn Sie viele Dinge zeigen, aber nicht scrollen. Berücksichtigen Sie, dass schmalere Anzeigebreiten normalerweise auch kürzere Anzeigehöhen haben. Je kleiner der Bildschirm, desto weniger können Sie anpassen. Es kann erforderlich sein, kleinere Bildschirme mit weniger Menüoptionen einzurichten.
Tags und Links javascript css css3 flexbox