[RESOLU] Limiter à 2 sous-niveaux le "Menu Haut Horizontal"

[alexvanni]

Bonjour à tous,

 

Je suis novice sur Prestashop et cela fait plusieurs jours que je recherche désespérément comment limiter en profondeur mon "Menu Haut Horizontal" afin de n'afficher que 2 niveaux de sous catégories.

 

Je sais qu'il est facile de réaliser cette opération depuis le back-office pour le module "Bloc catégorie" mais c'est plus délicat pour le "Menu Haut Horizontal".

 

Je suppose qu'il faut modifier un des fichier blocktopmenu.tpl ou blocktopmenu.php, mais impossible pour moi de trouver les modifications à apporter.

 

Je remercie d'avance celui ou celle qui voudra bien se donner la peine de m'apporter la solution.

 

Cordialement.

Edited September 19, 2013 by alexvanni (see edit history)

[Szed]

Hello,

 

tu dois pouvoir trouver une réponse ici : http://www.prestashop.com/forums/topic/275919-supprim%C3%A9-les-sous-sous-cat%C3%A9gories-blocktopmenu/

[alexvanni]

Merci beaucoup pour cette réponse rapide, j'ai essayé avec Firebug de placer des "display: none" un peu partout mais je ne parviens malheureusement pas à trouver la ou les lignes qui correspondent aux niveaux 3, 4, 5 etc...

 

La difficulté et que je souhaite garder les menus déroulants mais seulement pour les 1er et 2ème niveaux de sous catégories.

 

Exemple :

 

     Catégorie principale

                          

            => Sous-catégorie niveau 1

 

                    => Sous-catégorie niveau 2

 

                            => Sous-catégorie niveau 3

 

                                   => Sous-catégorie niveau 4                                  

[Szed]

En fait la ligne .sf-menu ul ul, cible le second niveau de sous menu. 

Donc si tu veux n'afficher que les 2 premiers niveaux, tu peux faire :

.sf-menu ul ul ul{
    display:none !important;
}

On cible ici les sous menu de niveau trois. Ceux qui ont deux "menu parents" dans l'arborescence. (.sf-menu étant le "ul" principale du menu)

Le 3ème niveau de sous menu, et tout ce qu'il contient (4eme, 5eme sous niveau, ou etc.) sera caché.

 

Le plus simple c'est que tu colle cela dans ton global.css, et tu regardes à quels niveaux apparaissent et lesquels n'apparaissent plus

[alexvanni]

Merci beaucoup pour cette réponse -très rapide encore une fois !), je teste ça immédiatement et je vous tiens informé du résultat 

[alexvanni]

Bingo ça fonctionne !

 

Un grand grand merci pour votre aide.

 

Dans mon cas voici la modification que j'ai apportée :

 

Dans le fichier superfish-modified.css qui se trouve dans themeXXX/css/modules/blocktopmenu/css, j'ai rajouté la ligne de code suivante :

.desktop #menu-custom ul ul ul{
	display: none!important;

Bravo Szed ! 

[Ecom]

Bonjour,

 

Je souhaite faire la même chose dans la version 1.11. 

Ou est ce que ca se trouve?

Merci.

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  float: left;
  width: 100%; }

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  background: #2e2e2e; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #2e2e2e; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  float: left;
  border-right: 1px solid #585858; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 15px;
        width: 30px;
        height: 30px;
        z-index: 2;
        color: #fff; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 900 24px/29px "Roboto", sans-serif;
    text-transform: uppercase;
    color: #fff;
    display: block;
    position: relative;
    padding: 10px 28px 11px 28px; }
    @media only screen and (min-width: 767px) {
      .sf-menu > li > a:before {
        position: absolute;
        top: -6px;
        left: 0;
        width: 100%;
        content: '.';
        text-indent: -5000px; } }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    text-shadow: 2px 2px black;
    background: #3b3b3b;
    color: white; }
    .sf-menu > li.sfHover > a:before,
    .sf-menu > li > a:hover:before, .sf-menu > li.sfHoverForce > a:before {
      border-top: 6px solid #58af19; }

.sf-menu li li li {
  border-top: 1px solid #585858; }

.sf-menu li li li a {
  display: block;
  position: relative;
  color: #fff;
  font-size: 13px;
  line-height: 38px;
  font-weight: 300;
  padding: 0 9px 0 9px; }
  .sf-menu li li li a:hover {
    text-shadow: 2px 2px black;
    background: #3b3b3b;
    color: white; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 50px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none; }

.sf-menu li li li li a {
  padding-left: 25px; }

.sf-menu li li li ul {
  padding: 0 0 0 0px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 900 16px/20px "Roboto", sans-serif;
    color: #fff; }
    .sf-menu > li > ul > li > a:hover {
      color: #f1f1f1; }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
       } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li#category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li#category-thumbnail > div {
    float: left;
    padding: 0 0 8px 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li#category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li#category-thumbnail > div:first-child {
       }
    .sf-menu > li > ul > li#category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 900 24px/29px "Roboto", sans-serif;
      text-transform: uppercase;
      color: #fff;
      display: block;
      padding: 10px 40px 11px 28px;
      background: #2e2e2e;
      position: relative; }
      .cat-title:hover {
        background: #2e2e2e;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 11px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

Edited April 16, 2014 by Ecom (see edit history)

[Ecom]

Je me réponds à moi même, c'est à la ligne 116 que ca se passe.

Il suffit de la commenter

/*supprime le 3 eme niveaux de catégorie*/
/*.sf-menu li li li li a {
  padding-left: 25px; }*/

[Ecom]

En fait il faut mettre cela a la fin du fichier

/*supprimer le dernier niveau */
.sf-menu li ul li ul li ul{display:none !important;}

[jetdy]

Bonsoir a tous

j'ai tenter en vain d'ajouter plus de 6 categorie du menu horizontal sur prestashop 1.7 ca ne s'affiche pas le comble c'est que au niveau du back office sa apparait

s'il vous plait besoin d'etre.

cordialement.