KI Scripte

[Volker]

Hi Volker,
ich sehe gerade auf Deiner M4 Seite, dass das Hamburger-Icon ganz links klebt.
Da stimmt noch was nicht, wenn die Textbreite des Untermenü-Begriffes recht lang ist

Das kannst du doch mit CSS gerade bügeln zur Not

[Tommy Herrmann]

Hallo Volker,

das kann ich jetzt auch nicht auf die Schnelle sehen.

Ich hatte auch geschrieben, dass ich das Standard-Thema "Mobirise5" verwendet habe. Bei Dir sieht das aus als wäre es das Thema "StartM5".

Ich habe bisher kein andere Thema getestet, wie ich auch oben geschrieben habe. Das ist daher schon mal nicht meinen Anweisungen entsprechend. Auf jeden Fall liegen zwischen diesen beiden Themen "Welten".

In meinem Thema ändert sich die Farbe des Mega-Menü entsprechend der Wahl der Farbe der Navi.

[Volker]

Ah OK, ich dachte es muss nur ein M5 Theme sein.
ich mache das jetzt mit einem nackten M5 Standard Theme.

Wenn ich Menüs hinzufüge werden die aber nebeneinander gesetzt.

https://www.niederastroth.de/tommy/

M5 Standard Theme

[Tommy Herrmann]

Ich habe jetzt das JavaScript entfernt. Nun geht es nur noch mit der CSS:

https://www.mobirise-tutorials.com/AI-M ... -Mobirise/

Das noch unten dran an die vorhandene CSS:

Code: Alles auswählen

/* Handy/Tablet: Mega-Panel und Inhalt wirklich einpassen */
@media (max-width: 991.98px){

  /* 1) Mega-Panel: volle Breite, keine Mindestbreite/Clamps */
  .navbar .dropdown-menu.mega-menu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;      
    max-width: 100% !important;  
    margin: 0 !important;
    padding: .5rem 0 !important;
  }

  /* 2) Container im Mega-Menü: NICHT als Flex (überschreibt globales display:flex) */
  .navbar .dropdown.megamenu .dropdown-menu .container{
    display: block !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* 3) Spalten wirklich untereinander */
  .navbar .dropdown.megamenu .dropdown-menu [class*="col-"]{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 4) Bilder: auf Containerbreite einpassen */
  .navbar .dropdown.megamenu .dropdown-menu img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Optional (Desktop): Mindestbreite des Mega-Panels entfernen */
@media (min-width: 992px){
  .navbar .dropdown-menu.mega-menu{
    width: 80vw !important;
    max-width: 1100px !important;   /* statt min(80vw,1100px) */
  }
}

[Tommy Herrmann]

Mein Tutorial und die komplette Zusammenfassung vom HTML- sowie CSS-Code findet ihr auf meiner Tutorial-Seite.

https://www.mobirise-tutorials.com/AI-M ... l#Tutorial

Ich denke, da jede CSS eines jeden Mobirise Themas etwas anders ist, müsste diese auch immer dem jeweiligen Thema angepasst werden. Das könnte ich dann wahrscheinlich auf Nachfrage liefern.

[Volker]

OK Tommy,

das ist eine Möglichkeit ein Mega Menü zu realisieren.
Allerding immer mit 4 Spalten, nur für M5 Standard und die Bilder per Hand auf den Server laden.

Zum Thema Menüpunkte hast Du noch nichts geschrieben. Oder sind die auch fest vorgegeben ?
Wenn ich Menüpunkte mit dem + Zeichen hinzufüge stehen die nebeneinander.

Das finde ich jetzt für den Anfang Ok, aber wird das noch erweitert ?

[Tommy Herrmann]

Du - ich weiß noch nicht was ich da noch anpassen muss und werde.

Ganz sicher fehlt noch die flexible Mega-Menü-Breite, damit man auch 2-3-4-5 (6 werden wohl nicht passen) Spalten gestalten kann.

Das Ziel ist es, alles so einfach wie möglich zu halten, dann das soll ja kein Generator sein, sondern eine leicht einbaubare zusätzliche Menüleiste, die auch funktioniert.

Natürlich kann man bei diesem Aufbau nicht für alles die Mobirise-Toolbox verwenden, die ist doch dafür gar nicht erstellt worden. Das "+" für zusätzliche Links kann man natürlich nicht verwenden, da kopiert man dann einfach ein vorhandenes <li> Tag und fügt es darunter für den zusätzlichen Link ein. Das muss ich noch im Tutorial hinzufügen. Das ist noch nicht ganz fertig.

Code: Alles auswählen

<li><a class="text-secondary py-0" href="https://www.mobirise-tutorials.com/AI-Mega-Menu-2/" target="_blank" data-app-placeholder="Type Text">AI Mega-Menü-2</a></li>

Ich will und werde jetzt nicht die Input-Felder der Toolbox umschreiben, das entspricht nicht dem Konzept der einfachen Dropdown Änderung.

[Tommy Herrmann]

Bei Deiner Testseite von meinem Mega-Menü ist noch das JavaScript drinnen - das muss wieder raus. Die Farbe der Navi und vom Mega-Dropdown lässt sich über die Toolbox der Navi anpassen.

[Tommy Herrmann]

Ich werde meine Version des Mobirise-basierten Mega-Menüs nicht mehr ändern:

https://www.mobirise-tutorials.com/AI-M ... -Mobirise/

Ich habe bereits wieder viel zu viel Zeit in ein von vornherein aussichtsloses Unterfangen investiert.

Ohne die komplette Mobirise‑CSS zu löschen, lässt sich das Problem nicht lösen. Mein Beispiel mit vier Spalten kann weiterhin verwendet werden - das Dropdown muss aber weit genug links in der Navi angebracht werden, damit der rechte Bereich des Dropdown‑Panels nicht am rechten Bildschirmrand überläuft.

Alle Versuche, das dynamisch per CSS anzupassen (etwa wenn nur zwei oder drei Spalten im Dropdown erscheinen sollen), sind gescheitert. Auch ChatGPT ist das in vier Stunden Arbeit weder per CSS noch per JavaScript gelungen. Ohne die Mobirise‑JS- und -CSS‑Dateien wäre das kein Problem.