Cassiopeia - Menü soll immer als Mobil-Menü angezeigt werden

    Hab im Web und im Forum hier gesucht, aber nix zur Lösung gefunden:

    Meine neuen Joomla-Sites sollen kein anderes als nur ein MobilMenu bereit stellen. Der Sandwich-Button soll dazu an der Position "search" stehen (also oben rechts) und die Suchfunktion soll wegfallen. (Ich hab ja nur eine kleine Site.) Im frei gewordenen Raum steht dann das Signet zur Site.


    Wie kann ich dafür sorgen, dass das Menü nicht als normales Menü, und abhängig von screenwidth angezeigt wird, sondern immer als MobileMenü?

    Wird wahrscheinlich in den Media-Querries gesteuert, ab wann da das Hamburgermenu angezeigt wird.

    Ab einer bestimmten Screengröße wird der entsprechende Code genutzt.

    Diesen kannst du dann ggf. auch für die größeren einbauen.

    Da die Positionen geändert werden sollen, kann es auch sonst noch Darstellungsprobleme geben, da die Positionen für bestimmte Funktionen auch entsprechend optimiert sind.

    Astrid hat dies hier auch gelöst (HM immer sichtbar) und ich denke es ist Cassiopeia.

    Ein Banner ganz oben und die Navigation horizontal darunter
    Du hast kein Logo und es gibt auch keinen Text, der anstelle des Logos auf deiner Website passt. Dafür möchtest du ein Banner ganz oben auf…
    blog.astrid-guenther.de


    Im Link sind einige wertvolle Tips und ich denke, dass es nicht so schwer umzusetzen ist.

    astrid: villeicht kannst du helfen.

    Hallo,


    es ist schon so, wie Lui_brempt sagt.


    WM-Loose: Kenne die Anleitung von astrid. Diese finde ich sehr gut.


    Der TE möchte aber:

    Zitat von Clemens-XS

    Wie kann ich dafür sorgen, dass das Menü nicht als normales Menü, und abhängig von screenwidth angezeigt wird, sondern immer als MobileMenü?

    Clemens-XS: Verstehen tue ich diesen Wunsch pers. nicht. :) Warum soll man die Menüs nicht sehen dürfen? Egal ob für große oder kleine Seite wie Du schreibst.


    Eine ev. Möglichkeit könnte das Template nature sein: https://j4.dr-menzel-it.de/


    Da kann man beim Modul > Erweitert einstellen:


    sähe dann so aus (Desktop):



    Liebe Grüße

    Christine

    christine2 danke für die Erwähnung meines Templates, aber so wie in deinem Screenshot ist das Menü Modul nicht richtig konfiguriert, da ist ein Override von Cassiopeia ausgewählt und das funktioniert bei Nature nicht, weil ich Bootstrap nicht benutze.


    Man kann ein Override von Collapsible Dropdown machen und die Klassen (navbar-expand-md) ändern (dazu die Bootstrap Doku zu Rate ziehen). Eventuell ist mein Offcanvas alternatives Layout nützlich: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

    Hallo Viviana,

    Zitat von drmenzelit

    christine2 danke für die Erwähnung meines Templates, aber so wie in deinem Screenshot ist das Menü Modul nicht richtig konfiguriert, da ist ein Override von Cassiopeia ausgewählt und das funktioniert bei Nature nicht, weil ich Bootstrap nicht benutze.

    irgendwie habe ich das dann auch bemerkt. Hab's halt versucht :)

    Zitat von drmenzelit

    Man kann ein Override von Collapsible Dropdown machen und die Klassen (navbar-expand-md) ändern (dazu die Bootstrap Doku zu Rate ziehen). Eventuell ist mein Offcanvas alternatives Layout nützlich: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

    Zuerst war es da, dann nicht mehr da, jetzt doch nach Einloggen, sehe ich gerade.
    Ah, ist auf Github.


    Nehme an, mit diesem Override wäre das für den TE gewünschte Layout. Kann es jetzt nicht ausprobieren, da dann weg.


    Liebe Grüße

    Christine

    Tja, da haben echte Fachleute geantwortet und ich verstehe nur "Bahnhof".

    Ich möchte lediglich in eine "Zeile", wie z.B. topbar oder banner das Signet am linken Rand beginnend veröffentlichen und am rechten Rand ein Sandwich-Menü platzieren.


    Und falls das nicht ohne großen Aufwand geht, könnte ich das Menü-Modul evtl. mit Z-Achse und CSS-Positionierung an die von mir gewünschte Position bekommen. Das Signet setze ich dann auf width 80% sodass immer Platz für das Sandwich-Menü bleibt.


    Eine andere Idee wäre, z.B. das MobileMenüCK einzusetzen. Hier fand ich aber heraus, dass es sich sozusagen mit dem vorhandenen Menü-Modul "verbindet" und so zusätzliche Einstellungen zulässt, die im MetisMenü nicht möglich sind. Die von mir gewünschte Positionierung ist damit ebenfalls ungeklärt.


    Auf jeden Fall möchte ich so wenig zusätzliche Erweiterungen installieren, wie möglich.


    Was tun?

    WM-Loose Es ist sogar wahrscheinlich, dass ich mit irgendeinem dieser Frameworks meine Wünsche umgesetzt bekomme. Aber dann ist meine Joomla-Site eben nicht so schlank und einfach / übersichtlich / weniger anfällig bei Updates, als wenn ich das Standard-Template mit so wenig Erweiterungen wie möglich zusammen nutze.


    Ich kam jetzt auf die Idee, meinen Wunsch mittels "Modul in Modul" zu verwirklichen:

    Ich erstelle ein benutzerdefiniertes Modul, in dem ich das Signet platziere und neben das Signet, wie gewünscht, ein weiteres Modul lade, eben das Mobile-Menü. Dann kann ich dieses Modul-Set beliebig auf gewünschte Template-Positionen bringen wie eben z.B. topbar oder belowtop oder banner oder top-a usw.


    Aus der Joomla 3.x-Zeit fand ich zum Thema "Modul in Modul laden" diesen Thread hier:

    Thema
    Modul in Modul laden.
    Hallo,

    ich hatte dieses Problem schonmal vor ein paar Jahren und im alten Joomlaforum einen Beitrag dazu eröffnet gehabt.
    Ich find diesen nun leider nicht mehr und weiß auch nicht mehr was die Lösung damals war.
    Deshalb frage ich hier nochmal.

    Ich möchte innerhalb eines Moduloverrides gerne eine Modulposition einbauen damit ich hier ein anderes Modul veröffentlichen kann.
    Genau geht es darum das ich einen Override vom mod_menu für ein Stickymenü erstelle und hier gerne auch ein Suchfeld…
    DirtyWorld

    wobei darin auf zwei weitere Diskussionen verwiesen wird.


    Und hier noch ein Thread dazu: Modul in Modul laden


    Vielleicht lassen sich die dort beschriebenen Lösungsansätze auch in Joomla 4.x in Cassiopeia anwenden? – Wenn ja, hätte ich auch da wieder die Schwierigkeit, dass es mich technisch an meine Grenzen bringt. Aber vielleicht regt der o.g. Thread jemanden hier an, mir einen Tipp zur Umsetzung in Cassiopeia zu geben?

    Zitat von drmenzelit

    Eventuell ist mein Offcanvas alternatives Layout nützlich: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

    Hab mal das alternative Layout probiert:



    sowie für: offcanvas-metismenu



    In diesen Dateien natürlich die Codes reingeben.


    In einer erstellten user.css auch den Code von Github Anhang.


    Im Modul das gewünschte Layout aussuchen:




    soweit denke ich richtig. Allerdings sehe ich den Hamburger auf der Desktop Seite nicht :)

    Und Ja, die Codes sind alle drinnen. (4.1.5-rc2-dev)


    Liebe Grüße

    Christine

    Ich habe nachgeschaut und weiß jetzt wo die Verwirrung beim Offcanvas Layout her ruhrt: Damit das Hamburger Symbol IMMER angeziegt wird, muss man die Klasse navbar-expand-lg entfernen und ein paar anderen CSS Anpassungen machen. (Ich hatte es falsch in Erinnerung, ich dachte, ich hätte das Offcanvas schon so vergesehen)
    Dasselbe ist es mit dem normalen Menü in Cassiopeia, die Klasse navbar-expand-md entfernen macht das Hamburger Symbol dauerhaft sichtbar. Der Rest ist wieder CSS Anpassung.

    z.B.

    CSS
    .container-header .mod-menu {
  flex-direction: column !important;
}

    Aus einem Kurzurlaub zurück, habe ich mich seit 2 Tagen intensiv dran gesetzt, meinen Wunsch aus dem Anfangspost zu verwirklichen. Dazu habe ich das Nature Template von drmenzelit installiert, davon ein Child angelegt.

    Dann habe ich die user.css eingefügt und die beiden "offcanvas-metismenu.php" sowie "offcanvas.php" in das Verzeichnis mod_menu eingefügt.

    Mein Signet habe ich auf die Position Logo gesetzt und das Menü auf die Navigation. Außerdem habe ich nach "navbar-expand-lg" gesucht, um immer das Mobile-Menü zu erhalten, aber diese Klasse habe ich in keiner CSS des Templates gefunden.

    Im MenüModul habe ich "offcanvas-metismenu" ausgewählt.


    Die Ergebnisse in Abhängigkeit von Screenwidth sind im Anhang in den Dateien Nature-mod_*** zu sehen und leider unbrauchbar. Daran änderte auch kein so so intensives Herumprobieren an verschiedenen Einstellungsmöglichkeiten.


    Dann habe ich die Anregungen von drmenzelit hinsichtlich Cassiopeia befolgt. Auch hier habe ich user.css und die beiden offcanvas-PHP-Dateien angelegt und zusätzlich in template.css von Cassiopeia alle Definitinen von "navbar-expand-md" deaktiviert, um das Mobile-Menu immer angezeigt zu erhalten. Und ich habe in den Klassen ".container-header .mod-menu" die vorhandenen "flex"-Definitionen ersetzt durch "flex-direction: column !important;"


    Das Signet habe ich auf die Position "Menü" gelegt und das Menü auf die Position "Search". Anders konnte ich nicht erreichen, dass das Signet nach links und das Menü nach rechts positioniert sind.


    Die Ergebnisse in Abhängigkeit von Screenwidth sind im Anhang in den Dateien Cassiopeia-mod_*** zu finden. Das sieht schon etwas brauchbarer aus - zumindest von der Funktion her.


    Da das das einzig sinnvolle Ergebnis war, was ich erreichen konnte, ist es hier zu sehen:

    Home


    Mir ist aufgefallen, dass meine Definitionen für die Breite des Signet nicht richtig funktioniert. Ich wollte erreichen, dass das Signet nie breiter als 700px wird, aber ansonsten 85% der Screenwidth breit sein sollte. Dann müsste eigentlich immer genug Platz nach rechts für das Sandwich-Menü bleiben.... Eigentlich! – Tut es aber wieder nicht!


    Und ehe ich hier den Rest der Woche auch noch verbrate, finde ich es sinnvoll, dass ich mich nun wieder vertrauensvoll an den erlauchten Kreis der Wissenden hier wende.