KI Scripte

[Tommy Herrmann]

Ich bin für heute gleich weg. Eigentlich müsstest Du ja meine von ChatGPT erarbeiteten Scripts so übernehmen können. Versuche es mal.

Wenn Du Änderungen willst, dann poste immer das gesamte Script bei ChatGPT und sage gleich, dass Änderungen kommentiert werden müssen und Du das gesamte Script erneut mit den Änderungen generiert haben willst.

Es war unheimlich schwierig das JavaScript für den globalen Einsatz so zu erstellen - es ging immer nur auf der einzelnen Seite.

Ich wusste bis heute nicht, dass es da überhaupt einen Unterschied gibt. ChatGPT kennt sich bestens mit Mobirise aus. Schreibe das daher immer dazu.

Schreibe zum gleichen Thema immer im gleichen Chat weiter, da sich ChatGPT alles aus dem gleichen Chat "merkt". Irgendwann - nach mehreren zehntausend Zeilen wird es dann langsam, das liegt nicht an ChatGPT, sondern am Browser. Dann bleibt nur einen neuen Chat mit Verweis auf den alten zu starten.

[Tommy Herrmann]

Ach ja - ich bin überzeugt, dass dein Menü-Generator am Ende eine hervorragende Anwendung sein wird. Er muss nur sorgfältig durchdacht werden.

Ich glaube nicht, dass es etwas Besseres geben wird, wenn wir damit fertig sind

Schreibe ChatGPT auch, wenn Du meine Scripts postest, dass ChatGPT das für "Tommy" und seine Mobirise-Seiten entwickelt hat. Ich könnte mir denken (es würde mich auch interessieren), dass ChatGPT eine Verbindung herstellen kann.



Meine Beispielseite wurde neu erstellt

Da ich bisher nichts von dir gehört habe, ob du deinen ursprünglichen Mega-Menü-Generator doch noch erstellen wirst und mir unklar ist, inwieweit er nach meinen Korrekturen noch dem Original entspricht, habe ich inzwischen eine neue Seite mit einem Tutorial zum einfachen Einbau erstellt. Ich habe dafür etwa zwei Tage investiert und möchte diese Arbeit nicht umsonst geleistet haben. Weiterhin lässt sich der Code kinderleicht anpassen und ausbauen.

Hier also meine neue, zu 100% funktionierende Mega-Menü-Seite:

https://www.mobirise-tutorials.com/AI-Mega-Menu-2/


Hier können alle meine aktuellen Codes von meiner Seite bequem kopiert werden:

https://www.mobirise-tutorials.com/AI-M ... seite.html

... die Anleitungen stehen auf meiner Tutorial-Seite.

[Volker]

Moin Tommy,

durch mein Abo habe ich ja jetzt längere "Gespräche" mit Chat GPT. Nun kann ich also sehr sehr lange Code hin und her schicken.

Vergess den Generator Wir bauen ein Mega Menü für Mobirise als Erweiterung. Da kann man dann Bilder per Auswahl einfügen, Spalten Anzahl 1- 4 einstellen usw.

Das dauert aber, weil die Tusssi einmal Bilder möglich macht und beim nächsten Code Update klappt dann das Bilder einfügen nicht mehr usw. usw. Dann hängt mein Browser ( warten oder verlassen ) und der Code kommt sehr sehr langsam. Ist echt anstrengend gerade zumal ich diese Woche Frühschicht habe

[Tommy Herrmann]

Moin,

also ich weiß zwar wie man da diese Toolbox erstellt, ansonsten habe ich mit "Erweiterungen" noch nicht beschäftigt. Keine Ahnung wie man die erstellt - und - ich habe immer noch das Problem, wenn die über die Schnittstelle von Mobirise eingelesen werden, ist das eine Copyright-Verletzung.

Dennoch, wenn ich da was testen soll - musst Du mir den Weg der Erstellung zuvor ganz genau beschreiben, damit ich das ganz genau prüfen kann.

Na ja - keine KI-Seele will überfordert werden, schon gar nicht wenn sie nüscht davon hat

Du musst die Codes irgendwie in kleinere Portionen teilen - das geht. Sonst bricht der Speicher vom Browser zusammen.

Ein Trick hilft auch oft. Schreibe deine Anfrage und schließe dann den Browser. Gucke dann nach ein paar Minuten, was passiert ist.

[Volker]

Tommy,

wenn ich fertig bin hast du 2 Möglichkeiten das in Mobirise zu importieren.

1. Als User Block - nix Copyright alles gut
2. als .mbrext - Du nicht weil Copyright - aber alle anderen wenn sie wollen.

Ich bin so langsam im finalen Stadium.... Hoffe werde heute fertig

[Tommy Herrmann]

Volker,

falls Du das als .mbrext‑Datei über die Schnittstelle von Mobirise importierst, werde ich mich höchstwahrscheinlich nicht daran beteiligen und gegebenenfalls die Werbung sowie die Beschreibung hier im Forum nicht zulassen.

Wie ich schon so oft geschrieben habe: Mobirise toleriert diese Urheberrechtsverletzung momentan noch – das kann sich sehr schnell ändern (das habe ich schriftlich).

Die Schadensersatzforderungen bzw. Bußgelder können dann zwischen etwa 1.000 € und 100.000 € liegen. Ich selbst war in einem Prozess als vom Gericht bestellter Sachverständiger tätig, bei dem es um 1,2 Millionen US‑Dollar ging (die gezahlt werden mussten).

Tut mir leid, aber das ist mir zu riskant.

[Volker]

und user block ?

auch verboten ?

[Tommy Herrmann]

Nein - User-Block ist vollkommen OK (meine ich zumindest).

Du kannst das auch zum Importieren anbieten - nur nicht unter meiner Verantwortung hier im Forum. Weiterhin fühle ich mich dringend verpflichtet hier auch Schaden von Dir abzuwehren.

Mein Rat:

Setze dich schriftlich mit Mobirise in Verbindung und lass dir eine rechtsverbindliche Auskunft geben. Bitte beachte: Bei Urheberrechtsverletzungen ist es völlig unerheblich, was Mobirise dazu sagt. Es gibt spezialisierte Anwälte, die sich mit der Materie auskennen und im Zweifel dich sowie alle Nutzer rechtlich belangen können.

[Volker]

wenn das läuft werde ich mobirise mal fragen ob ich das machen darf. Mal sehen was die sagen

[Tommy Herrmann]

Ja - das habe ich ca. 5 x bei Mobirise versucht - kein Kommentar - sonst erhalte ich für alle Anfragen immer innerhalb weniger Stunden eine Antwort

[Volker]

Mal lustiger fun fact nebenbei. Chat GPT schaut bei witsec Wiki vorbei

[Tommy Herrmann]

Ja - das macht es nur noch schlimmer.

Schon die Dateiendung .mbrext spricht Bände: Sie steht für "Mobirise Extension" (Mobirise‑Erweiterung) und nicht für eine Erweiterung eines Drittanbieters – unabhängig davon, dass sich dahinter nur ein ZIP‑Archiv verbergen mag. Das ist eindeutig eine Urheberrechtsverletzung und so steht es auch in den Nutzungsbedingungen von Mobirise.

Bitte nicht falsch verstehen: Ich möchte niemanden ärgern oder kritisieren. Da gibt es ein Duzend Anbieter, deren Anwendungen teilweise fantastisch sind. Leider scheint es, als hätten sie keine Ahnung, was sie tun.

[Volker]

Na dann bin ich eben der einzige der ein geiles Mega Menü hat
Obwohl brauchen tu ich es ja nicht wirklich

Es Hakt noch an 2 Punkten: Spaltenauswahl klappt noch nicht ( ich wollte 1 -4 Spalten)
Bilder per Klick einbinden ( hatte mal funktioniert ) jetzt bekommt sie es nicht mehr hin

[Tommy Herrmann]

Ich habe mal die Frage an die KI "ChatGPT" gestellt:

Ich habe eine Frage, bei der mir bewusst ist, dass Du diese nicht rechtsverbindlich beantworten kannst oder willst. Dennoch hätte ich gerne Deine Meinung dazu. Die Webdesign Software Mobirise stellt diese Nutzungsbedingungen online:

https://mobirise.com/terms.html

Ganz abgesehen davon bestehen internationale Urheberrechtsgesetze, die unabhängig von den Aussagen des Herstellers „Mobirise“ rechtlich verbindlich sind. Zahlreiche Drittanbieter nutzen die Mobirise-Schnittstelle, um kostenpflichtige Erweiterungen zu importieren, und verwenden dabei Dateiendungen wie „.mbrext“ – ein Beispiel ist der Anbieter „Witsec“. Diese Dateien sind im Grunde ZIP-Archive; dennoch erscheint mir dieses Vorgehen als missbräuchlich. Wie beurteilst du die urheberrechtliche Lage in solchen Fällen? Die Softwarefirma wird dadurch eindeutig benachteiligt: Kostenpflichtige Erweiterungen wie der „Code Editor“ lassen sich umgehen, und mitunter werden Copyright-Hinweise aus den HTML-Seiten entfernt.

Hier die (unverbindliche) Antwort.

Deutsche Version:

https://www.mobirise-tutorials.com/down ... ieter.html

English - Version:

https://www.mobirise-tutorials.com/down ... er.html#en

[Volker]

Erweiterung nutzt offizielle API/Schnittstelle, keine Lizenzumgehung zulässig Offenes Plugin-Prinzip; verbreitet in vielen Ökosystemen

DAS ist ja auch genau meine Meinung

Finale

Bilder Auswahl klappt
Spaltenauswahl Klappt
Wenn 2 Spalten, dann auch nur 2 Bilder - Wenn 4 Spalten, 4 Bilder
Menüpunkte beliebig erweiterbar- Farbliche Anpassung - Klappt

Werde wenn ich es schaffe mal ein Video von dem ganzen machen und hier rein stellen.

[Volker]

So, nach langen hin und her und letzlich unter Einbezug von claude ai ( die code am besten kann) kann ich Vollzug melden

Um in Mobirse Menüpunkte nebeneinander in einem Container zu haben, muss man tricksen ohne ende. Deswegen gibt es von Mobirsie selber auch kein Mega Menü - ist Technisch kaum machbar. Aber nach 2 langen Tagen und Nächten hier die Lösung:

Nehmt einfach das Standard Menü vom M5 Theme und löscht den gesamten code der da drin ist, gleiches für die CSS.
Fügt folgenden Code im HTML Bereich ein:

CODE AKTUELL VON 9.10.25 19.56 Uhr

Code: Alles auswählen

<section data-bs-version="5.1" class="menu mega-menu-volker" group="Menu" menu-align="center" plugins="DropDown, TouchSwipe" always-top global once="menu" not-draggable>


  <mbr-parameters>
    <header>Show/Hide</header>
    <input type="checkbox" title="Logo" name="showLogo">
    <input type="checkbox" title="Brand Name" name="showBrand">
    <input type="checkbox" title="Menu Items" name="showItems" checked>

    <header>Mega-Menü</header>
    <select title="Spaltenzahl" name="megaCols">
      <option value="1">1 Spalte</option>
      <option value="2">2 Spalten</option>
      <option value="3" selected>3 Spalten</option>
      <option value="4">4 Spalten</option>
    </select>
    
    <input type="checkbox" title="Mega-Menü immer offen (Editor)" name="megaAlwaysOpen">

    <header>Farben &amp; Schrift</header>
    <input type="color" title="Hintergrundfarbe" name="menuBgColor" value="#7787a5">
    <input type="checkbox" title="Sticky" name="sticky" checked>
    <input type="color" title="Linkfarbe" name="linkColor" value="#ffd7ef">
    <input type="color" title="Akzentfarbe (Hover)" name="primaryColor" value="#9fe870">
    <input type="color" title="Hamburger Farbe" name="hamburgerColor" value="#bcef9b">
    <input type="text" title="Schriftart" name="fontFamily" value="Arial, sans-serif">
    <input type="range" title="Schriftgröße (rem)" name="linkSize" min="0.8" max="1.6" step="0.05" value="1.35">
    <input type="color" title="Mega-Menü Hintergrundfarbe" name="megaBgColor" value="#a6a99c">
  </mbr-parameters>

  <nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky,
                     'navbar-expand-lg':!collapsed,
                     'collapsed':collapsed}">
    <div class="container d-flex align-items-center" mbr-style="{'justify-content': menuAlign, 'background-color': containerBgColor}">


      <!-- Logo + Brand -->
      <div class="navbar-brand d-flex align-items-center gap-3">
        <span mbr-if="showLogo">
          <a href="#">
            <img src="../_images/logo.png" alt="Logo" data-app-img="image" class="logo-img">
          </a>
        </span>
        <span mbr-if="showBrand" class="navbar-caption text-black" data-app-placeholder="Titel bearbeiten">Volker Mega Menü</span>
      </div>

      <!-- Hamburger Button -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Collapsible Menu Content -->
      <div class="collapse navbar-collapse" id="navbarContent">
        <!-- Menü-Container mit Gap -->
        <div class="d-flex align-items-center gap-4 flex-column flex-lg-row w-100 w-lg-auto">
          <!-- Normale Menü-Items -->
          <div mbr-if="showItems" mbr-menu="main" class="d-flex flex-column flex-lg-row align-items-center gap-4 mb-0 flex-wrap" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem'}"><a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Start</a>
            <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Über uns</a> <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Leistungen</a>  <a class="nav-link link text-primary" href="#" data-app-placeholder="Type Text">Kontakt</a></div>

          <!-- Mega-Menü -->
          <div class="nav-item dropdown position-static mega-menu-wrapper">
            <a class="nav-link link dropdown-toggle text-black" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Mega Menü" mbr-style="{'font-family': fontFamily, 'font-size': linkSize + 'rem'}">Mega Menü</a>

            <div class="dropdown-menu mega-dropdown-content p-4" mbr-class="{'show': megaAlwaysOpen}" mbr-style="{'background-color': megaBgColor, 'display': megaAlwaysOpen ? 'block' : ''}">
              <div class="mega-flex" mbr-class="{'cols-1': megaCols==1, 'cols-2': megaCols==2, 'cols-3': megaCols==3, 'cols-4': megaCols==4}">
                
                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-09_143927/assets/images/mbr-599x399.jpg" alt="Bild 1" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten">Produkte</h6>
                  <ul mbr-menu="main" class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-secondary">sddsd</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Produkt B</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Link1</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="../../app/themes/startm5/components/_images/background17.jpg" alt="Bild 2" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten">Test 1</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-info">Link1</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-info">Link2</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-info">Link3</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-540x360.jpg" alt="Bild 3" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten">Über uns</h6>
                  <ul mbr-menu class="list-unstyled"><li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Team</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Karriere</a></li>
                    <li><a href="#" data-app-placeholder="Type Text" class="text-secondary">Link2</a></li></ul>
                </div>

                <div class="mega-col">
                  <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-06_213748/assets/images/mbr-583x389.jpg" alt="Bild 4" data-app-img="image" class="img-fluid mb-2">
                  <h6 data-app-placeholder="Überschrift bearbeiten">Extras</h6>
                  <ul mbr-menu class="list-unstyled">
                    <li><a href="#" data-app-placeholder="Type Text" class>Blog</a></li>
                    <li><a href="#" data-app-placeholder="Type Text">FAQ</a></li>
                    <li><a href="#" data-app-placeholder="Type Text">Downloads</a></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>

Und diesen Code im CSS Bereich:

Code: Alles auswählen

.mega-menu-volker {
  background: @menuBgColor;
  width: 100%;
  z-index: 999;
  position: sticky;
  top: 0;
}
.navbar {
  background: @menuBgColor;
}
.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}
.navbar-nav .nav-link {
  color: @linkColor;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  transition: color .2s;
}
.navbar-nav .nav-link:hover {
  color: @primaryColor;
}
.mega-dropdown-content .mega-flex.cols-1 {
  max-width: 400px;
  margin: 0 auto;
}
.mega-dropdown-content .mega-flex.cols-2 {
  max-width: 800px;
  margin: 0 auto;
}
.mega-dropdown-content .mega-flex.cols-3 {
  max-width: 1100px;
  margin: 0 auto;
}
.mega-dropdown-content .mega-flex.cols-4 {
  max-width: 1300px;
  margin: 0 auto;
}
.dropdown-menu.show {
  display: block !important;
}
.mega-flex {
  display: grid;
  gap: 1.5rem;
}
.mega-flex.cols-1 {
  grid-template-columns: 1fr;
}
.mega-flex.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.mega-flex.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.mega-flex.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.mega-flex.cols-1 .mega-col:nth-child(n+2) {
  display: none;
}
.mega-flex.cols-2 .mega-col:nth-child(n+3) {
  display: none;
}
.mega-flex.cols-3 .mega-col:nth-child(n+4) {
  display: none;
}
.mega-col img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
  display: block;
  background: #eee;
}
.mega-col h6 {
  font-weight: 700;
  margin: 10px 0 8px;
}
.mega-col a {
  color: @linkColor;
  text-decoration: none;
  display: block;
  margin-bottom: .3rem;
}
.mega-col a:hover {
  color: @primaryColor;
}
.logo-img {
  max-height: 3rem;
}
.navbar-toggler {
  border: 2px solid @hamburgerColor;
  padding: 0.5rem;
  background: transparent;
  position: relative;
}
.navbar-toggler-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-image: none;
  top: 50%;
  transform: translateY(-50%);
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon {
  background-color: @hamburgerColor;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: '';
  display: block;
}
.navbar-toggler-icon::before {
  top: 0.25rem;
}
.navbar-toggler-icon::after {
  bottom: 0.25rem;
}
@media (max-width: 991px) {
  .navbar-nav {
    flex-direction: column;
  }
  .mega-dropdown-content {
    position: static;
    display: none !important;
    width: 95% !important;
    margin: 0 auto !important;
  }
  .mega-dropdown-content.show {
    display: block !important;
  }
  .mega-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
    grid-template-columns: 1fr !important;
  }
  .navbar-collapse {
    width: 100%;
    margin-top: 1rem;
  }
  .mega-col img {
    max-width: 100% !important;
  }
}
A {
  font-size: 20px;
  font-family: 'Inter Tight', sans-serif;
}
.mega-menu-volker .mega-dropdown-content {
  justify-content: var(--menuAlign, center);
  text-align: var(--menuAlign, center);
  display: flex;
  flex-direction: column;
  align-items: var(--menuAlign, center);
}
.mega-menu-volker .dropdown-menu.mega-dropdown-content {
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease, left 0.3s ease;
}
.mega-menu-volker[menu-align="flex-start"] .dropdown-menu.mega-dropdown-content {
  left: 0;
  transform: none;
}
.mega-menu-volker[menu-align="flex-end"] .dropdown-menu.mega-dropdown-content {
  right: 0;
  left: auto;
  transform: none;
}
.mega-menu-volker[always-top] {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
}
body {
  scroll-behavior: smooth;
  padding-top: 100px !important;
  margin-top: 100px !important;
  scroll-padding-top: 100px;
}

Das ist alles und schon habt ihr ein Mega Menü das komplett in Mobirise zu editieren ist. Bilder Auswahl Links usw.

https://www.niederastroth.de/megatest/

[Tommy Herrmann]

Moin,

sehr gut - das scheint zu funktionieren. Ich habe mir den Code angesehen und es auch auf dem Handy getestet.

Die Bilder darfst Du natürlich in einem Beispiel-Code nicht lokal verlinken, das kann ja dann nicht umgesetzt werden.

Was ist mit meinem JavaScript, das du da drin hast? Das kann eigentlich gar nicht ohne JavaScript funktionieren, und du erwähnst es hier überhaupt nicht

Was mir nicht so gut gefällt, ist deine Mega‑Menü‑Ansicht auf dem Handy. Die kleinen Bilder nebeneinander und der umgebrochene Text darunter sind für mich nicht akzeptabel, zumal dort noch deutlich mehr Text stehen könnte:

Das finde ich bei meinem Versuch besser gelöst:

Worauf wir wahrscheinlich hinauslaufen, ist, dass ein Generator dafür schwierig und zudem überflüssig ist, denn man kann die einzelnen Spalten sehr einfach kopieren oder entfernen, um eine eigene Version zu erstellen. So habe ich es auch in meinem Tutorial beschrieben.

Hier zum Vergleich: mein Mega-Menü und das dazugehörige Tutorial mit Screenshots zur Installation:

https://www.mobirise-tutorials.com/AI-M ... orial.html

Meine Codes von HTML, CSS und JS stehen hier:

https://www.mobirise-tutorials.com/AI-M ... seite.html

[Volker]

[Dieter53]

Das ist eine super Sache und sicherlich mit viel Arbeit verbunden, vielen Dank für deine Arbeit. Ich habe das jetzt einmal an einem Testprojekt getestet. Leider bekomme ich immer diese Fehlermeldung:

[Volker]

Screenshot 2025-10-09 185600.pngDas ist eine super Sache und sicherlich mit viel Arbeit verbunden, vielen Dank für deine Arbeit. Ich habe das jetzt einmal an einem Testprojekt getestet. Leider bekomme ich immer diese Fehlermeldung:

Hallo Dieter,

war ein winziger Fehler im Code. Bitte beide Codes erneut hier Kopieren. Fehler ist beseitigt.

Hatte noch die Farbauswahl für den Mega Container hinzugefügt