*
Login-Header
blockHeaderEditIcon
Social-media-Header
blockHeaderEditIcon
Worldsoft-Logo
blockHeaderEditIcon
Worldsoft Logo
Menu
blockHeaderEditIcon
Zurück zur Übersicht
Druckoptimierte Version
 

 Mega-Menü

Mit dem Mega-Menü des Worldsoft-CMS können Sie Navigation-Menüs beliebig zusammenstellen. Sie können so viele Navigations-Menüs individuell zusamenstellen wie Sie möchten und optisch anpassen. Mit eigenen Inhalten für Navigationsbuttons (Custom Content) kreieren Sie ein völlig neues Navigations-Erlebnis auf Ihrer Website.
 


 Mega-Menü - Anleitungen zur Bedienung


Um das Mega-Menü zu nutzen sind folgende Schritte erforderlich.

Sie müssen das Mega-Menü in der Modul-Verwaltung unter der Rubrik "noch nicht installierte Module" zuerst installieren. ( Ist ab Worldsoft CMS Version 2014 automatisch als Standard Menü installiert.) Das Mega-Menü ersetzt alle bestehenden Menüs - alle Funktionen sind in diesem Menü bereits integriert und verfügbar. Damit sind die alten Menüs nicht mehr erforderlich.

Modul installieren: 

Mega-Menü →  Installieren                         
 


1.) Neues Menü anlegen

Nachdem Sie das Modul installiert haben, öffnen Sie das Modul an. Es öffnet sich das Erstellungsfenster um neue Mega-Menüs anzulegen: 


- Geben im Feld den Namen der Navigation ein und klicken Sie auf Hinzufügen 



Unter Aktion haben Sie folgende Optionen: 

- Menü Bearbeiten
- Menü klonen (eine Kopie anlegen)
- das gewählte Menü löschen



2.) Übersicht der Menü Optionen




- Name: in diesem Feld können Sie den Namen des jeweiligen Menüs ändern
- Menü speichern: Speicherbutton um Änderungen zu speichern.

 

3.) Erklärung zu den einzelnen Bereichen

3.1 Menüstruktur   


Seiten

Sie können einzelne
Navigationsbuttons in beliebiger Reihenfolge der Struktur hinzufügen:  

- Klicken Sie neben dem Navigations-Namen in das Kontrollkästchen um es auszuwählen 

- Select all:  Mit einem Klick alle Navigationspunkte auf einmal selektieren


- Klicken Sie den Button "Zum Menü hinzufügen" um die ausgewählten Punkte hinzuzufügen.









Links 

Hier können Sie URL's verwenden um Navigationspunkte anzulegen:
- URL http:// : Geben Sie in das Feld eine URL ein
- Navigations-Label: Geben Sie hier den gewünschten Namen für diesen Navigationspunkt ein

- Klicken Sie den Button "Zum Menü hinzufügen" um diesen Navigationspunkt hinzuzufügen.









Struktur-Vorschau 

Hier sind die hinzugefügten Navigationspunkte aufgeführt, diese können per Drag and Drop mit der Maus verschoben werden, somit können Sie die Position und Reihenfolge der Navigationspunkte ganz einfach verändern.
 
Wenn Sie einen Navigationsbutton als Untermenü möchten, schieben Sie diesen etwas versetzt (nach rechts) unter den davor liegenden Button, somit ist dann dieser Button dem darüberliegendem unterstellt (Level 2.) .
 
Sie können diese Unterstellungen beliebig setzen, wenn Sie dem Level 2 einen Button darunter setzen, ist dieser dann Level 3.  > So können Sie mehrere Levels einrichten (Level 3 / Level 4 / Level 5 ect.)




HTML zulassen

Diese Funktion erlaubt Ihnen HTML Formatierungen der einzelnen Menü-Buttons. 
Sie können jegliche HTML Formatierungen im "Navigations-Label" einfügen um den Button
nach belieben zu gestalten und über HTML zu formatieren.


Die Formatierung können Sie gleich im Navigations-Label Feld einfügen (halten Sie sich an die genauen HTML Formatierungen) .


Setzten Sie vor der Eingabe der Formatierung das Häckchen bei:  HTML zulassen












Die HTML Formatierung wird auf der Navigation übernommen:




Navigationspunkt-Optionen (page)
Klicken Sie auf "page" darunter öffnen sich folgende Optionen:

Vorhängeschloss: Hier können Sie festlegen welche Gruppe diesen Navigationsbutton sehen darf.

- Entfernen: Diesen Navigationsbutton aus der Struktur löschen.

Benutzerdefiniertes Unterelement hinzufügen:







 


Custom Content (Benutzerdefinierter Inhalt) 

Hier können Sie dem Navigationsbutton einen Benutzerdefinierten
Inhalt "Custom Content" hinzufügen bzw. mit dem FCK Editor  "Bearbeiten" oder diesen Button wieder "Entfernen".







- Bearbeiten: Des Inhaltes mit dem Editor

Einstellungen und Formatierungen für diese Benutzerdefinierte Inhaltnavigation finden Sie unter dem 

Punkt 3.9 → Benutzerdefinierte Inhalts-Stile














- Vorhängeschloss: Hier können Sie festlegen welche Gruppe diesen Inhalt sehen darf.
 








Icon hinzufügen: Hier können Sie dem jeweiligen Navigationspunkt ein individuelles Icon hinzufügen 
 
- Nach Klick auf "Icon hinzufügen" öffnet sich eine Liste mit verschiedenen Icons.










- Benutzerdefinerte Icons zur Navigation hochladen, klicken auf "Benutzerdefiniert" 

1. klicken Sie auf "Bild laden"  um ein Bild auszuwählen oder ein neues hochzuladen

2. nachdem Sie das Bild ausgewählt haben, klicken Sie auf "Hinzufügen"

3. Speichern Sie zum schluss diese Einstellung "Menü speichern"





Nach dem auswählen des Icons sehen Sie diesen Icon beim Button auf der Seite.

Anpassungen zum Icon finden Sie unter den Optionen unter Punkt 3.4 Top-Menü →  Icon (Button Icon Formatieren)







Bitte daran denken:

Jegliche Änderungen müssen zum Schluss immer über diesen Button gespeichert werden:




3.2 Funktionalität    



Menüausrichtung:

- Ausrichtung: Vertikal (von oben nach unten) Horizontal (links nach rechts)

- Ausrichtung Untermenü: Vertikal links nach rechts / Vertikal rechts nach links









Animation:
 
Animation: Kein / Verblasen / Slide / Zoom / Elastisch 

Dauer: Von 0 ms bis 500 ms (ms = millisekunden)

Verzögerung: Von 0 ms bis 1000 ms (ms = millisekunden)








Verhalten auf Mobilgeräten: 
 
- Ausklappen, mit Toggle-Button (hiermit erscheint das Responsive Menü)
- Ausklappen, ohne Toggle-Button (hiermit erscheint das Responsive Menü NICHT)
- Nichts machen (hiermit erscheint kein Responsive Menü, das eingestellte Menü bleibt stehen)




Sticky-Einstellungen:
( Funktioniert nur mit horizontaler Navigations Ausrichtung! )

- Sticky-Menü verwenden: Sticky ein oder ausschalten

- Bilschirmausfüllung Sticky (Werte in % eingeben 0 bis 1000) 

- Sticky nur beim Hochscrollen anzeigen: ein / aus

- Sticky-Aussenabstand oben (Wert in Pixel eingeben) (px) 








3.3 Menüleiste 



Rahmen: 

- Breite des Randes: In Pixel: Wert 0 bis 20 px

- Rahmenstil: Durchzogen / Gestrichelt / Gepunktet / Verdoppelt / Groove 3D/ Inset 3D/ Beginn / Ridge 3D

- Rahmenfarbe: Farbpicker zur Auswahl der Farbe

- Randoptionen: Oben / Rechts / Unten / Links












Ecken runden:

Werte 0 bis 100 px

Werte 0 bis 100 px

Werte 0 bis 100 px










Hintergrund

- Durchgehender Hintergrund:
(ganze Fläche gedeckt) 

Hintergrundfarbe: Farbpicker

- Verlauf Hintergrund: Starfarbe des Verlaufes / übergang in die Schlussfarbe

- Bild-Hintergrund: Bild laden
(laden Sie ein eigenes Bild für den Hintergrund hoch)

Hintergrund wiederholen: [ x ] (horizontal) / [ y ] (vertikal) / [ yx ] (gesamt) / Keine Wiederholung

Hintergrundposition:  X : Achse  / Y : Achse / Einheit in % oder px 




















Menüleisten-Schatten

 
- Horizontale Länge: -20 px bis +20 px

 -20 px bis +20 px

Unschärfe-Distanz: 0 px bis 100 px

Schattengrösse: 0 px bis 100 px

- Schattenfarbe: Farbpicker (Farbauswahl)

- Schatten-Inset: 
Schatten ins Innere der Box 









Anordnung

- Links
- Rechts
- Zentriert





Innenabstand










Aussenabstand - Begrenzungen












3.4 Top-Menü 

Topmenü-Höhe (Button Höhe) 
Mit dieser Einstellung können Sie die Vertikale positionieren des Menüs in der Menüleiste beeinflussen.

- Höhe: 30 px bis 100 px

- Zeilenhöhe: 30p x bis 100 px

- Topmenü vertikale Position: px variabel je nach möglichen Platz








Rahmen (um den Button herum) 

Rahmenfarbe: Farbpicker (Farbauswahl)

- Randposition: Oben / Rechts / Unten / Links












Ecken runden (Rahmen um den Button abrunden) 


















Hintergrund (der Buttons) 

- Durchgehender Hintergrund: (ganze Fläche gedeckt) 

- Hintergrundfarbe: Farbpicker (Farbauswahl) 

Verlauf Hintergrund: Starfarbe des Verlaufes / übergang in die Schlussfarbe

- Bild-Hintergrund: Bild laden 
(laden Sie ein eigenes Bild für den Hintergrund hoch)

Hintergrund wiederholen: [ x ] (horizontal) / [ y ] (vertikal) / [ yx ] (gesamt) / Keine Wiederholung

Hintergrundposition:  X : Achse  / Y : Achse / Einheit in % oder px 




















Schriftart (in den Buttons) 

Schriftart: (Auswahl gem. Dropdownmenü)

Schriftstil: Normal / Kursif (schief)

Schriftgewicht: Normal / Fett / Fetter / Heller

Farbpicker (Farbauswahl)

GROSSBUCHSTABEN benutzen (jeder Buchstabe wird in GROSS geschrieben)
















Textschatten (in den Buttons) 
 
- Horizontale Länge: -20 px bis +20 px

 -20 px bis +20 px

Unschärfe-Distanz: 0 px bis 100 px

Schattenfarbe: Farbpicker (Farbauswahl)










Icon (Button Icon Formatieren) 

- Grösse: 0 px bis 100 px 

- Farbe: Farbpicker (Farbauswahl)

- Position: Links / Rechts / Oberhalb (des Button Textes)











Innenabstand (im Button) 










Aussenabstand - Begrenzungen (im Button) 












Box-Schatten (um den Button herum) 

- Horizontale Länge: -20 px bis +20 px

 -20 px bis +20 px

Unschärfe-Distanz: 0 px bis 100 px

- Schattengrösse: 0 px bis 100 px


Schattenfarbe: Farbpicker (Farbauswahl)

Schatten-Inset: Schatten ins Innere der Box









3.5 Hover-Effekt Top-Menü 


Hovertextfarbe (Button Hover)

- Farbe: Farbpicker (Farbauswahl) 







Hovertextschatten (Schatten im Text beim Hover) 

- Horizontale Länge:  - 20px bis 20 px

Vertikale Länge: - 20px bis 20 px

Unschärfe-Distanz: 0 px bis 100 px

Schattenfarbe: Farbpicker (Farbauswahl)











Hover-Hintergrund (Button Hintergrund beim Hover)

- Durchgehender Hintergrund: (ganze Fläche gedeckt) 

Hintergrundfarbe: Farbpicker (Farbauswahl) 

Verlauf Hintergrund: Starfarbe des Verlaufes / übergang in die Schlussfarbe

- Bild-Hintergrund: Bild laden 
(laden Sie ein eigenes Bild für den Hintergrund hoch)

Hintergrund wiederholen: [ x ] (horizontal) / [ y ] (vertikal) / [ yx ] (gesamt) / Keine Wiederholung

Hintergrundposition:  X : Achse  / Y : Achse / Einheit in % oder px 




















Rahmenfarbe Hover (Farbe des Buttonrahmens beim Hover)

Farbe: Farbpicker (Farbauswahl) 







Icon (Farbe des Icons beim Hover)

Farbe: Farbpicker (Farbauswahl) 





3.6 Untermenü 


Rand Untermenübox (Umrandung des gesamten Menüs ab Level.2 )

Breite des Randes: 0 px bis 20 px

Rahmenfarbe: Farbpicker (Farbauswahl)

Randposition: Oben / Rechts / Unten / Links













Rahmen Untermenü-Element (Umrandung der Unterbuttons ab Level.2)

Breite des Randes: 0 px bis 20 px

Rahmenfarbe: Farbpicker (Farbauswahl)

Randposition: Oben / Rechts / Unten / Links










Untermenübox-Eckenradius (Abrunder der gesamten Umrandungs Box ab Level.2)


















Icon (In der Unternavigation ab Level.2)

Grösse: 0 px bis 100 px 

Farbe: Farbpicker (Farbauswahl)

Position: Links / Rechts / Oberhalb (des Button Textes)












Schriftart (in den Buttons Untermenü ab Level.2)

Schriftart: (Auswahl gem. Dropdownmenü)

Schriftstil: Normal / Kursif (schief)

Schriftgewicht: Normal / Fett / Fetter / Heller

Farbpicker (Farbauswahl)

GROSSBUCHSTABEN benutzen (jeder Buchstabe wird in GROSS geschrieben)

















Textschatten (in den Buttons Untermenü ab Level.2)

- Horizontale Länge:  - 20px bis 20 px

Vertikale Länge: - 20px bis 20 px

Unschärfe-Distanz: 0 px bis 100 px

Schattenfarbe: Farbpicker (Farbauswahl)












Untermenü-Boxenschatten (Schatten um die gesamte Box Untermenü ab Level.2)

- Horizontale Länge: -20 px bis +20 px

 -20 px bis +20 px

Unschärfe-Distanz: 0 px bis 100 px

Schattengrösse: 0 px bis 100 px


Schattenfarbe: Farbpicker (Farbauswahl)

Schatten-Inset: Schatten ins Innere der Box












Untermenü-Box-Hintergrund 

(Hintergrund der gesamte Box Untermenü ab Level.2)

- Durchgehender Hintergrund: (ganze Fläche gedeckt) 

Hintergrundfarbe: Farbpicker (Farbauswahl) 

Verlauf Hintergrund: Starfarbe des Verlaufes / übergang in die Schlussfarbe

- Bild-Hintergrund: Bild laden 
(laden Sie ein eigenes Bild für den Hintergrund hoch)

Hintergrund wiederholen: [ x ] (horizontal) / [ y ] (vertikal) / [ yx ] (gesamt) / Keine Wiederholung

Hintergrundposition:  X : Achse  / Y : Achse / Einheit in % oder px 



















Innenabstand Untermenü-Element 

(Innenränder in den Buttons Untermenü ab Level.2)















Innenabstand Untermenübox 

(Innenränder in der gesamten Box Untermenü ab Level.2)














3.7 Hovereffekt Untermenü

(Einstellungen für den Hover im Untermenü ab Level.2)

(Die gleichen Einstellungs Optionen wie bei 3.5 → Hover-Effekt Top-Menü)



3.8 Benutzerdefinierter Stil (CSS) 

- Benutzerdefinierten Style Code hinzufügen (für fortgeschrittene mit Kenntnis)







3.9 Benutzerdefinierte Inhalts-Stile 

Hier können für die benutzerdefinierten Inhalts-Stile folgende Anpassungen vorgenommen werden:

-
 Schriftart: Für den Textinhalt

Hintergrund: Für die Angezeigte Fläche im Button

- Links: Für alle verlinkten Elemente

- Links / Schriftart: Der verlinkten Texte 

- Links / Hintergrund: Hintergrundfarbe des verlinkten Elements

Links Hover: Hover Effekt bei verlinktem Element

- Links Aktiv: Ist Anzeige Zustand für verlinktes Element

- Links Besucht: Wenn ein Link bereits besucht worden ist






4.0 Menü für Mobilgerät (Toggle - Menü)     

Hir können die Höhe der Buttons und die Zeilenhöhe (Zeilenabstand) definiert werden.

Menü-Höhe 0px bis 500px

- Zeilenhöhe: 0px bis 500px



- Schriftfarbe: Farbpicker (Farbauswahl)








Innenabstand im Toggle Menü: 

Hier können Sie die Innenabstände der Buttons im Toggle-Menü einstellen,
damit bewirken Sie zBsp. das die Buttons nicht links am Rand stehen.














Textausrichtung:

Links / Zentriert / Rechts


Hintergrund: 

- Durchgehende Hintergrundfarbe

- Verlauf Hintergrund: Startfarbe / Schlussfarbe











Hintergrund Grösse:

(Bild / Logo im Menü Mobilegerät)

Hier können Sie die Grösse des Hintergrundbildes (Logos) in der Menüleiste für das Mobile Menü Toggle-Menü festlegen:

der Wert X : > entspricht der Breite
der Wert Y : > entspricht der Höhe



Linienfarbe:

- Farbe: Farbpicker (Farbauswahl)







Hover-Hintergrund: 


- Durchgehende Hintergrundfarbe





- Verlauf Hintergrund: Startfarbe / Schlussfarbe













Bitte daran denken: 
Jegliche Änderungen müssen zum Schluss immer über diesen Button gespeichert werden:  → 


 

Viel Erfolg mit dem Mega-Menü des Worldsoft-CMS!


backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon
Benutzername:
User-Login
Ihr E-Mail