Submenü nach rechts öffnen

Wenn es wieder heißt, dass "irgendwer", der ehrenamtliche Artbeit in Joomla steckt, was machen "muss", bin ich raus.

Beratung, die nicht angenommen wird, kann ich mir sparen.

Ich fürchte, der Ersteller der Website sollte noch mal mit sich selbst in Klausur gehen, um letztlich zu einer brauchbaren Website zu kommen. Momentan -das muss ich leider feststellen- schreckt mich die Website eher ab, als dass sie mich anzieht: Endlose und viel zu tiefe Menüstrukturen, lange Beiträge (ohne Weiterlesen) auf der Startseite, ein Menüpunkt zum Login unterhalb von "Kontakt", kein Impressum, keine Datenschutzerklärung......

Zitat von Rolf Dautrich

...kein Impressum, keine Datenschutzerklärung......

Ist doch "nur" gut "versteckt":

https://www.buergerliste-edermuende.de/verein/impressum

und übrigens ohne die korrekte Nutzung wirksamer email-Verschleierung auf der Website eingefügt...

(M)eine Empfehlung, die ich eingesetzt habe, weil der "Kunde" u.a. hovern wollte:
https://dj-extensions.com/dj-megamenulight

Mark V. du hast a viel Arbeit rein gesteckt und eine Strukur aufgebaut. Wir alle wissen, wie kompliziert Strukturen werden können.
Wenn du auf einem verkleinerten Screen mit der Maus herumklickst ist es nicht dasselbe wie am Smartphone wo du keine Maus hast.

Aber ich finde, du solltest verstehen:
Es ist keine Kritik an deiner Arbeit, es ist eine Beratung, die du hier kostenlos bekommst, und zwar von erfahrenen Web Entwicklern.
Das Umdenken ist oft schwer, aber frag doch mal unvoreingenommene Besucher der WEbseite, wie sie bestimmte Inhalte finden.

Und damit bin ich raus. Viel Erfolg!

Zitat von Stef

... ein Submenü nach rechts öffnen ist mit dem Cassiopeia nicht möglich.

Rein theoretisch möglich:

Aber bitte nicht machen. 🫢

Liebe Grüße
Christine

Denkbar wäre wohl auch nur die erste Untermenüebene und gegebenenfalls unproblematische Menüeinträge wie z.B.

Suchen -> Dokumente per hover zu öffnen.

Also folgendes in der user.css entfernen:

.container-header .mod-menu li:hover > ul {display: block !important;}

und z.B. folgendes hinzufügen:

.container-header .mod-menu li.level-1:hover > ul,
.container-header .mod-menu li.item-301:hover > ul
{display: block !important;}

habe ich aber nicht auf Nebenwirkungen geprüft.

Könnte man natürlich auch noch mit entsprechender Media Querie auf breite Viewports beschränken wie z.B.:

@media (width>=992px) {
.container-header .mod-menu li.level-1:hover > ul,
.container-header .mod-menu li.item-301:hover > ul,
.container-header .mod-menu li.item-1226:hover > ul,
.container-header .mod-menu li.item-240:hover > ul
{display: block !important;}
}

Diesbezüglich eventuell nützlich der nachfolgend ergänzte ul Selektor in deiner user.css:

/* Untermenü rechts neben dem Menüpunkt ab zweiter ul */
.container-header .mod-menu ul ul {
    position: absolute !important;
    left: 100% !important;
    right: auto !important;
    top: 0 !important;

    margin: 0 !important;
    padding: 0;

    z-index: 9999;

    display: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

ist aber auf schmalem Viewport problematisch und daher auch hier zusätzliche Media Querie meiner Meinung nach sinnvoll...

Also, ich weiss nicht. Schau mal die Distanz von einem Link zum anderen. Das geht doch nicht.

Überlege dir diese Geschichte nochmals ganz genau, ob du das wirklich haben willst.

Zitat von Mark V.

Meine Frage ist nun wie ich das springen des Untermenüs verhindern kann, wenn ich mit der Maus zwischen "Kommunalwahl 2026" und "Flyer" wechsel. Dann spring das Untermenü zu diesen beiden Punkten noch in horizontaler Richtung...

Hat hierzu jemand eine Idee?

Ja.

Habe nun mal in deiner user.css einiges gelöscht und abgeändert wie nachfolgend:

/* =========================================================
   Cassiopeia Menü – Untermenüs seitlich öffnen
   ========================================================= */

    /* Untermenü von Hauptmenü also Ebene 1 (vertikal)*/
.container-header .mod-menu > li > ul {
   width: max-content;
  
}

/* Untermenü rechts neben dem Menüpunkt ab zweiter ul */
.container-header .mod-menu ul ul {
    position: absolute !important;
    left: 100% !important;
    right: auto !important;
   
    top: 0px !important;
    margin: 0 !important;
    padding: 0;
    width: max-content ;   
}

/* Einträge ab Ebene 2 (horizontal)*/
.container-header .mod-menu > li ul li  { 
   
    background: white;
    color: #0088cc;
}
    
    .container-header .mod-menu   ul  ul     {
     box-shadow: 1px 1px 4px #0000001a !important;
}

/* =========================================================
   Links
   ========================================================= */

Dies müßte man dann oberhalb "Nur Desktop" in deiner derzeitigen user.css auch noch entfernen:

/* Breite für Menüeinträge max-content */
.container-header .mod-menu > li ul li {
	width: max-content;
}

Es sei denn du möchtest es so wie es nun derzeit bei dir auf der Website eine kurze Zeit lang war mit der "Überdeckung"...

Mir gefällt die Website (und vor allem die Menüstruktur) immer noch nicht:

Lösen könnte man dies für diesen einzelnen problematischen Menüeintrag für den entsprechenden Viewportbereich durch das einfügen von unten folgendem zusätzlichem CSS, nach dem in der user.css bereits vorhandenen:

/* On hover there should be a gray background */
.container-header .mod-menu a:hover {background-color: #eee;}

also noch vor der schließenden } des

@media (width > 992px)-Bereiches ganz am Ende der user.css einfügen:

@media (width < 1300px) {
.container-header .mod-menu ul .item-301 ul {
   position: relative !important;
   left: 0%;    
}    
    }
}

Die bereits vorhandene schließende } des @media (width > 992px)-Bereiches ganz am Ende der vorhandenen user.css habe ich im einzufügenden Code-Block gelassen um die Stelle zu verdeutlichen.

Somit wird dann für diesen Menüeintrag im Viewportbereich zwischen 993 und 1299px die derzeit letzte Menüebene wieder vertikal ausgegeben...