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

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: ?

- 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

- 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

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

Vous 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

Voici 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)

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..

- 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)

Ici 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)

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

Cadenas:

Ici vous pouvez définir quel groupe est autorisé à voir ce contenu.

- 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"

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.

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

Paramétrage des menus:

- 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:

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:

- 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

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

Hauteur de la barre de menu :

Bordures:

- 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

Coins arrondis:

- Rayon en haut à gauche: valeur de 0 à 100 px

- Rayon en haut à droite: Wvaleur de 0 à 100 px

- Rayon en bas à droite: valeur de 0 à 100 px

- Rayon en bas à gauche: valeur de 0 à 100 px

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

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

Alignement

- A gauche
- A droite
- Centré

Espace intérieur

- Espace intérieur à droite : de 0 px jusqu'à 100 px

- Espace intérieur à gauche: de 0 px jusqu'à 100 px

Marges - Limites

- Marge externe à droite: de 0 px jusqu'à 100 px

- Marge externe à gauche: de 0 px jusqu'à 100 px

3.4 Menu principal

Hauteur du menu principal (hauteur du bouton)

- Hauteur: de 30 px jusqu'à 100 px

Bordures (autour du bouton)

- Largeur de la bordure: de 0 px 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

Arrondir des angles : (cadre autour du bouton)

- Rayon en haut à gauche: valeur de 0 jusqu'à 100 px

- Rayon en haut à droite: Wvaleur de 0 jusqu'à 100 px

- Rayon en bas à droite: valeur de 0 jusqu'à 100 px

- Rayon en bas à gauche: valeur de 0 jusqu'à 100 px

Arrière plan (du bouton)

- 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

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

- Grandeur de la police: de 0 px jusqu'à 100 px

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

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

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)

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)

Espace intérieur (dans le bouton)

- Espace intérieur à droite: de 0 px jusqu'à 100 px

- Espace intérieur à gauche: de 0 px jusqu'à 100 px

Marge

Espace extérieur / Limites (dans le bouton)

- Marge externe à droite: de 0 px à 100 px

- Marge externe à gauche: de 0 px à 100 px

Box-Shadow (ombrage autour du bouton)

- 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

3.5 Menu principal - Effet hover

Couleur du texte (Bouton hover)

- Couleur : Palette de couleur

(choix de la couleur)

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)

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)

- 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)

3.6 Sous-menu

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

- 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

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

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

- Rayon en haut à gauche: valeur de 0 jusqu'à 100 px

- Rayon en haut à droite: valeur de 0 jusqu'à 100 px

- Rayon en bas à droite: valeur de 0 jusqu'à 100 px

- Rayon en bas à gauche: valeur de 0 jusqu'à 100 px

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)

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)

- Grandeur de la police: de 0 px jusqu'à 100 px

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

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

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)

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

(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)

Espace 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: de 0 px jusqu'à 100 px

- Espace intérieur à droite: de 0 px jusqu'à 100 px

- Espace intérieur en bas: de 0 px jusqu'à 100 px

- Espace intérieur à gauche: de 0 px jusqu'à 100 px

Remplissage 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: de 0 px jusqu'à 100 px

- Espace intérieur à droite: de 0 px jusqu'à 100 px

- Espace intérieur en bas: de 0 px jusqu'à 100 px

- Espace intérieur à gauche: de 0 px jusqu'à 100 px

3.7 Sous Menu - effet over

(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)

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

3.9 Personnaliser - Styles de contenu

Ici, 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 : →

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

date création document : 21 /10/2014

haut de page