Documentation AdvancedTopMenuFR

WWW.PRESTA-MODULE.COM
Advanced Top Menu
Installation
1.
Extraire le fichier ZIP
2.
Copier le dossier «pm_advancedtopmenu» sur votre site dans le dossier «modules»
3.
Connectez vous à votre console d’administration Prestashop
4.
Dans l’onglet «Modules», installez «Menu de navigation horizontal avancé»
5.
Cliquez sur «Configurer» pour les réglages
Configuration
Principe général
Pour réaliser votre barre de navigation, vous devez la décomposer en quatre zones :
Onglet, Colonne, Groupe d’éléments, Éléments.
Chacune de ces zones permet de définir précisément son comportement, forme et contenus.
• Onglet : C’est la zone principale. Elle affiche les liens du premier niveau. Ces liens sont affichés
en permanence sur votre site.
• Colonne : Cette zone vous permet d’afficher vos sous-menus en colonnes. Vous devez définir au
minimum une colonne pour vos sous-menus, auquel cas il se comportera comme un menu
déroulant classique (dropdown).
• Groupe d’éléments : Cette zone vous permet de lister ou grouper des liens de niveau deux (sous-
menus).
• Eléments : Il s’agit ici des liens de troisième et dernier niveau (sous-sous-menus).
Chaque zones, hormis les colonnes, disposent de propriétés de présentation et comportementales :
• Type : CMS, Lien, Catégorie, Fabricant, Fournisseur, Moteur de recherche.
• Présentation : Vous pouvez définir pour chaque zone, des styles, icônes ou textes personnalisés.
• Permissions : Vous pouvez également régler les autorisations d’accès et leur statut.
Concernant la présentation de votre menu, il vous est possible de configurer son affichage de
manière globale à travers l’onglet «Style global & configuration», ou bien d’utiliser l’onglet «Styles
avancés» pour éditer la feuille de style CSS.
Un onglet «Aperçu» est disponible pour juger de vos réglages et préférences d’affichage.
PAGE 1 SUR 4
[email protected]
WWW.PRESTA-MODULE.COM
Onglet «Configuration du menu»
Onglet :
Types :
• CMS : Pages que vous avez créé dans Prestashop (Outils > CMS)
• Lien : Lien personnalisé (il est possible de définir un lien par langue).
• Catégorie : Reproduit automatiquement l’arborescence d’une catégorie de votre catalogue
• Fabricant : Affiche un fabricant de Prestashop, ou une liste de tous les fabricants
• Fournisseur : Affiche un fournisseur de Prestashop, ou une liste de tous les fournisseurs
• Recherche : Affiche un champ de recherche
Titre :
Par défaut, le titre affiché, et celui de la page/lien/catégorie... Vous pouvez cependant définir un titre
personnalisé pour votre onglet.
Styles personnalisés :
Par défaut, est utilisé la feuille de style ou les réglages définis dans l’onglet «Style global &
configuration».
Vous pouvez remplacer une ou plusieurs valeurs pour chacun de vos onglets, afin d’avoir par
exemple, une couleur de fond différente par onglet.
Utilisez pour cela les champs «Couleurs et Epaisseurs» pour définir vos couleurs en hexadécimal ou
à l’aide du sélecteur de nuances, et les épaisseurs des contours en pixels.
Vous pouvez décider d’aligner les sous-menus par rapport à la barre de navigation, ou par rapport à
son onglet (côté gauche ou côté droit) à l’aide de «Afficher le sous-menu».
Contenus personnalisés :
Vous avez la possibilité d’ajouter des textes «riches» au dessus ou en dessous de l’ensemble des
colonnes. Un texte riche peut contenir des images, flash, vidéos... et être mis en forme.
Autorisations d’accès :
Chaque onglet à la possibilité d’être activé / désactivé, ainsi que d’être affiché pour un certain public:
• Public : Tout le monde sans exceptions
• Seulement pour les visiteurs : Uniquement les personnes qui ne sont pas connectées ou ne
disposent pas d’un compte client sur votre boutique.
• Seulement pour les utilisateurs enregistrés : Uniquement les personnes qui disposent d’un
compte client et connectées.
Icône :
Vous pouvez illustrer chacun de vos onglets, d’une image qui apparaitra à gauche de son titre
(formats acceptés : JPEG, GIF, PNG).
PAGE 2 SUR 4
[email protected]
WWW.PRESTA-MODULE.COM
Colonne :
Une colonne est un conteneur invisible permettant de répartir les liens de niveau deux et trois, dans
le sens de la largeur.
Onglet Parent :
Chaque colonne est greffée à un onglet. Il est possible d’avoir un nombre illimité de colonnes en
fonction de la largeur de votre thème Prestashop.
Propriétés :
Chaque colonne hérite des propriétés du style global, mais peuvent également disposer d’attributs
personnalisés :
• Largeur (en pixels)
• Couleur de fond (hexadécimal)
• Couleur du texte par défaut des groupes d’éléments qu’elle contient (hexadécimal)
• Couleur du texte par défaut des groupes d’éléments au survol de la souris (hexadécimal)
• Couleur du texte par défaut des éléments qu’elle contient (hexadécimal)
• Couleur du texte par défaut des éléments au survol (hexadécimal)
• Texte riche à placer au dessus ou en dessous de la colonne.
• Son statut (actif / inactif)
• Ses autorisations d’accès (public, visiteurs, clients)
Groupe d’éléments :
Un groupe d’éléments peut être un lien de niveau deux, ou une arborescence de liens de niveaux
deux et trois. Les groupes servent à distinguer des ensembles de liens ayant un rapport entre-eux.
Parents :
Chaque groupe d’élément est obligatoirement rattaché à un onglet et à une colonne.
Sélectionnez un onglet, puis une de ses colonnes pour y ajouter un groupe d’éléments.
Propriétés :
• Type : CMS, Lien, Catégorie, Fabricant, Fournisseur, Recherche
• Titre : Le nom du lien affiché
• Lien : La destination du lien
• Texte riche à placer au dessus ou en dessous des groupes d’éléments
• Son statut (actif / inactif)
• Ses autorisations d’accès (public, visiteurs, clients)
• Icône/Image : image au format JPEG, GIF ou PNG afin d’illustrer chaque groupe d’éléments.
PAGE 3 SUR 4
[email protected]
WWW.PRESTA-MODULE.COM
Eléments :
Un élément est un lien de niveau trois.
Parents :
Chaque élément est obligatoirement rattaché à un onglet, une colonne et un groupe d’éléments.
Propriétés :
• Type : CMS, Lien, Catégorie, Fabricant, Fournisseur, Recherche
• Titre : Le nom du lien affiché
• Lien : La destination du lien (il est possible de définir un lien par langue)
• Son statut (actif / inactif)
• Ses autorisations d’accès (public, visiteurs, clients)
• Icône/Image : image au format JPEG, GIF ou PNG afin d’illustrer chaque élément.
Onglet «Style global & configuration»
• Activer le cache : Accélère l’affichage de la barre de navigation
• Style du menu : Préférence d’affichage de la barre de navigation
• Style des onglets : Préférence d’affichage des onglets
• Style des sous-menus : Préférence d’affichage des sous-menus
• Afficher le sous-menu : Préférence de positionnement des sous-menus (par rapport à la barre de
navigation ou par rapport à son onglet)
Onglet «Styles avancés»
Pour les experts des CSS !
Vous pouvez saisir votre feuille de style au format texte dans cet onglet.
Une coloration syntaxique de votre code est disponible pour vous faciliter sa lecture.
Onglet «Aperçu»
Sans quitter votre back-office, visionnez l’apparence de votre menu au fur et à mesure de sa
construction.
PAGE 4 SUR 4
[email protected]