Formatierung und Anordnung von Menus im Cassiopeia

Guten Tag zusammen

Ich bin am Arbeiten mit den Menüs im Cassiopeia.

Dabei bin ich auf zwei Probleme gestossen, bei denen ich nicht weiterkomme. Auf den ersten Blick sollte dies leicht mit CSS lösbar sein, aber ich hab’s einfach  nicht hinbekommen.
Ich habe auch viele Anleitungen bei Professor Google erhalten, aber die bleiben oft auf halben Wege stehen, das heisst, es sind jeweils nur Teilaspekte behandelt, die sich dann bei Kombination gegenseitig wieder beeinflussen.
Vielleicht habt Ihr eine Lösung oder ein Tipp wie ich weiterkommen oder weitersuchen kann.

Hier habe ich die Menüs auf meiner Testseite nachgebaut: baderweb.ch/j4test/

Fall 1:
Ich habe ein Menu mit drei Punkten, wobei im dritten Menüpunkt zwei Untermenüs sind an der Position 'menu': "Home  Article2  Article3" und bei Article 3 (Article 3-1  Article 3-2). Bei der Auswahl von Article 2 soll ein zusätzliches themenspezifisches Menü angezeigt werden.

1. Wie kann ich die Untermenüs anzeigen lassen, wenn ich auf 'Article 3' klicke?
2. Wie kann ich dieses Menu direkt unterhalb des ersten Menüs anzeigen lassen?

Fall 2:

Die gleichen Menüs (natürlich  nur zu Testzwecken) sind nun an Position 'main-top'. Mit den gleichen Funktionalitäten wie oben. Hier werden die Untermenüs angezeigt.

1. Wie kann ich die Darstellung horizontal einstellen?
2. Wie kann ich die Untermenüs hier erst beim Klick auf 'Article 3 (3)' anzeigen?

Vielen Dank schon mal für Eure Hilfe.

Viele Grüsse
Urs

Hoi Urs,
ich bin nicht so der Cassiopeia-Spezialist, möchte dir aber die Lektüre von Astrid Günther hier und Marc Dechèvre hier empfehlen.

Hoi Chris

Danke für die Tipps. Das Dokument von Astrid Günther kenne ich und sie hat bei einigem geholfen, aber nicht in den jetzigen Fällen. Das von Marc Dechèvre werde ich mal durchlesen. Es sieht auch für andere Dinge interessant aus.

Gruss
Urs

Ich verstehe nicht ganz, was du möchtest, ist es etwas in der Art:
--- temporärer Link entfernt --

Hoi Urs

Hast du in den Moduleinstellungen für das Menü bei "Untermenüeinträge anzeigen" auf "Anzeigen" ausgewählt und im Tab "Erweitert" bei "Layout" den Eintrag "Collapsible Dropdown"?





LG
Patrick

Gutem Morgen

Vielen Dank für Euren Input.

@Chris:
Im Prinzip ja. Das wird auch in den von Dir angegebenen Referenzen beschrieben und klappt auch. Ich bin mir aber nicht sicher, ob alle User das Dreieck richtig interpretieren und darauf klicken. Darum wäre es praktisch, die Submenüs würden beim drüberfahren über den Menutext (natürlich nur am PC) oder beim Klicken auf den Menütext (rsp. Berühren am Handy) ausgeklappt (Fall 1 Punkt 1).
Oder alternativ, ich könnte direkt unter dem Hauptmenü bei Klicken des Menüpunktes ein zweites Menu anzeigen, welches die 'Submenüpunkte' dann als normale Menüpunkte enthält.(Fall 1 Punkt 2 oder aber Fall 2), wenn ich eine andere Position wählen würde. Das geht auch grundsätzlich, aber ich hab es nicht geschafft die Darstellung anzupassen.

Ich habe versucht mittels user.css dies mit CSS entsprechend zu erreichen, aber irgendwie schaffe ich es nicht. Wie wenn ich die entscheidende Stelle nicht finden kann und die Änderungen dann an einer anderen Stelle neutralisiert werden.

@Patrick:
Ja, habe ich so gesetzt und gemäss den Quellen von Chris habe ich auch alle anderen Punkte entsprechend berücksichtigt. Ich vermute, ich muss da effektiv mit CSS weiterfahren, aber da stehe ich offensichtlich an.

Viele Grüsse
Urs
 

Trage in der user.css folgendes ein:


Hoff es klappt!

 

Hoi Patrick

Super! Es klappt.
Interessant ist, dass ich diesen Style im Inspektor aber nicht anzeigen kann. Das hat wohl mit dem Zustand 'hover' zu tun. Gibt es da eine Möglichkeit?

Damit wäre der Fall 1 Punkt 1 gelöst und damit der Fall 1 Punkt 2 obsolet.

Hast Du mir auch einen Tipp für den Fall 2, wo ich ein Menu an beliebiger Stelle horizonal darstellen kann? (Irgendwie ist Cassiopeia doch viel vielschichtiger als Protostar).
 

Gib dem Menü die Klasse "menu-horizontal" mit.

 

Danke für den Tipp.
(1    beim nächsten JUG)

"menu-horizontal" habe ich schon drin gehabt, habe aber zugleich mit den anderen Variablen gespielt und mit folgenden Einstellung Erfolg gehabt:

Menu Class : menu-horizontal
Layout: Collapsible Dropdown
Module Tag: nav
Module Style: HTML5  (Vor allem das hat geholfen, die anderen waren bereits entsprechend gestzt!)

Das hat mir sehr geholfen!

Vielen Dank für Eure Hilfe!

Schönes Restwochenende
Urs