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

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:

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

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

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)

- Cadenas : Ici vous pouvez décider quel groupe à le droit de voir 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:


- Insertion d'un Icône : Ici vous pouvez insérer un icône individuel pour chaque point de la navigation
- 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
?
Après avoir choisit un icône pour votre onglet dans le menu, voici à quoi celà peut ressembler.

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

3.2 Options


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:

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

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


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


- 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:
- Wvaleur de 0 à 100 px
valeur de 0 à 100 px
- 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 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

- A gauche
- A droite
- Centré

Espace intérieur
-
- Espace intérieur à gauche

Marges - Limites
- Marge externe à droite
- Marge externe à gauche
3.4 Menu principal


- Hauteur: de 30 px jusqu'à 100 px

- 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

- Wvaleur de 0 jusqu'à 100 px
valeur de 0 jusqu'à 100 px
- valeur de 0 jusqu'à 100 px
Arrière plan (du bouton)

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

Espace extérieur / Limites (dans le bouton)
- Marge externe à droite
- Marge externe à gauche

- 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

Couleur du texte (Bouton hover)

- Couleur : Palette de 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)
- 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

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



- 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)
- valeur de 0 jusqu'à 100 px
valeur de 0 jusqu'à 100 px
- 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)

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

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

- 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

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

(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

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


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
- Liens / Police: Le text où est mis le lien
- Liens / Arrière plan: Couleur de

- 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