Cassiopeia Metismenu hoverable

flipper · 17. Januar 2022

Hallo

Nach langer Pause auf Joomla bin ich wieder zurückgekehrt.

Mit Cassiopeia und dem Metismenu kann ich gut arbeiten. Dropdown durch Klick auf den Button funktioniert. Auch die Anpassung der Klassen in der user.css funktioniert.

Problem: Das Clickable Menu lässt sich nicht so einfach in ein Hoverable Menu umstellen.

Eine Lösung ist hier beschrieben: https://mm.onokumus.com/mm-vertical-hover.html

$(function() {

$('#menu1').metisMenu();

});

Ich folgere, dem Menupunkt eine ID zuordnen zu müssen. Im Backend kann ich keine ID für die Menupunkte festlegen, ich kann nur Klassen vergeben.

Gibt es einen anderen Weg für das Ändern des Clickable Metismenu in ein Hoverable Metismenu?

Besten Dank

flipper

drmenzelit · 17. Januar 2022

Der Sinn hinter dem Metismenu war die Barrierefreiheit, deswegen wurde auf hoverable verzichtet.
Ich weiß nicht, ob die beschriebe Anpassungen funktionieren, aber da ist nicht die ID eines Menüpunktes gemeint, sondern von der Liste (ul) und da kann man im Modul eine ID vergeben.

Re:Later · 17. Januar 2022

Eine ID hat das Menü doch schon. Und initialisert wird es doch bereits durch Joomla und das ganz ohne die ID zu verwenden.

Ich vermute deshalb, dass du nur das CSS brauchst, dass ja eh ohne die ID auskommt.

Joomla verwendet allerdings ".main-nav-container .metismenu" und nicht ".sidebar-nav .metismenu" für das UL

Falls das in Joomla so klappt. Da steckt nämlich noch weitaus mehr JavaScript dahinter als nur das Metismenu-Script selbst.

Nur nebenbei: Die ID des Menüs ergibt sich aus dem Administrator-Modul für das Menü. Wenn das Modul die ID 12 hat, dann ist die id="menu12". Aber wie gesagt, ich sehe nicht, dass du die brauchst.

flipper · 18. Januar 2022

Danke beiden. Die Antworten ergänzen sich oder sind nicht stringent. Was die ID betrifft, kann ich im Backend keine einfügen, nur Klassen (MEINEKLASSE).

Code

<div class="grid-child container-nav">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar91"
aria-controls="navbar91" aria-expanded="false" aria-label="Toggle Navigation">
<span class="icon-menu" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar91">
<ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list MEINEKLASSE">
<li class="metismenu-item item-119 level-1 default current active deeper parent">
<a href="/hallo.net/index.php" aria-current="page">Willkommen</a>
<button class="mm-collapsed mm-toggler mm-toggler-link" aria-haspopup="true" aria-expanded="false" aria-label="Willkommen"></button>
<ul class="mm-collapse">
<li class="metismenu-item item-120 level-2">
<a href="/hallo.net/index.php/whois/wer" >Wer sind wir</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

Alles anzeigen

drmenzelit · 18. Januar 2022

Beim Menü Modul unter Erweitert

flipper · 18. Januar 2022

Danke, sehr schön: Feld für ID gefunden.

Leider macht das metismenu weder #meine-id, #menu[Modul-ID], #navbar[Modul-ID] noch mit / einzig der CSS hoverable. Ebensowenig hilft es, die Klasse .main-nav-container .metismen einzupflegen. Ich habe alle Vorschläge durch. Darum die bittere Erkenntnis, ja hinter Joomla stecken noch mehr Scripts. In die Scripts des Menu-Moduls hineinzugehen (menu-metismenu-es5.js, menu-metismenu.js ..... onmouseover statt click). Ob die Entwickler eine Option eingebaut haben? Immerhin wird von onokumus die Option hoverable für Desktop vorgeschlagen, was doch halbwegs barrierefrei wäre: https://onokumus.com/metismenujs/mm-vertical-hover.html

Ich bin etwas erstaunt, dass ich zum Thema nichts finden kann. Die Struktur zwingt mich, ein entsprechendes Menu zu installieren oder enthalten andere Templates ein hoverable Metismenu?

Ich danke für die geschätzte Hilfe.

hrybak · 3. Oktober 2022

Ich habe das durch folgende Zeile nur über die vorhandenen Standard-Klassen gelöst:

CSS

.container-nav li.level-1.deeper.parent:hover > ul {display:block !important;}

.container-nav kann auch ersetzt werden durch eine eigene ID oder eine eigene Klasse, die im Navigationsmodul unter Erweitert eingetragen werden können (siehe #5).

Hintergrund war bei mir ebenfalls, dass ich das Untermenü mit :hover aufklappen möchte. So muss ich nicht erst auf den Pfeil drücken, um zu sehen welche Untermenüpunkte vorhanden sind. (Funktioniert natürlich nicht auf Smartphones.)

Für mich sind jetzt die Pfeile nur noch Untermenü-Hinweisgeber, funktionieren aber auch so wie bisher. (siehe https://migration.ig-lilienthal.de/index.php unter J 4.2.3 und PHP 8.1.10)

Die Antwort kommt natürlich "relativ" spät - ich bin halt erst heute auf die Lösung gekommen. Aber vielleicht hilft es ja doch noch.

chris73 · 22. Oktober 2022

Hallo Heinz,

ja das funktioniert. Wenn man aber mehrere Submenüs unterinander hat, dann kann man nach dem Scrollen auf ein Sub-Submenü nicht mehr weiter auf das nächste darunterliegende Submenü scrollen. Das Menü schließt dann einfach.

CSS

.container-nav li.level-1.deeper.parent:hover > ul {display:block !important;}
.container-nav li.level-2.deeper.parent:hover > ul {display:block !important;}

Wie könnte man das noch berichtigen?

Schon vorab vielen Dank.

Grüße

Chris