KI Scripte

[Volker]

Du hast Recht Tommy,

ich hab mich nun nur auf das Mega Menü konzentriert und er KI gesagt was sie machen soll

Jetzt ist alles auf Handy optimiert und es gibt nur noch wenige einstell Optionen.

https://www.niederastroth.de/css/menu2.php

[Tommy Herrmann]

Hmm - kann noch nichts sagen, außer es sieht sehr viel übersichtlicher aus.

Der kopierte Code zeigt allerdings jetzt nichts in Mobirise an. Ich glaube die <section> stimmt so noch nicht.

[Volker]

Wenn ich den code in mobirise haue zeigt es aber alles an

Muss nur noch die Ausrichtung der Menüpunkte hin fummeln. Ist noch zu weit rechts.

[Tommy Herrmann]

OK

> bei mir aber nur in dem "Custom HTML Block </>" der Erweiterungen. Zuvor ging das in jedem Block. Gegebenenfalls müsstest Du das dazu schreiben.

> Weiterhin geht die Hamburger Navi noch nicht.

> Die Menüleiste ist jetzt nicht global

> Weiterhin sollte das JavaScript in <script> Tags </script> stehen.

[Volker]

DAs Java Script braucht man glaub nicht einbauen, ich hab das weg gelassen und hab trotzdem das mega menü

Ah OK, braucht man für Handy

[Tommy Herrmann]

Das ist so mit den Spalten tausendmal besser

[Volker]

Ich , bzw, die KI arbeiten ja noch daran alles schöner, einfacher und besser zu machen ...regnet eh heute den ganzen Tag

[Tommy Herrmann]

Der Klick auf den Hamburger-Button ≡ öffnet derzeit dennoch nicht.

[Volker]

Der Klick auf den Hamburger-Button ≡ öffnet derzeit dennoch nicht.

In Mobirise ?

[Tommy Herrmann]

Nirgendwo - auch in keinem Browser und auch nicht am Handy. Also im kopierten Code, nicht im Generator.

[Tommy Herrmann]

Für die Funktion vom Hamburger-Button ist doch das JavaScript dabei (nur es funktioniert nicht) - und deswegen soll es auch in die <script> Tags </script>.

[Volker]

So, nun geht es

Bitte wie folgt vorgehen:

In Mobirise irgend ein Menü Block wählen. Den Inhalt der CSS und des HTML mit dem aus dem Menü Generator ersetzen.
Im HTML Teil ist jetzt auch der Java Script Teil unten angehängt.

So wird nun auch beim Erstellen einer neuen leeren Seite das Mega Menü eingefügt.

https://www.niederastroth.de/css/menu.html

Bereit zum Testen

[Tommy Herrmann]

Ja - das sieht sehr gut aus

> Das JavaScript muss aus dem HTML Code wieder raus, das ist doch sonst doppelt. Lasse es so wie es ist im JS Tab

> Du könntest das Menü vielleicht noch global machen, sonst müsste man es auf jeder Seite neu bearbeiten

> Auf Deiner Generator-Seite müsste der Hamburger-Button nochmals überarbeitet werden, das Menü öffnet so, dass es z.Zt. den Hamburger-Button zu 90% verdeckt.

[Volker]

Menü ist Global, aber es klebt zu weit oben. Da bin ich gerade dran. Der Java Teil im HTML klappt ja, den seperaten JS braucht man ja nicht kopieren.

Bin noch am tüfteln das menü runter zu bekommen

[Tommy Herrmann]

Du musst die Navi nur höher machen.

> Ich würde die Standard-Höhe der Menüleiste von jetzt 40px auf 80px setzen. Das kommt dann der von Mobirise ähnlich und 40px ist sehr, sehr (zu) schmal. Auch wenn dann jeder die CSS selbst bearbeiten kann und muss.

P.S.:

Bei Mobirise ist die minimale Höhe 70px,

min-height: 70px;

[Tommy Herrmann]

Setze noch den Abstand "top" dieser Klassen von 60 auf 96px, damit die Anzeige im Generator stimmt:

Code: Alles auswählen

.menu-preview-content .navbar-menu {
  display: none !important;
  flex-direction: column;
  position: absolute;
  top: 96px;
  left: 0;
  width: 100%;
  background-color: #444;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

[Volker]

Tommy,

lass du mal bitte deine ki darüber schauen. Global geht, js muss in mobirise aus dem html raus un in end of body.

Lad mal meine datei runter bitte: https://www.niederastroth.de/css/menu.7z

[stobi_de]

Hallo Volker,
Der Rudy hat zuletzt etwas Ähnliches gebaut, was ganz gut funktioniert.
Vielleicht schaust Du ja mal rein?!
https://www.unsitepourtous.be/mobi/Mega ... rticle07-v

Und da habe ich das Teil mal verwendet
https://afripix-entwicklung.de/vereinsbuddies

Das Besondere ist, dass man die Project.mobirise laden kann (und somit die Links auf die Dateinamen hat) und mit einem Trick auch die Bilder aus den online-Assets laden kann, also schon alle Bilder auf dem Server sind (neue Bilder für das Menü gehen so nicht).

Die Einbindung in Mobi geht über einen Block aus der Witsec-Galery, wo man noch weitere EInstellungen machen kann.
Rudy will das auch für anderes Bootstrap-System anbieten.

[Volker]

Ich kenn das Teil von Rudy

Heute regnet es - ich habe Zeit und nun auch einen Mega Menü Generator. Bilder kann man einfach einfügen mit einem link. DAs ganze läuft jetzt auch soweit. Nur muss man jetzt eben den Java Teil per Hand in die Seiteneinstellungen kopieren, die werden ja nicht global übernommen. Ich dachte ich könnte das in den HTML Teil von Mobirise hauen, damit man das eben nicht machen muss.

Aber eventuell hat Tommy noch eine Idee

[Tommy Herrmann]

Ich habe das mal hier grob so gelassen:

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

Da stimmt noch einiges nicht.

> ändere ich den Hintergrund, bleibt der Container dennoch in der Originalfarbe

> es fehlt bei den Links die Option target="_blank"

> es fehlt auch ein "hover" für die Textlinks, vielleicht 40% dunklere Farbe

> Das "navbar-menu" steht viel zu hoch - ich musste ein padding-top: 45px einbauen:

Code: Alles auswählen

.navbar-menu > li > a {
  display: block;
  padding-top: 45px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

Die Menüleiste ist noch nicht gloabal. Dazu benötigt diese eigentlich nur das Mobirise-Attribut "global":

Code: Alles auswählen

<section data-bs-version="5.1" always-top global once="menu" not-draggable position-absolute>

Was die KI da generiert hat, scheint so nur in Teilen zu funktionieren:

Code: Alles auswählen

<section data-bs-version="5.1" 
    class="navbar-main menu menu3 navbar-dropdown navbar-fixed-top" 
    group="Menu" 
    plugins="DropDown, TouchSwipe" 
    always-top="" 
    global="true" 
    once="header" 
    not-draggable="" 
    position-absolute=""
    mbr-id="menue-global-custom"
    mbr-global-is="header">