Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Transcription

1 1 Mega Menu Avec le 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 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 "Méga 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. Nota : Les anciens menus ne sont plus nécessaires. Installer le module: Mega Menu Installer Une demande de confirmation vous est demandée pour valider votre installation.

2 2 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 1) Nom: Dans ce champ vous pouvez modifier le nom des menus 2) Enregistrer le Menu : Bouton pour enregistrer les modifications.

3 3 3.) Explication des zones individuelles 3.1 Structure du Menu Pages Vous pouvez ajouter des boutons de navigation individuelle 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 1) Ecrivez ou copiez le lien de l'adresse web du lieu de destination, dans le champ "URL" (Ne pas mettre le il se met automatiquement) 2) Insertion du numéro de Téléphone (format international par ex xx. 3) Insertion de l'adresse courriel: 4) Insertion "Login" Cliquez sur le bouton "Ajouter au menu" pour ajouter ce point de navigation.

4 4 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 en face. Vous pouvez procéder de la même façon si vous désirez mettre un sous menu au niveau 2. Comme cela vous pouvez mettre en place plusieurs niveaux (Niveau 3, Niveau 4, Niveau 5, Etc...) Autoriser l'utilisation du HTML Cette fonction permet le formatage HTML des différents boutons de menu. Vous pouvez insérer n' importe quelle mise en forme dans le «label Navigation" pour le bouton HTML. Par le formatage vous pouvez insérer directement dans le champ "Navigation Nom". (Attention : il faut bien respecter le formatage Html.) Afin de pouvoir utiliser le codage Html, il faut obligatoirement que la case "Autoriser HTML" soit cochée. Le formatage HTML est pris en compte dans la navigation

5 5 Options des points de navigation (page) Si vous cliquez sur "page" les options suivantes apparaissent: 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 Ajouter sous élément défini par l'utilisateur Contenu personnalisé (Custom Content) Ici vous pouvez définir le "contenu personnalisé". Enlever : Supprime cette page "custom_content" Cadenas : Ici vous pouvez décider quel groupe a le droit de voir ce bouton de navigation..

6 6 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 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 choisi un icône pour votre onglet dans le menu, voici à quoi cela peut ressembler.

7 7 Pour les ajustements des icônes 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)

8 8 Comportement pour mobile: 1) Dérouler, avec Toggle Button (*) (avec celà apparait le bouton Responsive Menu) Réduire, 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 2) A Partir d'une largeur d'écran de (choisir la largeur de l'écran à partir de laquelle le Toggle Button doit apparaître pour remplacer le menu "normal"). 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)

9 9 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: valeur de 0 à 100 px Rayon en bas à droite: valeur de 0 à 100 px Rayon en bas à gauche: valeur de 0 à 100 px

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

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

12 Menu principal Hauteur du menu principal (hauteur du bouton) Avec ce réglage vous pouvez influencer la position verticale dans la barre de menu Hauteur Hauteur de ligne Position verticale du menu principal (hauteur en PX variable en fonction de la place.) Bordures (autour du bouton) Largeur de la bordure: de 0 px 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

13 13 Arrondis des angles : (cadre autour du bouton) 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 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

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

15 15 Icône (réglage de l'icône insérée dans le bouton) Taille: 0 px bis 100 px Couleur: Platte de couleur (choix de la couleur) Position: à 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

16 16 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 Over Couleur du texte (Bouton over) Couleur : Palette de couleur (choix de la couleur)

17 17 Ombre du texte (hover) (Ombrage du texte lorsque l'on passe sur le bouton avec la souris (over) 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

18 18 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 Menu principal Actif Effet de survol sur le bouton pour que le visiteur puisse voir où il se trouve La page de réglages est identique à celle du Menu principal Effet hover

19 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 / 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 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

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

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

22 22 Ombre du sous menu (Ombrage autour de l'ensemble de tous les boutons des sous menus à 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 boutons 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

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

24 Sous Menu - effet hover (Paramétrage de l'effet " hover " dans le sousmenu à partir du niveau 2) (Les réglages de ces options sont identiques au chapitre 3.5 Effet Hover Menu principal) 3.8 Style défini par l'utilisateur (CSS) Ajout du code de style personnalisé (nécessite des connaissances avancées dans le CSS) 3.9 Sous-Menu actif Effet de survol sur le bouton pour que le visiteur puisse voir où il se trouve La page de réglages est identique à celle du Menu principal Effet hover 3.10 Personnaliser - Styles de contenu Ici, les réglages suivants peuvent être faits pour personnaliser les styles de contenu :

25 25 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é 3.11 Menu pour Mobile Dans cette rubrique vous avez la possibilité de paramétrer le menu qui s'affiche sur les appareils mobile (Toggle Button) La hauteur du menu : de 0 jusqu'à 500 px La hauteur de ligne: de 0 px jusqu'à 500 px Espace intérieur

26 26 Alignement du texte La couleur de la police La couleur de l'arrière plan

27 27 Taille de l'arrière plan (Image / logo dans le menu des appareils mobiles) Ici vous avez la possibilité de paramétrer la grandeur de l'image de fond (Logos) dans la liste du menu des appareils mobile (Toogle Menu). La valeur "X" correspond à la largeur La valeur "Y" correspond à la hauteur La couleur des lignes ainsi que l'arrièreplan

28 28 NE PAS OUBLIER: Chaque modification, dans chaque section, doit être sauvegardé par l'intermédiaire du bouton : Beaucoup de succès avec le du Worldsoft CMS! date MAJ document : 13 /03/2015