Mega Menü

Anderes Beispiel für ein Bootstrap Mega Menü in Mobirise

Mega Navigationsleiste

Beispiel für ein kostenpflichtiges Mega-Menü,
das Ihr bei menucool.com downloaden und kaufen könnt.

Diese Seite zeigt den Einbau in Mobirise als Beispiel. Guckt Euch auch dieses kostenlose Bootstrap-Mega-Menü an, das praktisch identisch ist.

Einbau dieser Navigation

Der Einbau in Mobirise ist denkbar einfach

JavaScript Datei aus dem Download.

Bitte kopiert Euch das Verzeichnis "ddmenu" aus dem Download in das Stammverzeichnis Eures Mobirise Projektes in das lokale und das Serververzeichnis und setzt den Verweis zur JavaScript-Datei in die Seiteneinstellungen:

> Menü > Seiten > Zahnrad-Einstellungen > Bereich "End of <body> code"

<script src="ddmenu/ddmenu.js" type="text/javascript"></script> 

Das Menu selbst habe ich in den "Code Editor" von einem einfachen Textblock von Mobirise, anstelle des Beispiel-Textes, und den Inhalt der CSS-Datei "ddmenu.css" aus dem Download in den rechten Bereich "CSS Editor" kopiert.

Die Eigenschaft z-index habe ich in der ID "#ddmenu ul" von:

z-index: 999999990;
auf
z-index: 1000;

herunter gesetzt, da dieser z-index zu hoch für Mobirise ist. Die gesamte Werkzeugleiste wird sonst verdeckt.

Die DIVs mit den CSS-Klassen der Breite des Textblocks habe ich im "HTML Editor" entfernt und um die Navi die Bootstrap class="container-fluid" gesetzt, damit dieser Container auf der vollen Bildschirmbreite dargestellt wird.

Ich habe hier nachträglich diese Menüleiste noch fixiert, also auf eine "position: sticky" gesetzt. Ich habe dafür das gleiche Script wie im anderen Beispiel meiner Menüleiste verwendet und beschrieben.

Im ersten Dropdown Menü "Unde Omnis" wird auch ein Video dargestellt, das ich mit einem ganz normalen Video-Tag eingebaut habe.



Mega Menu

© Copyright Mobirise-Tutorials


Datenschutzregeln