Logo
blockHeaderEditIcon
Worldsoft Logo
Login
blockHeaderEditIcon
Menu
blockHeaderEditIcon

 Mega-Menu

Avec le Méga-Menu du Worldsoft-CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu pour les boutons de navigation (Custom Content) vous créez un tout nouveau mode de navigation sur votre site. Le Méga-Menu s'adapte automatiquement aux différents appareils utilisés (Responsive Design).


 Mega Menu - Démarrage des opérations

Pour utiliser le menu méga, les étapes suivantes sont nécessaires

Vous devez tout d'abord installer le "Mega Menu" qui se trouve dans le gestionnaire de module, rubrique Module NON installé pour pouvoir l'utiliser. (Dans la version 2014 du Worldsoft-CMS le "Mega Menu" est installé automatiquement comme menu par défaut.)
Ce "Mega Menu" remplace tous les menus existants - toutes les fonctions sont déjà intégrées et disponible dans ce menu . Les anciens menus ne sont plus nécessaires.

Installer le module: 

Mega-Menu →  Installer                        ws-mega-menu-01


Une demande de confirmation vous est demandé pour valider votre installation.


1.) Créer un nouveau menu

Après avoir installé le module, ouvrez le module. Il ouvre une nouvelle fenêtre pour créer de nouveaux méga-menus:
 


- Donnez un nom dans la boîte de navigation et cliquez sur Ajouter 



Sous Action, vous avez les options suivantes: ?
ws-mega-menu-04

- Editer le Menu
- Cloner le Menu (création d'une copie identique)
- Effacer le menu sélectionné



2.) Vue d'ensemble des options du menu

ws-mega-menu-05

- Nom: Dans ce champ vous pouvez modifier le nom des menus

- Enregistrer le Menu : Bouton pour enregistrer les modifications.

 

3.) Explication des zones individuelles

3.1 Structure du Menu   

ws-mega-menu-07
 


Pages

Vous pouvez ajouter des boutons de navigation individuel dans n'importe quel ordre de la structure:  

- Cocher la case à côté du nom de la navigation pour le sélectionner 

- Sélectionner tout (Select all): Sélectionne tous les éléments de navigation  en un seul clic


- Cliquez sur le bouton "Ajouter au menu" pour ajouter les points sélectionnés.


 


Liens 

ws-mega-menu-09Vous pouvez utiliser des URL pour créer des points de navigation:

- URL http:// : Mettez un nom dans le champ "URL"

- Navigations-Label: Mettez le nom désiré pour ce point de navigation.

- Cliquez sur le bouton "Ajouter au menu" pour ajouter ce point de navigation.







 


 

Aperçu de la structure

ws-mega-menu-10Voici les éléments de navigation énumérés qui sont ajoutés. Ils peuvent être déplacés par glisser-déposer avec la souris, et vous pouvez modifier la position et l'ordre des points de navigation facilement.
 
Si vous voulez un bouton de navigation (niveau 2) comme un sous-menu, faites-le glisser légèrement en le décalant vers la droite sous le bouton.
 
Vous pouvez procéder de la même façon si vous désirez mettre un sous-menu au niveau 2. Comme celà vous pour vez mettre en place plusieurs niveau (Niveau 3, Niveau 4, Niveau 5, Etc...)



 

Options des points de navigation (page)


 
ws-mega-menu-14
Si vous cliquez sur  "page" les options suivantes apparaissent:

- Cadenas : Ici vous pouvez décider quel groupe à le droit de voir ce bouton de navigation..


ws-mega-menu-11- Enlever: Effacement de ce bouton de navigation.

- Ajouter : Ajouter sous-élément défini par l'utilisateur.

- Multiple lignes : Mettre le texte du bouton sur deux lignes



 



Contenu personnalisé (Custom Content) 

ws-mega-menu-12Ici vous pouvez définir le "contenu personnalisé" .


- Gérer quel groupe peut lire ce contenu.

- Le supprimer

 

.



 


 


- Edition du contenu avec l'éditeur (Fck-Editeur)

ws-mega-menu-13

Réglages et mise en forme de ce contenu dans la navigation, voir le Point 3.9 → Style du contenu












 

Cadenas:

ws-mega-menu-14
 Ici vous pouvez définir quel groupe est autorisé à voir ce contenu.
 




 

ws-mega-menu-16
- Insertion d'un Icône : Ici vous pouvez insérer un icône individuel pour chaque point de la navigation 
- Un clic sur l'icône "Ajouter"  ouvre une liste avec différentes icônes.












 



- Icone personnalisé en cliquant sur "Défini par l'utilisateur"
ws-mega-menu-16-1
1. Cliquez sur "Charger image" pour télécharger une nouvelle image

 2. Suite au téléchargement cliquez sur "Ajouter"

3. A l'issue, sauvegardez vos modifications en cliquant "Enregistrer 
menu".


?
 

Après avoir choisit un icône pour votre onglet dans le menu, voici à quoi celà peut ressembler.

ws-mega-menu-17

Pour les ajustements des icône dans le bouton voir sous le  Point 3.4 Menu Principal →  Icone






NE PAS OUBLIER:

Chaque modification doit être enregistrée en cliquant sur le bouton "Enregistrer menu". 
 


3.2 Options    ws-mega-menu-19


 
Paramétrage des menus:

ws-mega-menu-20
- Orientation :
 1) Vertical
(de haut vers le bas) 
 2) 
Horizontal (de gauche vers la droite)

- Direction du sous-menu:

 1) Vertical
de gauche vers la droite - Vertical de droite vers la gauche
 
 2) Horizontal : Horizontal
haut ou Horizontal bas





 




Animation:
 
ws-mega-menu-21
Animation: Aucune / Fondu / Glisser / Zoom / Elastique 

Durée: De 0 ms jusqu'à 500 ms (ms = millisecondes)

Délai: De 0 ms jusqu'à 1000 ms (ms = millisecondes)







 

Comportement pour mobile: 

ws-mega-menu-22
- Dérouler, avec Toggle-Button (*) (avec celà apparait le bouton Responsive Menu)

- Dérouler, sans Toggle-Button (avec celà  le bouton Responsive menu n'APPARAÎT PAS)

- Ne rien faire (C'est le menu normal qui apparaît)

(*) le Toggle-Button est le symbole du menu pour les Smartphone

toggle-button
 

ws-mega-menu-23


 
Réglages de position fixe:
( Ne fonctionne uniquement qu'avec la fonction Navigation Horirizontale activée )

- Utilisez le menu fixe: avec la coche il est activé, sans la coche il est désactivé

- Effet Wrap (Valeur en % (de 0 à 100) 

- Ne rendre fixe qu'au défilement vers le haut: avec la coche il est activé, sans la coche il est désactivé (Sur un smartphone la barre de menu (les 3 barres parallèles) reste en haut de l'écran)

- Marge en haut (px) (donner la valeur en Pixel ) (px) 


 


3.3 Barre de menu ws-mega-menu-24

 

Hauteur de la barre de menu :

ws-mega-menu-25
 

Bordures: 

ws-mega-menu-26- Largeur de la bordure: en Pixel: valeur de 0 jusqu'à 20 px

- Style de bordure:  Plein / Souligné / Pointillé  / Double / Groove 3D/ Inset 3D/ Outset / Ridge 3D

- Couleur de la bordure: Accès à la Palette de couleur pour choisir celle que l'on désire (cliquez sur le carré de couleur)

- Position de bordure: en haut / à droite / en bas / à gauche





 


ws-mega-menu-27

Coins arrondis:

Wvaleur de 0 à 100 px

valeur de 0 à 100 px

valeur de 0 à 100 px

 

ws-mega-menu-28



Arrière plan

- Arrière plan plein:
(utilise toute la surface) (Oui / Non)

- Couleur d'arrière plan: accès à la palette de couleur

- Arrière plan dégradé: (Oui / Non)

 couleur initiale de l'arrière plan : accès à la palette de couleur. 
 couleur finale de l'arrière plan : accès à la palette de couleur


- Image d'arrière plan:   la coche = Oui / Non
Charge une image de fond
(téléchargement d'une de vos images pour l'arrière plan)

Répétition de l'arrière plan: [ x ] (horizontal) / [ y ] (vertical) / [ yx ] (horizontal et vertical) / Aucun (pas de répétition)

Position de l'arrière plan:  X : Axe  / Y : Axe / unité en % ou en px 
 

ws-mega-menu-29

Ombre barre de menu

 
- Longueur Horizontale : -20 px jusqu'à +20 px

- Longueur verticale  -20 px jusqu'à +20 px

- Flou - Distance
: 0 px jusqu'à 100 px

- Taille de l'ombre: 0 px jusqu'à 100 px

- Couleur de l'ombre: Accès à la palette de couleur (choix de couleur)

- Ombre interne: Ombrage à l'intérieur de la box


 


ws-mega-menu-30
Alignement

- A gauche
- A droite
- Centré





ws-mega-menu-31

Espace intérieur



Espace intérieur à gauche





ws-mega-menu-32

Marges - Limites

- Marge externe à droite


- Marge externe à gauche



 


3.4 Menu principal ws-mega-menu-33


 

Hauteur du menu principal (hauteur du bouton
ws-mega-menu-34

-  Hauteur: de 30 px jusqu'à 100 px 




 

Bordures (autour du bouton) 

ws-mega-menu-35- Largeur de la bordurePlein / traitillé / Pointillé  / Double / Groove 3D/ Inset 3D/ Outset / Ridge 3D

Couleur de la bordure: Accès à la Palette de couleur pour choisir celle que l'on désire (cliquez sur le carré de couleur)

Position de bordure: en haut / à droite / en bas / à gauche









 


ws-mega-menu-36Arrondir des angles : (cadre autour du bouton)

Wvaleur de 0 jusqu'à 100 px

valeur de 0 jusqu'à 100 px

valeur de 0 jusqu'à 100 px





 
 

Arrière plan (du bouton) 

ws-mega-menu-37
- Arrière plan plein: (utilise toute la surface) (la coche = Oui / Non)

Couleur d'arrière plan: accès à la palette de couleur

Arrière plan dégradé: (Oui / Non)

 couleur initiale de l'arrière plan : accès à la palette de couleur. 
 couleur finale de l'arrière plan : accès à la palette de couleur


- Image d'arrière plan:   la coche = Oui / Non
Charge une image de fond 
(téléchargement d'une de vos images pour l'arrière plan)

Répétition de l'arrière plan: [ x ] (horizontal) / [ y ] (vertical) /
 [ yx ] (horizontal et vertical) / Aucun (pas de répétition)

Position de l'arrière plan:  X : Axe  / Y : Axe / unité en % ou en px
 











 

ws-mega-menu-38


Police d'écriture (dans le bouton) 

- Type de police: (Choix par le menu déroulant)

Style de police: Normal / Italique / Oblique (penché)

- Caractère de la police: Normal / Gras /Très Gras / clair 



- Utilisation des caractères en MAJUSCULE (chaque lettre est écrite en MAJUSCULE)










 

ws-mega-menu-39

Ombrage du Texte (dans le bouton) 
 
- Longueur Horizontale :  
de -20 px à +20 px

- Longueur verticale de -20 px à +20 px

-
Flou - Distance: de 0 px à 100 px

- Couleur de l'ombre: Palette de couleur (choix de la couleur)




 

ws-mega-menu-40


Icône (réglage de l'icone insérée dans le bouton) 

- Taille: 0 px bis 100 px ?

- Couleur: Plalette de couleur (choix de la couleur)

- Position: A Droite / A gauche / Au-Dessus (texte du bouton)





 


ws-mega-menu-41

Espace intérieur (dans le bouton) 

- Espace intérieur à droite


 


Marge 
ws-mega-menu-42


Espace extérieur / Limites (dans le bouton) 

- Marge externe à droite

- Marge externe à gauche






 
 

Box-Shadow (ombrage autour du bouton) 
ws-mega-menu-43- Longueur Horizontale: de  -20 px à +20 px

- Longueur verticale de -20 px à +20 px

- Flou - Distance
: de 0 px à 100 px

- Taille de l'ombre: de 0 px à 100 px


Couleur de l'ombre : Palette de couleur (choix de la couleur)

- Ombre interne: Ombrage à l'intérieur du bouton





 
 

ws-mega-menu-44
3.5 Menu principal - Effet hover 



Couleur du texte (Bouton hover)
ws-mega-menu-45

- Couleur : Palette de couleur 
(choix de la couleur) 





ws-mega-menu-46

Ombre du texte ( hover) (Ombrage du texte lorsque l'on passe sur le bouton avec la souris (hover) 

- Longueur Horizontale :  de - 20px jusqu'à 20 px

- Longueur Verticale: de - 20px jusqu'à 20 px

Flou - Distance : de 0 px jusqu'à 100 px

Couleur de l'ombre: Palette de couleur (choix de la couleur)






ws-mega-menu-47



Hover - Arrière plan (Arrière plan du bouton lorsque l'on passe sur le bouton avec la souris (Hover)
 
- Arrière plan plein: (utilise toute la surface) (coche = Oui / Non)

Couleur d'arrière plan: accès à la palette de couleur

Arrière plan dégradé: (coche = Oui / Non)

 Couleur initiale de l'arrière plan : accès à la palette de couleur. 
 Couleur finale de l'arrière plan : accès à la palette de couleur


- Image d'arrière plan:   la coche = Oui / Non
Charge une image de fond 
(téléchargement d'une de vos images pour l'arrière plan)

Répétition de l'arrière plan: [ x ] (horizontal) / [ y ] (vertical) /
 [ yx ] (horizontal et vertical) / Aucun (pas de répétition)

Position de l'arrière plan:  X : Axe  / Y : Axe / unité en % ou en px





 
 

Hover - Couleur de la bordure (couleur du cadre du bouton lors du passage de la souris (over)
s-mega-menu-48
 

Couleur: Palette de couleur (choix de la couleur)

 
- Icone :  (Couleur de l'icone lors du passage de la souris (over)


Couleur : Palette de couleur (choix de la couleur)





ws-mega-menu-53



 
3.6 Sous-menu
ws-mega-menu-49

 

Bordure du sous-menu (encadré du bouton des menus à partir du niveau 2 )

ws-mega-menu-50

Largeur de la bordure: en Pixel: valeur de 0 jusqu'à 20 px

Style de bordure:  Plein / Traitillé / Pointillé  / Double / Groove 3D/ Inset 3D/ Outset / Ridge 3D

Couleur de la bordure: Accès à la Palette de couleur pour choisir celle que l'on désire (cliquez sur le carré de couleur)

Position de bordure: en haut / à droite / en bas / à gauche






 



ws-mega-menu-51
Bordure d'éléments du sous-menu (encadré  du bouton du sous-menu à partir du niveau 2)

Largeur de la bordure: en Pixel: valeur de 0 jusqu'à 20 px
Style de bordure:  Plein / Souligné / Pointillé  / Double / Groove 3D/ Inset 3D/ Outset / Ridge 3D

Couleur de la bordure: Accès à la Palette de couleur pour choisir celle que l'on désire (cliquez sur le carré de couleur)

Position de bordure: en haut / à droite / en bas / à gauche





 



ws-mega-menu-52
Arrondi du sous-menu (Arrondi de l'ensemble des arrondis de tous les boutons à partir du niveau 2)

valeur de 0 jusqu'à 100 px

valeur de 0 jusqu'à 100 px

valeur de 0 jusqu'à 100 px




 


ws-mega-menu-53

Icone (Dans la sous navigation à partir du niveau 2)

Grandeur : de 0 px jusqu'à 100 px ?

- Palette de couleur (choix de la couleur)

Position: à droite / à gauche / au-dessus (du texte du bouton)




 


ws-mega-menu-54
Police  (dans le bouton du sous-menu à partir du niveau 2)

Type de police: (Choix par le menu déroulant)

Style de police: Normal / Italique / Oblique (penché)

Caractère de la police: Normal / Gras /Très Gras / plus clair (léger)



- Utilisation des caractères en MAJUSCULE (chaque lettre est écrite en MAJUSCULE)








 


ws-mega-menu-55
Ombre du texte (dans le bouton du sous-menu à partir du niveau 2)

- Longueur Horizontale :  de - 20px jusqu'à 20 px

- Longueur Verticale: de - 20px jusqu'à 20 px

Flou - Distance : de 0 px jusqu'à 100 px

Couleur de l'ombre: Palette de couleur (choix de la couleur)


 

ws-mega-menu-56
Ombre du sous-menu (Ombrage autour de l'ensemble de tous les boutons des sous-menu à partir du niveau 2)

- Longueur Horizontale :  de - 20px jusqu'à 20 px

- Longueur Verticale: de - 20px jusqu'à 20 px

Flou - Distance : de 0 px jusqu'à 100 px

Couleur de l'ombre: Palette de couleur (choix de la couleur)

- Ombre interne: Ombrage à l'intérieur du bouton (la coche = Oui / Non)










 
Arrière-plan du sous-menu 

ws-mega-menu-57(Arrière plan de l'ensemble des bouton du sous-menu à partir du niveau 2)
 
- Arrière plan plein: (utilise toute la surface) (coche = Oui / Non)

Couleur d'arrière plan: accès à la palette de couleur

Arrière plan dégradé: (coche = Oui / Non)

 couleur initiale de l'arrière plan : accès à la palette de couleur. 
 couleur finale de l'arrière plan : accès à la palette de couleur


- Image d'arrière plan:   la coche = Oui / Non
Charge une image de fond (téléchargement d'une de vos images pour l'arrière plan)

Répétition de l'arrière plan: [ x ] (horizontal) / [ y ] (vertical) /
 [ yx ] (horizontal et vertical) / Aucun (pas de répétition)

Position de l'arrière plan:  X : Axe  / Y : Axe / unité en % ou en px










 


ws-mega-menu-58Espace intérieur d'élément du sous-menu 

(Espace intérieur dans le bouton du sous-menu à partir du niveau 2)

Espace intérieur en haut



Espace intérieur en bas



 


ws-mega-menu-59Remplissage boîte sous-menu 

(espace intérieur dans tous les bouton de tous les sous-menu à partir du niveau 2 )

Espace intérieur en haut



Espace intérieur en bas


 



3.7 Sous Menu - effet over ws-mega-menu-60

(Paramétrage de l'effet " over " dans le sous-menu à partir du niveau 2)

(Les réglages de ces options sont identiques au chapitre  3.5 → Effet Over - Menu principal)
 


3.8 Style défini par l'utilisateur (CSS) ws-mega-menu-61
 

 
ws-mega-menu-62
- Ajout du code de style personnalisée (nécessite des connaissances avancées dans le CSS)



 

3.9 Personnaliser - Styles de contenu 

ws-mega-menu-63Ici, les réglages suivants peuvent être faits pour personnaliser les styles de contenu :

 

- Police: Pour le texte de contenu

Arrière plan: Pour la zone affichée dans le bouton
- Liens: Pour tous les éléments liés

- Liens / Police: Le text où est mis le lien 

- Liens / Arrière plan: Couleur de 
l'arrière plan de l'élément lié


Liens over: Effet "over" de l'élément où est mis le lien

- Lien Actif:
Est l'état d'affichage pour l'élément lié

- Lien visité: Si un lien a déjà été visité


 


NE PAS OUBLIER: 

Chaque modification, dans chaque section,
doit être sauvegardé par l'intermédiaire du bouton
 :  → 
ws-mega-menu-08


 

Beaucoup de succès avec le Méga-Menu du Worldsoft-CMS!


date création document : 21 /10/2014

haut de page

Pseudo :
User-Login
Votre E-mail
*