La plate-forme e-commerce Prestashop™ prend un essor considérable en ce début 2009, mais reste une solution encore pauvre en matière de templates (thèmes) de qualité professionnelle face à une concurrence très forte au niveau communautaire (Magento en tête !)
Bien que peu enclin (faute de temps !) à proposer des templates à la communauté, je n’en demeure pas moins obligé de développer et mettre en place des thèmes graphiques inédits pour les clients de la société. Et c’est le cas de ma dernière création : Master Matériel (spécialiste en matériel de cuisine professionnelle)
Un thème à deux colonnes et avec menu déroulant
La première chose qui frappe sur cette boutique (en cours de finition au moment où j’écris cet article) est le choix d’un template à deux colonnes seulement, dont le but était d’abord d’aérer l’existant et de sortir des sempiternelles déclinaisons du template de base…
Le second élément distinctif est la navigation des catégories de produits, et c’est ce qui va nous intéresser ici : un menu déroulant à deux niveaux, SEO friendly, full CSS et sans Javascript !
En voici le code !
Menu déroulant multi-niveaux sans javascript : oui, c’est possible !
Le principe repose simplement sur l’imbrication de listes non ordonnées (balises UL) et sur le jeu de l’état hover permis par CSS (version 2.0 ou ultérieure). Évidemment, pas d’effets de fondu ou autres étant donné l’absence de Javascript dans le code, et nécessité de gérer finement la hiérarchie des CSS (attributs z-index) pour que les menus ne passent pas sous les éléments situés en-dessous de l’entête de notre boutique !
Les contraintes de cette solution :
- une limitation à 2 sous-niveaux de menus (il était possible d’aller plus loin mais la compatibilité inter navigateurs s’en ressentissait lourdement… et mes capacités en CSS aussi !)
- les sous-menus ne peuvent chevaucher les menus parents (toujours pour des raisons de compatibilité inter navigateurs)
- nécessité impérative de recourir à un hack CSS (fichier .htc) pour le support d’Internet Explorer 6.0 et versions antérieures (ndlr : l’explication tient au fait qu’IE6 et ses ancêtres ne supportent pas l’état hover ailleurs que sur les balises de liens
A)
Je n’entrerai pas dans le détail du code et vous laisserai adapter ce dernier à votre propre situation.
Nb : à l’heure où j’écris cet article, la compatibilité IE6 n’est pas totale (je corrige cela généralement en dernier lieu sur mes développements) mais concerne uniquement la base du menu.
Le reste du code, c’est-à-dire l’essentiel, est parfaitement compatible et a été testé sous Firefox 3.x, IE 7, IE 8 Beta et Google Chrome…
Structure du code HTML :
Elle est très simple et explique le côté SEO friendly (totale compatibilité avec le référencement) de ce menu, puisqu’uniquement basée sur des balises HTML simples : balises UL / LI imbriquées, et balises A pour les liens, évidemment !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul class="niveau1"> <li class="sousmenu"> menu 1 <ul class="niveau2"> <li>menu 1.1</li> <li>menu 1.2</li> </ul> </li> <li class="sousmenu"> menu 2 <ul class="niveau2"> <li>menu 2.1</li> <li class="sousmenu"> menu 2.2 <ul class="niveau3"> <li>menu 2.2.1</li> <li>menu 2.2.2</li> <li class="last">menu 2.2.3</li> </ul> </li> ... </ul> </li> ... </ul> |
Bien évidemment vous n’avez pas à vous soucier de ce code HTML, puisqu’il sera automatiquement généré par nos fichiers tpl 
Structure du code CSS :
Le code CSS est lui sensiblement plus ardu, aussi je ne rentrerai pas dans les détails et vous indique uniquement dans les commentaires ce qu’il est intéressant de changer (outre les couleurs évidemment) !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* Block categories */ .top-menu { /* ICI LA MISE EN FORME DU FOND DE VOTRE MENU */ width: 980px; display: block; } /* style du menu par defaut */ #menu{ font-size:11px; padding: 12px 0 0 9px; text-transform: uppercase; } div#menu a { text-transform:uppercase; font-weight:bold; } div#menu ul {padding: 0; margin:0px; } /* style niveau principal */ div#menu ul.niveau1 > li, div#menu ul.niveau1 > li:hover { background: transparent; border-bottom: none; width: auto; line-height: auto; } div#menu ul.niveau1 > li > a { /* ICI LA MISE EN FORME DU MENU DE BASE */ padding:5px 10px 6px 5px; color:#fff; width: auto; } div#menu ul.niveau1 > li.last > a { /* ICI LA MISE EN FORME DU DERNIER ELEMENT DU MENU DE BASE (si besoin) */ } div#menu ul.niveau1 > li > a:hover, div#menu ul.niveau1 > li:hover > a { color: #ef541a; } div#menu li {background:#1f1f1f; line-height: 18px; color: #ef541a; } div#menu li a { color:#EF541A; display:block; padding:5px 8px; /* PADDING (ESPACE) AUTOUR DES ELEMENTS DE MENU */ text-decoration:none; width:150px; /* LARGEUR DES ELEMENTS DE MENU HORS PADDING */ } div#menu li:hover {background: #ef541a; } div #menu li:hover a {color: #ef541a; } div #menu li a:hover {color: #fff; } div #menu li.sousmenu:hover > a {color: #fff; } div#menu ul li {position:relative; z-index: 998; list-style: none; float:left; border-bottom:1px solid #494949; } div#menu ul li.last { border-bottom: none; } div#menu ul ul { border:1px solid #494949; display:none; position:absolute; width:166px; /* DIMENSION = LARGEUR DES ELEMENTS DE MENU + PADDING LEFT + PADDING RIGHT */ z-index:999; } div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;} div#menu ul.niveau3 { top:4px; left: 166px; /* DOIT ETRE EGALE A LA DIMENSION DE div#menu ul ul */ z-index:999 !important; } /* rajout de couleur de fond et de survol */ div#menu ul.niveau3 li { background: #1f1f1f; color: #ef541a; } div#menu ul.niveau3 li:hover { background: #ef541a; color: #fff; } |
Et le support d’IE 6 ?
Ce satané Internet Explorer 6 nécessite l’utilisation d’un hack CSS, par l’utilisation d’un fichier… Javascript (!) nommé csshover3.htc qui permet au vieux navigateur d’émuler le support de l’état hover sur toutes les balises HTML en plus de l’habituelle balise A utilisée pour les liens.
Ce fichier est à placer dans le répertoire CSS de votre thème, au même endroit que le global.css ; et évidemment, il convient d’y faire appel dans ce dernier en rajoutant une ligne dans les spécifications de la balise BODY :
1 2 3 4 5 | body { ... /* CI DESSOUS LA LIGNE A RAJOUTER */ behavior: url('csshover3.htc'); } |
Vous pouvez télécharger ce fichier ici (prendre la version compressée !)
Mise en oeuvre dans Prestashop : le module BlockCategories
Intégrer ce menu déroulant dans la solution Prestashop est d’une facilité déconcertante, car la structure reste identique à celle des catégories du template de base (balises UL / LI imbriquées).
La seule petite chose à faire est… de rajouter le support du hook “Top of page” afin de pouvoir placer nos catégories en haut de page ! Pour cela, il est impératif de rajouter une fonction au fichier blockcategories.php situé dans le répertoire de notre module BlockCategories (accessible par /modules/blockcategories sur votre serveur)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php ... function hookRightColumn($params) { return $this->hookLeftColumn($params); } // Code à ajouter pour le support du hook "top of page" function hookTop($params) { return $this->hookLeftColumn($params); } } ?> |
Le contenu du fichier blockcategories.tpl reste lui quasi identique à celui d’origine, à quelques petits détails près :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="top-menu"> <!-- Block categories module --> <div id="menu"> <ul class="niveau1"> {foreach from=$blockCategTree.children item=child name=blockCategTree} {if $smarty.foreach.blockCategTree.last} {include file=$branche_tpl_path node=$child last='true'} {else} {include file=$branche_tpl_path node=$child} {/if} {/foreach} </ul> </div> <div style="clear:left;height:0px;"><!-- bug ie --></div> </div> <!-- /Block categories module --> |
Enfin, voici le code appelé de manière récursive au niveau des sous-menus, dans le fichier category-tree-branch.tpl :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <li{if $last == 'true'} class="last{if $node.children|@count > 0} sousmenu{/if}"{else}{if $node.children|@count > 0} class="sousmenu"{/if}{/if}> <a href="{$node.link|escape:htmlall:'UTF-8'}" {if $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:htmlall:'UTF-8'}</a> {if $node.children|@count > 0} <ul class="niveau2"> {foreach from=$node.children item=child name=categoryTreeBranch} {if $smarty.foreach.categoryTreeBranch.last} {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'} {else} {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'} {/if} {/foreach} </ul> {/if} </li> |
Rien de très compliqué, si ce n’est d’attribuer les bonnes classes CSS aux bons éléments 
Pour résumer : les étapes d’installation
Voici donc les étapes à respecter pour mettre en oeuvre votre menu déroulant :
- Ajoutez le code CSS au fichier global.css de votre thème et uploadez le fichier csshover3.htc dans le répertoire CSS de votre thème,
- Mettez à jour (après avoir faire une sauvegarde !!!) votre module BlockCategories en recopiant le code ci-dessus (au besoin, vous pouvez aussi inclure d’autres éléments avant ou après ce code dans le fichier blockcategories.tpl pour gérer au mieux le rendu visuel)
- Rendez-vous dans le back-office de votre boutique dans l’onglet Modules / Positions, supprimez le bloc Catégories de la colonne de gauche (si vous utilisez le template de base) puis rajouter le dans le hook “Top of page”
- C’est fini !
À partir de ce moment, ne vous restera plus qu’à modifier le fichier CSS pour adapter les couleurs du menu à votre charte graphique
Nb : je n’assure aucun support technique concernant la mise en oeuvre des éléments de cet article, pour des raisons évidentes de temps. En espérant néanmoins que cela vous aura aidé !
Le 19 février 2009 à 11:21, Alan Rowe a écrit :
Hi Cedric. May I just say that your help here has been fantastic. I love the open source spirit and it is so great to see you embracing it so fully. I will hope to do the same with my innovations. Cheers to you and to Prestashop.
Cheers
Al
Le 19 février 2009 à 11:45, Cédric G. a écrit :
Simply Thanks to you Alan
Le 19 février 2009 à 18:31, ArtDesign a écrit :
Hello,
Bravo pour ton menu, il est excellent.
Peut être a voir juste le fait que sur la catégorie la plus à droite, sur les écrans de petites tailles, les sous menus ne sont pas visible.
Cordialement
DAV
Le 19 février 2009 à 21:11, Cédric G. a écrit :
Merci
Effectivement, il n’y a aucun contrôle d’overflow sur ce type de menu. De fait, on va déplacer les catégories multi-niveaux sur la boutique en question de manière à placer à droite les catégories n’ayant qu’un seul niveau de menu (il y en aura plusieurs…)
On peut très bien imaginer détecter d’ailleurs si l’on est sur la dernière catégorie et dans ce cas, décaler le sous-sous-menu à gauche au lieu de le décaler à droite (tiens oui, c’est une idée ça…)
Le 05 mars 2009 à 8:15, Damien G. a écrit :
Salut,
je n’ai pas encore testé ta solution mais j’ai mis en place il y a quelques temps le même style de menu pareil avec des ul li mais en utilisant du javascript…
Donc je testerai peut-être ta solution dans la version 2 de mon menu que je comptais modifier.
je te ferai un retour.
Merci pour le post en tout cas.
Ciao
Le 05 mars 2009 à 9:43, Cédric G. a écrit :
Bonjour Damien
Merci pour le (futur) retour. De mon côté, j’ai pensé à… modifier le menu pour l’intégrer en javascript afin de ne pas donner trop de “poids” aux mots-clés contenus dans les catégories
(quand il y en a beaucoup, ça peut pénaliser certaines pages en augmentant inutilement la densité d’expressions-clé inutiles et sans rapport direct avec l’article présenté, notamment…)
Le 10 mars 2009 à 2:58, lalobotheque a écrit :
très intéressant , malheureusement étant novice je vient de bloquer au passage ajoutez le code CSS au fichier global.css … mais cette mise en pages conviendrait a ma recherche actuelle . a quel niveau dois-je intervenir dans le code . pardon pour ma nocivité
en vous remerciant
bonne journée
Le 10 mars 2009 à 19:03, Cédric G. a écrit :
Vous voulez parler sans doute de “novicité”
Le fichier global.css se trouve dans le sous-répertoire /css/ de votre thème (template). Il suffit de coller le code à la fin de ce fichier par exemple.
Je ne sais pas si cela répond à votre question !
Le 11 mars 2009 à 21:27, lalobotheque a écrit :
bonsoir , j’ai réussi a intégrer le fichier et afficher le module catégorie en dessous de mon header mais il me pose problème avec l’affichage car il croise les fenêtre de produit phares que je n’arrive pas a descendre plus bas pour lui laisser la place !? il semble qu’il faille mettre le header en dessous !? ou autre … en vous remerciant
ps // en effet nocivité et non nocivité
Le 31 mars 2009 à 17:14, daYmo a écrit :
Salut,
ouai sympa ton menu.
Il y a quelques mois j’avais mis en place ce style de menu déroulant (sans js avec le fameux hack csshover.htc) avec en plus des images en haut qui s’étendaient à l’horizontal (comme çà en gros : http://ldbglobe.fried-rice.net/public/2007/06/jQuery.imageMenu/) mais au final c’était pas très ergonomique.
J’ai tout redéveloppé pour celui que j’utilise actuellement sur Music Destock. C’est bien plus efficace.
En tout cas j’avais pas le temps d’expliquer aux gens comment l’implémenter et donc bravo car pas mal de monde me demande mon menu. Je vais leur indiquer tes explications! Mais y’a du Javascript.
En revanche je déroule bien vers la gauche lorsqu’on arrive à droite du menu. Mais çà, çà se fait au cas par cas.
J’ai déjà fait un module pour le menu vertical …
http://www.prestashop.com/forums/viewthread/8272/#36984
Bonne continuation.
daYmo
Le 03 avril 2009 à 10:47, mode a écrit :
Dommage qu’il n’y ait pas de templates disponibles utilisant ce menu déroulant horizontal…
Le 19 mai 2009 à 16:17, joyce a écrit :
bonjour, j’ai un petit souci avec le menu horizontal que tua s proposé!
j’ai bien fait toutes les manips, il s’affiche correctement, MAIS EN BAS DE PAGE DANS LA COLONNE DE GAUCHE…………..
comment faire pour le remonter dans le haut du site????????????
merci de ton aide!
cdlt
Le 25 mai 2009 à 2:27, boubker a écrit :
salut,
pour remonter le modyle daymo, il faut aller dans module> positions : block left, et tu remonte le block
Le 08 juillet 2009 à 21:16, haja a écrit :
Merci bcps pour votre article, cela aide et très utile!
Le 11 juillet 2009 à 8:11, haja a écrit :
Slt, merci pour cet article, j’ai réussi à implémenter le menu mais mon problème c’est que j’arrive pas à afficher le sous-menu du sous-menu, càd le deuxième niveau du sous-menu.
Quelqu’un a t-il une solution?
merci bcps!
Le 16 juillet 2009 à 16:00, nizar a écrit :
Bonjour
- j’ai ajouté le code CSS en bas dans le fichier global.css
- je suis sur IE7, donc pas besoin de csshover3.htc
- j’ai ajouté la function hookTop($params)
{
return $this->hookLeftColumn($params);
}
dans le fichier blockcategories.php
- j’ai remplacé les codes de blockcategories.tpl et category-tree-branch.tpl par les codes correspondants
- et ensuite je vais sur le BO /Modules / Positions, pour supprimez le bloc Catégories de la colonne de gauche, mais je vois pas comment!!
qq1 peut aider svp?
Le 19 juillet 2009 à 16:37, Vanessa a écrit :
Tout d’abord merci pour cette contribe.
J’ai bien suivi toutes les etapes à plusieurs reprise, rien a faire. Sous IE7 le menu ne se deroule pas et sous fire fox ca me melange tout les texte du top avec la colonne de droite..
Avez vous trouver une solution pour IE 7 ?
Le 04 août 2009 à 16:45, richard a écrit :
Bonjour,
merci pour cette contrib qui à l’air très efficace.
cependant j’ai un petit soucis est ce qu’on pourrait m’expliquer comment afficher les sous sous catégorie soit le 3eme niveau?
parce que dans le fichier category-tree-branch.tpl on voit que l’affichage pour le ul niveau 2.
Merci
Le 22 août 2009 à 16:07, Angra-Mainyu a écrit :
Bonsoir,
je cherchais un menu déroulant comme celui-la et c’est un plaisir de le trouver.
De plus, les couleurs que vous utilisez me vont à ravir pour la nouvelle interface que je prépare pour mon annuaire.
Je ne suis pas designer donc cela me fait plaisir de trouver des éléments de qualité.
Bravo pour votre travail et merci de le partager.
Le 17 septembre 2009 à 12:26, Tib a écrit :
Bonjour,
Le menu fonctionne bien sous Firefox mais pas sous IE7
Est-ce normal ou une mauvaise manip de ma part ?
Merci
Le 06 janvier 2010 à 22:55, Dale a écrit :
Thanks SO MUCH for this! I am using PrestaShop for the first time and my client wanted a horizontal navigation and I usually just work in HTML/CSS only, leaving the development to developers… I couldn’t figure out how to make it work. But I was able to use Google Translate to translate this page to English and follow along. Thanks again!