Jump to content

[Tutorial] Menu déroulant multi-niveaux horizontal pour les catégories

Cédric Girard
 Share

Recommended Posts

Cédric Girard Newbie

Cédric Girard

Posted
Posted

Bonsoir

Comme j'ai eu pas moins de 5 demandes aujourd'hui à propos du code de ce "fameux" menu visible sur ma boutique de matériel de cuisine en cours de finalisation (pas finalisée puisqu'il demeure un léger bug dans IE6 mais propre à mon thème, entre autres mises au point, modules de paiement et saisies de données), j'ai pris une petite heure de mon temps pour vous concocter un tutoriel avec code à la clé...


=> Menu déroulant pour les catégories dans Prestashop !


Vous excuserez le fait que je diffuse ce code sur mon blog, mais bon, c'est ma manière de procéder depuis des années (dans d'autres domaines), ça me permet d'apporter des compléments à mon rythme et de ne pas être tributaire des autres ;-)


PS : je n'assure aucun support technique, faute de temps (sinon j'aurais été jusqu'au module... qui d'ailleurs ne devrait pas être très compliqué à réaliser avec ce que je fournis ici !)

Link to comment
Share on other sites
doudom Newbie

doudom

Posted
Posted

Bonjour,

J'ai mis en place ce super menu par contre je rencontre un probleme tout navigateur confondus.

Le menu reste transparent, si je pointe la souris dessus, je vois les noms des categories !

En revanche, les sous categories s'affiche correctement (fond noir....)

Merci pour votre aide

David

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted
Merci de la réponse.

Effectivement j'ai rajouté les éléments CSS dans .menu et non pas top-menu et ca fonctionne ;-)

Par contre le le 2ième niveau du menu ne se déploie pas ?


Salut Cédric

idem meme constat...

Pourtant j'ai paramétré également les niveaux dans l'admin/module :(

Je continue à chercher...
(pourtant dans firebug, on voit dans le code HTML le 2 eme niveau mais grisé)


Edit :
Les balises du 3eme sous menu
n'apparait pas dans le code, j'ai tout court.

  • n'apparait pas dans le code, j'ai
    • tout court.
      si ça peut aider ...



      V++

      Atch
Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

pour le 3 eme niveau, j'en ai déduit que le probleme venait de category-tree-branch.tpl

en faite, à force de triffouiller, je me suis souvenu qu'il y en avait un auss un fichier du meme nom dans le répertoire theme !

à l'intérieur j'y ai mis ça :

>     0} class="sousmenu"{/if}{/if}>
{$node.name|escape:htmlall:'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
       {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>
<br>   {/if



en remplacent niveau 2 par niveau 3 dans celui ci... et ça marche


Merci Cédric pour le tuto, ça marche au poil ;)

V++

Atch

Link to comment
Share on other sites
  • 5 weeks later...
creaclaire Newbie

creaclaire

Posted
Posted

Bonjour à tous,

J'ai fait le menu deroulant (1 niveau) l fonctionne sous Firefox, mais j'ai un soucis, sous IE
Le menu deorulant, passe sous le visuel qui est placé juste en dessous (bandeau de publicité)
J'ai fait l'essai en mettant un visuel, ou un flash, j'ai le probleme.

Y a t'il une astuce pour qu'il se deroule au dessus ?

Merci d'avance !!!
Creaclaire

Link to comment
Share on other sites
payn4 Newbie

payn4

Posted
Posted

Dans ton global.css, cherche

div#menu ul li {position:relative; z-index: 998; list-style: none; float:left; border-bottom:1px solid #494949; }

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;


Essaye de changer les valeurs de z-index, regarde si un changement se produit, pour l'instant je ne peux pas t'aider plus, je n'ai pas installé ce menu.

Tu peux mettre le lien de ton site aussi, ça peut aider à trouver

Link to comment
Share on other sites
  • 1 month later...
creaclaire Newbie

creaclaire

Posted
Posted

Décidemment..
Encore un soucis avec lemenu déroulant !


Mon menu déroulant fonctionne sur FF et IE 7 et 8, mais j'ai 1 soucis avec IE6, je peux changer la couleur du bandeau, mais je n'ai pas de menu deroulant meme en faisant un hack CSS, csshover3.htc comme dit dans le lien suivant : http://www.effi10.com/technique-web-css/prestashop-menu-horizontal-deroulant-categories/
rien à faire.... je n'ai pas de menu déroulant sur IE 6 !!
Est ce que qq chose m'aurait échappé ?
Merci

Link to comment
Share on other sites
  • 1 month later...
maxhome Newbie

maxhome

Posted
Posted

Bonjour,

Avant toute chose merci à toi, Cédric Girard, de nous avoir fait partager ton travail et ce menu, facilement personnalisable.
Merci à Atch pour la correction car je m'arrachais les cheveux car les sous-menus n'apparaissaient pas...

Il me reste juste un petit problème, car je ne suis qu'un modeste bidouilleur...lol

Comment aligner verticalement le texte dans les cellules du menu, car j'ai réduit la largeur, le menu passe sur 3 lignes, jusque là aucun problème mais le texte reste aligné en haut....

Vertical-align etc marche pas ou alors je ne l'ai pas mis au bon endroit....
Une idée

Merci à vous

Edit:
si je mets
div#menu a {
/* text-transform: uppercase; */
line-height: 10px;
vertical-align: middle;
text-align: center;
font-weight:bold;

ça aligne mais regardez le résultat, la hauteur s'adapte au contenu, grrrrrrrrrrr

9505_BnLkDqW8hdZ0R6QhF7NJ_t

9506_WO5iYKssx2rvKQZJHxbO_t

Link to comment
Share on other sites
maxhome Newbie

maxhome

Posted
Posted

bonjour, j'ai pas encore mis le csshover3.htc pour la compatibilité, j'essaye

edit:
J'ai suivi le tuto et ajouter la prise en charge csshover3.htc pour IE6, tu peux reessayer?

Merci à tous

edit: apparement sous ie6 et 7 marche pas?!

Link to comment
Share on other sites
Cédric Girard Newbie

Cédric Girard

Posted
  • Author
Posted

Bonjour

Je ne sais pas pourquoi, mais sur certains sites ça fonctionne sous IE6 avec le fichier csshover, et pas sur d'autres... Vraiment pénible :-(

Quoi qu'il en soit je suis en train de voir pour remodifier ce menu sur mes sites car lorsqu'il y a trop de catégories, cela génère trop de liens et pénalise le positionnement (par ex. sur "Master Materiel" j'ai +100 catégories en tout ; du coup j'ai désactivé le 2ème niveau de sous-menu, mais je vais devoir carrément changer le truc car cela fait trop de texte avant le contenu de la page...)

Link to comment
Share on other sites
maxhome Newbie

maxhome

Posted
Posted

Ecoute Cédric, à part ce désagrement d'IE6, pour moi que du bonheur ton menu...
A nous d'expliquer aux gens qu'il faut enfin abandonner ie6....trop de galère pour rendre compatible sous tous les navigateurs...

Par contre une p'tite question en passant, Atch a essayé d'y répondre:

Le texte, si tu imposes une largeur passe sur 2 lignes, normal, c'est d'ailleurs ce que je voulais: mais il n'est pas centré verticalement...
Par ailleurs, est-il possible d'ajouter une flèche (ou tout autre gif) si le menu possède des sous-catégories et ne pas la voir apparaitre en l'absence de sous-catégories...idem pour les sous-sous catégories?

Quoi qu'il en soit encore merci à toi pour ton excellent travail: pour moi le seul menu horizontal qui à ce jour mérite qu'on s'y intéresse...

Link to comment
Share on other sites
sofred Newbie

sofred

Posted
Posted

Je suis viens de finir de développer ce même type de menu en Flash avec un fichier xml. Il sera compatible avec tous les navigateurs. Il est en phase de test... Prêt d'ici un petit mois. Si ça intéresse quelqu'un ?
Good Job Cédric !
A +++

Link to comment
Share on other sites
jolvil Newbie

jolvil

Posted
Posted
Je suis viens de finir de développer ce même type de menu en Flash avec un fichier xml. Il sera compatible avec tous les navigateurs. Il est en phase de test… Prêt d’ici un petit mois. Si ça intéresse quelqu’un ?


Bien sur que cela nous interesse ;-)

Ecoute Cédric, à part ce désagrement d’IE6, pour moi que du bonheur ton menu…
A nous d’expliquer aux gens qu’il faut enfin abandonner ie6….trop de galère pour rendre compatible sous tous les navigateurs…


Malheureusement ce n'est pas aux clients à s'adapter à nos boutiques mais bien nous à nous adapter à toutes les configurations de nos clients, pourquoi se battre pour gagner des visiteurs et perdre ceux qui sont equipés de certains navigateurs ? pour ma part, une boutique doit fonctionner sans problemes avec n'importe qu'elle configuration !

maxhome
il y a ce menu horizontal avec les petites fleches qui fonctionne bien avec IE6
http://www.prestashop.com/forums/viewthread/13193
J'ai juste un probleme avec Explorer 6 et 7, le menu passant sous les slideshow
Link to comment
Share on other sites
sofred Newbie

sofred

Posted
Posted

Je vous ferais signe... Promis
En terme de marketing le débat sur IE6 est vite clos ! Pas le choix que de s'adapter aux navigateurs de nos internautes ! Prendre un risque de perdre entre 15 et 25 % de visiteurs... C chaud ! Trop de gens débute, n'ose pas mettre à jour leur navigateur, ...
Même si on est tous d'accord à dire que IE6 est §('§è§" de navigateur de &é"('&é !!!
Donc une boutique doit être et sera inévitable compatible avec IE6 (qui pose le plus de pb) et autres. Tous à vos CSS !!!

Link to comment
Share on other sites
sofred Newbie

sofred

Posted
Posted

L'avantage du Flash est qu'il est compatible tous navigateurs (et généralement le player est 95 % à jour)...
Pour les réfractaires du flash il n'y aura pas de pb au niveau référencement (via le fichier xml...) donc encore mieux qu'un javascript !

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted
salut

j'ai fait tous les manips et ça marche pas, je suis sur google chrome pensez vous que c à cause de ça?


Salut,

Non je crois pas, j'avais testé à l'époque avec Chrome et ça fonctionnait.

Atch
Link to comment
Share on other sites
nizar Newbie

nizar

Posted
Posted

ok merci Atch


EDIT :

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

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted
ok merci Atch

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


Quand vous etes dans modules/positions et sur le "hook" column left, cliquez sur la croix rouge en face de block catégorie.

ensuite pour ajouter les catégories dans le top, il suffit d'aller dans

modules/positions/greffer/ et choisir "bloc categories" dans "top of pages".

Bon conrage, tu y es presque....

V++

Atch
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...