Flat Responsive - Menü zweispaltig ausgeben

Hallo Zusammen,

in einem Projekt (http://www.krebsmuehle.com, Layout Flat Responsive) wird die Anzahl der Unterseiten stetig größer. Das wird jetzt zum Problem bei manchen Desktopmonitoren, wenn das ausgeklappte Menü unten aus dem Bild ragt. Die wenigsten User helfen sich intuitiv mit MouseWheel oder den Pfeilen auf der Tastatur. Muss eleganter gehen.

Die beste Lösung wäre, die Unterseiten zweispaltig darzustellen, solange die Breite des Devices das sinnvoll zulässt. Eine Simulation in Photoshop anbei.

Habe versucht, mich dem CSS zu nähern (#header #nav ul ul li a) und auch versucht, aus dem Widget "Untermenü" zu lernen. Da kann man ja die Variable "column_count" belegen ...

... erfolglos. Bin kein CSS-Profi.

Kann mir jemand helfen?

Viele Grüße & Danke, Jochen

Screenshot Ist-Zustand Simulation Soll

Danke für die Antwort Herr S.

Dass Zeta keine zweispaltigen Menüs anbietet ist mir bewusst.

Der Vorschlag mit den Unterseiten: Der Betreiber will Vielfalt signalisieren. Beispiele für großflächige Navigation gibt es genug im Web.

Gibt es Jemanden hier, der mir das als Entwicklungsauftrag umsetzen könnte?

Oh hallo andima, habe nicht mitbekommen, dass noch jemand geantwortet hat. Die Seite von Mario ist in der Tat eine sagenhafte Quelle.

Vielen Dank auch, die Idee an sich finde ich clever, ich will mich nur so wenig als möglich vom Standard des Layouts entfernen. Anzahl und Sortierung der Menüpunkte wechselt auch öfters, da muss die Aktualisierung ohne Handarbeit gehen. Sonst werde ich noch die Fehlerquelle Nr. 1

Nachtrag: Die Lösungsansatz lautet #header #nav > ul ul { column-count: 2; } im Attribut "additional_css".

Jetzt fehlen nur noch zwei Bedingungen:

(1) Nur zweispaltig, wenn die Zahl der Menüpunkte > 10

(2) Nicht im mobilen Menü, da immer einspaltig

Kriege ich auch noch raus oder jemand hier mag mir helfen. Mühsam nährt sich das Eichhörnchen

So, das Eichhörnchen hat's hingekriegt. Ich poste es hier, falls es mal jemand brauchen kann:

.submenu:not(.overflown) .haschilds > a[href="ausstellung.html"] + ul{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Der Selektor war eine harte Nuss, hat mir ein Frontend Developer geholfen: submenu ist die Klasse, wird aber nur getriggert, wenn nicht gleichzeitig Klasse overflown (das mobile Menü).

Die überlange Menüliste wird anhand ihres Links auf ausstellung.html identifiziert. Das ist unsauber aber eine pragmatische Lösung, weil sich die Anzahl an children nicht so einfach abfragen lässt. column-count funktioniert nur in neueren Browsern. In älteren Releases und in allen aktuellen IE und Edge bleibt die Liste einspaltig. Man kann's bestimmt emulieren, das war mir aber auch mit dem Zeitdruck erstmal zu viel.