Avec cybershop, vous pouvez créer un menu de navigation dynamique en DHTML
Voir l'exemple animé
ici (menu de navigation à gauche)
Attention:
- La création des menu DHTML nécessite l'utilisation du navigateur firefox
- Parce que l'utilisation du menu DHTML nécessite des fichiers javascripts spécifiques, l'insertion des menus dans votre site doit etre effectuée manuellement.
Commençons par créer votre menu.
Dans l'administration,
Ouvrez le tableau Gestion de contenu
Cliquez sur le lien
Menus CSS/DHTML de navigation front office
La console de création de menu DHTML apparaît
Cliquez sur Create Menu
Un pop up apparaît, vous devez renseigner les champs comme l'exemple suivante
Note :
- Dans le nom du menu, n'utilisez pas d'espace ni aucun caractère non unicode (pas de é,à, &, ?), aucun symbole.
- Choisissez le thème d'affichage du menu (Vous pouvez tester les thèmes à la fin, une fois votre menu créé)
- Précisez la largeur de votre menu
- Menu effect : Slide (déroulant progressif) ou Fade (Afficher/cacher progressif)
- Orientation : Précisez si le glissement du menu est horizontal ou vertical
- Show Icon : Oui ou Non, si oui,
CyberShop va afficher une icone devant les titres du menus
- DropDown on click : Oui ou Non, Oui pour ouvrir le menu en cliquant dessus, Non, pour l'ouvrir au passage de la souris dessus
- Generates menu items from category tree : Générer un menu des catégories et sous catégories de la boutique (ne pas cocher si vous ne
Cliquez sur Create
En sauvegardant votre menu vous obtiendrez le message en rouge
Menu is created successfully
Cliquez sur Close pour revenir à la page principale
Votre menu est maintenant créé, cliquez sur Edit Items pour ajouter les composants du menu
Dans le pop up qui apparaît, vous devez ajouter les composant de votre menu
Les composants sont les rubriques de votre menu
Vous devez précisez le titre (dans le champ Caption) et l'url ou le nom de la page de redirection (dans le champ URL) l'ordre d'affichage (dans le champ Seq), ensuite vous devez cliquer sur Add.
voir l'exemple suivant
Une fois vous avez ajoutez vos rubriques, cliquez sur close
Vous serez redirigés vers la page du menu principale ou vous pourrez visionner votre menu
Les rubriques (Accueil, Contactez nous...) peuvent avoir des sous rubriques ou sous menus
Pour créer des sous rubriques, placez votre souris sur la rubrique principale, et cliquez sur Edit Items
Le pop up suivant apparaît
Vous pouvez personnaliser l'affichage de chaque sous rubrique
Dans la partie Menu properties, précisez :
- L'orientation : verticale ou horizontale
- Width : largeur du sous menu
- Show Scroll : Yes ou No, si Yes,
CyberShop affichera un ascenceurs dans le sous menu, s'il contient plusieurs sous rubriques, si No, il affichera tous les sous menus
- Show Icon : Oui ou Non, si oui, CyberShop va afficher une icone devant les titres du menus
- Show Borders : Yes ou No, si Yes, CyberShop affichera une bordure sur le sous menu pour le distinguer visuellement du menu principal
- Show Shadow : Yes ou No, si Yes, le sous menu flottera sur la page, au dessus du menu principale, avec un léger ombre porté, si No, il sera aplati dans la page au même niveau du menu principal
Cliquez sur Save pour sauvegarder les paramètres de votre sous menu
Vous obtiendrez le message en rouge Submenu properties is saved
Vous pouvez maintenant ajouter les composants de votre sous menu
Cliquez sur le bouton Close quand vous avez terminé.
Vous serez redirigés vers la page du menu principale ou vous pourrez visionner votre menu
Pour changer l'apparance de votre menu, vous pouvez cliquez sur Edit Menu et changer le thème d'affichage du menu
Si le menu vous convient, vous pouvez maintenant l'intégrer dans votre Front Office.
Cliquez sur le lien
View Menu
Le pop up suivant apparaît
Cette page vous montre exactement à quoi votre menu va ressembler côté clent.
Si vous êtes d'accord pour implémenter ce menu dans votre front office, cliquez sur le bouton droit de votre souris et sélectionner "Afficher le code source de la page"
Copiez le code source situé entre la balise <head > et <head /> et collez le dans votre fichier shoppage_header.htm, dans la partie <head > et <head />
Ensuite copiez le code source généré pour l'affichage du menu, il est imbriqué dans une table, et collez le dans votre page shoppage_header.htm, à l'emplacement de votre choix, entre les balises <body > et <body />
Sauvegardez votre fichier et uploadez le à la racine de votre site.