Prestashop : des catégories en menu horizontal

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…

Template Prestashop à deux colonnes et menu déroulant

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 !

Le menu déroulant en action

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 !

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

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

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)

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

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

<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é !

52 commentaires sur Prestashop : des catégories en menu horizontal
  1. Alan Rowe Répondre

    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

  2. Cédric G. Répondre

    Simply Thanks to you Alan 😉

  3. ArtDesign Répondre

    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

  4. Cédric G. Répondre

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

  5. Damien G. Répondre

    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

  6. Cédric G. Répondre

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

  7. lalobotheque Répondre

    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

  8. Cédric G. Répondre

    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 !

  9. lalobotheque Répondre

    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é

  10. daYmo Répondre

    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

  11. mode Répondre

    Dommage qu’il n’y ait pas de templates disponibles utilisant ce menu déroulant horizontal…

  12. joyce Répondre

    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

  13. boubker Répondre

    salut,
    pour remonter le modyle daymo, il faut aller dans module> positions : block left, et tu remonte le block 🙂

  14. haja Répondre

    Merci bcps pour votre article, cela aide et très utile!

  15. haja Répondre

    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!

  16. nizar Répondre

    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?

  17. Vanessa Répondre

    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 ?

  18. richard Répondre

    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 🙂

  19. Angra-Mainyu Répondre

    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.

  20. Tib Répondre

    Bonjour,
    Le menu fonctionne bien sous Firefox mais pas sous IE7
    Est-ce normal ou une mauvaise manip de ma part ?

    Merci

  21. Dale Répondre

    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!

  22. laurent Répondre

    Comment faire apparaître ce menu à un autre endroit?
    J’aimerai créer une nouvelle « zone » en dessous des zones header et du logo. Et afficher le menu sur une ligne complète à l’intérieur de cette zone.

  23. Gire Répondre

    Merci mille fois pour ce petit tuto qui va m’être fort utile dans les semaines à venir. Je migre mon shop d’OSCMax vers Prestashop et je ne voyais pas comment convertir mon menu déroulant : grâce à vous je vais gagner un temps précieux!

  24. Romain NIO Répondre

    Super !!! Vraiment génial 🙂

    Merci beaucoup 🙂 j’ai passé 10 minutes a modifier quelques petits trucs et ca fonctinne maitenant impec !

    Vraiment génial merci 🙂

  25. Blog Mickael B. Répondre

    Merci, beau travail, très facile à mettre en place (en 5min c’était déjà finis) 🙂

  26. Yann @ Pantalons Répondre

    Merci pour ce tuto simple et accessible, ca fonctionne du premier coups ! il ne reste plus qu’a personnaliser le menu pour mon site. Encore merci pour vos contributions Prestashop.

  27. Yann @ Pantalons Répondre

    Bonjour,

    Il y a t-il une méthode simple pour rajouter des liens (pages cms, qui somme nous? Contacter nous etc…) dans ce menu ?

    Merci.

  28. Cédric G. Répondre

    Bonjour

    Il faut (malheureusement) ajouter les éléments à la main dans le code (par ex. avant le du niveau1)

  29. Cécile Répondre

    Bonjour
    Super ton menu déroulant ! Mais je suis bloquée à l’étape précédente : comment fait-on pour avoir la liste de catégorie en horizontal en haut de page et non en vertical sur le coté (comme dans le thème standard)?
    Merci d’avance pour tous vos conseils !
    Cécile

  30. yann @ pantalons.com Répondre

    Salut,

    J’ai utilisé ton tuto depuis déjà quelques mois (merci encore !)

    je viens de m’apercevoir que le menu ne passe pas sous IE6, est ce hack qui est mal configuré ?

    Car d’après le W3C validator :

    La propriété behavior n’existe pas : url(« csshover3.htc ») url(« csshover3.htc »)

    Bref, c’est étrange cette histoire 😀

    merci

  31. Cédric G. Répondre

    Effectivement, j’ai eu le même phénomène, d’autant plus étrange que sur deux boutiques hébergées sur le même compte (donc même serveur, même hébergeur) sur l’une ça passait, et pas sur l’autre !

    Depuis, j’ai décidé d’éradiquer IE6 des navigateurs « admissibles » sur les sites que je développe. Sur les derniers projets payants que j’ai développé, j’ai passé l’adaptation IE6 en option payante (et pas qu’un peu !)

  32. kehezen Répondre

    => C’est une excellente initiative Cédric, selon mon avis

    Merci pour ton menu, je viens de l’implémenter en deux minutes.

  33. Martyn Répondre

    Sa marche pas sur Presta 1.4 ou j’ai mal fait quelque chose?

  34. Martyn Répondre

    div#menu ul.niveau1 > li > a {
    /* ICI LA MISE EN FORME DU MENU DE BASE */
    padding:5px 10px 6px 5px;
    color:#fff;
    width: auto;
    }

    Grrr..
    PKOI COULEUR EST #fff ????
    Du coup rien n’apparaissait!
    Mise en noire,c bon!

  35. Sam Répondre

    menu fantastique, je vous remercie pour cela.

  36. Kate Répondre

    Pour les intéressés:

    On peut aussi donner plus de style avec un background-image au lieu du transparent par défaut:

    /* style niveau principal */
    div#menu ul.niveau1 > li, div#menu ul.niveau1 > li:hover {
    background: transparent;
    border-bottom: none;
    width: auto;
    line-height: auto;
    }

    Merci pour ce superbe menu!

  37. arclune Répondre

    Bonjour,
    Tutoriel très instructif, malheureusement débutant avec prestashop, j’ai installé la version 1.4.1

    Je suppose que le code des fichiers tpl ne correspond pas?

    merci qd même 🙂

  38. dilan Répondre

    bonjour
    sur quelle versions de prestashop

    ce menu fonctionne ?

    cordialement

  39. mickagolberg Répondre

    WORDPRESS :: !!!

  40. Cédric G. Répondre

    Bonjour Mickael

    WordPress est une solution, mais ne peut à mon avis pas remplacer un « vrai » e-commerce sur de grosses boutiques (>500 produits par exemple)

  41. lingerie Répondre

    beau travail, très facile à mettre en place

  42. Livin'inChina Répondre

    Super, grand merci à toi Cédric!

    J’aurai toutefois une question. Comment peut on faire pour qu’une fois un onglet du menu sélectioné, il adopte une couleur ou un bg différent des autres afin que d’un coup d’oeil le visiteur sache où il se trouve (en + du fil d’Arianne)? En rajoutant une classe « selected » peut être mais dans ce cas je ne vois pas comment et où la placer.

    En tout cas merci de partager!

  43. hugo Répondre

    J’ai saisi le script, mais on ne voit nulle part le « niveau3 » dans le TPL, alors qu’il en est fait référence dans le CSS.
    Et je n’arrive pas à trouver de solution pour l’intégrer.

    C’est pourtant le but principal, de pouvoir sortir un troisième niveau horizontal.

    Une ame charitable ?

  44. Patrick Répondre

    Bonjour,

    Pourriez vous m’indiquer si votre menu horizontal est compatible avec Prestashop 1.4.6.2 ?

    Merci par avance,

    Patrick

  45. Fafa Répondre

    Bonjour,

    Félicitations pour votre menu horizontal, il est très réussi.

    Je suis allé visité le site mastermateriel.com et je le trouve très rapide à l’affichage.

    Pourriez-vous m’indiquer les réglages que vous avez effectué dans Prestashop et au niveau de votre hébergement.

    Aussi chez quel hébergeur le site tourne-t-il ?

    Merci d’avance.
    Bien cordialement.

    • Cédric GIRARD Répondre

      Bonjour

      L’hébergeur de Master Matériel est Phpnet.org (il s’agit d’un hébergement Premium : du mutualisé « haut de gamme » où la partie serveur est virtualisée, et où seuls MySQL et le serveur de mail sont mutualisés)

      Le site a été effectivement fortement optimisé, notamment via les conseils donnés sur cet article : http://www.effi10.com/prestashop-optimisation-performances-htaccess/ (attention, valable uniquement pour Prestashop jusqu’à la version 1.3.x)

      • Fafa Répondre

        OK merci pour votre réponse rapide.
        Sinon pourquoi les conseils ne marchent que pour Prestashop 1.3.x ?

        Qu’est-ce qui fait que cela ne marcherait pas pour la 1.4 ?

        Aussi, votre menu horizontal marcherait-il pour la version 1.4 ?

        Merci d’avance.

        • Cédric GIRARD Répondre

          Bonjour

          Prestashop a introduit un certain nombre de ces optimisations à partir de la version 1.4 😉

          Concernant le menu horizontal, tout dépend de l’adaptation que l’on en fait. Dans l’absolu cela doit fonctionner avec toutes les versions, mais chaque site étant potentiellement différent, il faudra de toute façon en adapter le code.

  46. marzal Répondre

    bonjour j’essaye sans succés de mettre ce menu dans :
    PrestaShop™ 1.4.9.0

    y a t’il des modification a apporter a votre code ??

    car j’aimerai l’utiliser  » il est super « 

  47. Arne Répondre

    Salut, quelqu’un peut m’expliquer où class = niveau 3 est généré?
    Merci … 😉

  48. kejan Répondre

    excellent visu meme si je ne comprend pas le code !! merci

  49. ludo Répondre

    bonjour

    quand vous parlez de la structure du code css qu il faut modifier vous etes dans quel module (global.css?)

    merci
    ludo

Laisser un commentaire

Votre adresse email ne sera pas publiée. Merci de saisir votre nom ou pseudo (pas de pseudo SEO merci !), votre email et votre commentaire.