cacher sous catégories menu haut horizontal

BCVITA · April 17, 2014

Bonjour,

ayant pas mal de catégories, elles ne sont pas toutes visibles dans le menu haut horizontal qui intègre aussi les sous catégories.

Savez-vous comment masquer les sous catégories pour que je puisse afficher plus de catégories ?

merci.

BC

claudie · April 17, 2014

Si c'est ce que vous cherchez la réponse est ici :

http://www.prestashop.com/forums/topic/320254-r%C3%A9soluliens-des-sous-sous-cat%C3%A9gories-barre-de-nav-presta-1605/?hl=%2Bsous+%2Bsous+%2Bcategorie&do=findComment&comment=1623019

BCVITA · April 17, 2014

Bonjour Claudie,

je vous remercie pour votre réponse rapide.

vous indiquez en fin de post :

C'est effectivement ligne 73 mais du css global du topmenu

Dans le css du blocktopmenu il y a blocktopmenu.css et superfish-modified.css.

je ne vois pas ou intervenir.

merci d'avance.

claudie · April 17, 2014

Bonjour Claudie,

je vous remercie pour votre réponse rapide.

vous indiquez en fin de post :

C'est effectivement ligne 73 mais du css global du topmenu

Dans le css du blocktopmenu il y a blocktopmenu.css et superfish-modified.css.

je ne vois pas ou intervenir.

merci d'avance.

En fait avec la version 1.6.0.6 il y a quelques modifications au niveau du code

c'est dans superfish-modified.css ligne 73

modifier comme suit :

sf-menu li li li a {

display: none;

position: relative;

color: #777777;

font-size: 13px;

line-height: 16px;

font-weight: bold;

padding-bottom: 10px; }

cdt

BCVITA · April 17, 2014

Re,

pour la dernière j'espère ;-)

je suis désolé mais je ne trouve pas les infos mentionnées.

Ci-dessous le détail de superfish-modified.css

bien à vous.

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

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;

}

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #4E4E4E;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #4e4e4e;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin: 6px 6px 0 0;

background: #fff url('../img/search.gif') no-repeat left center;

border:1px solid #777

}

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

BriceVanZeg · April 17, 2014

Je viens de faire un test, mais apparement, tu n es pas avec la version 1.6.0.6 ??

sinon, c bien le

"li li li a" ou il faut mettre un "display:none;"

Bon courage

Brice

claudie · April 17, 2014

si on parle bien de la dernière version de Presta à savoir 1.6.0.6 alors c'est bien à l'endroit indiqué.

Le code que vous affiché ne correspond pas à la dernière version.

Il vous faudra donc la télécharger

Désolé j'ai posté en même temps que Brice

Edited April 17, 2014 by claudie (see edit history)

BCVITA · April 18, 2014

Bonjour,

je vous remercie à tous les 2 !

cependant, le problème persiste.

j'étais bien en 1.6.0.6.

j'ai même téléchargé la version de base de prestashop 1.6.0.6 je suis allé voir dans le module blocktopmenu et dans son css, je suis allé cherché le fichier sperfish-modified.css.

c'est le même que le mien.

est-ce bien ce fichier là ?

modules/blocktopmenu/css/superfish-modified.css ?

je vous remercie pour votre diligence :-)

BriceVanZeg · April 18, 2014

Non, ce n est pas le fichier indiqué..!
Le superfish-modified.css qu il faut modifier a la ligne 74... ou environ, comme je te l ai deja dis.! se trouve :

themes >> css >> modules >> blocktopmenu >> css >> superfish-modified.css

Et là... ca marchera.. Sinon, faudra vraiment donner ton URL qu on puisse regarder car pour une petite chose comme ca.. y a pas a faire des post de 3 pages.! lol..

Allez, bon courage

Brice

BCVITA · April 18, 2014

Merci Claudie et Brice,

ca fonctionne !

erreur de fichier, je n'étais pas allé dans le thème mais directement dans le module !

merci bcp !

dln · June 18, 2014

Bonjour,

Voilà je me permet de relancer le Topic car j'ai une question en lien avec ce que vous venez de dire.

Je voulais faire la même chose et effectivement cela fonctionne seulement moi je voudrais que les sous-catégories (que l'on vient de faire disparaître), ré-apparaisse au survol de la catégorie parente.

merci de votre aide

SebastienSerre · June 18, 2014

salut

Bonjour,

Voilà je me permet de relancer le Topic car j'ai une question en lien avec ce que vous venez de dire.

Je voulais faire la même chose et effectivement cela fonctionne seulement moi je voudrais que les sous-catégories (que l'on vient de faire disparaître), ré-apparaisse au survol de la catégorie parente.

merci de votre aide

La valeur par défaut c'est display: block-inline;

par contre j'ai bien mis none et.... ca apparait toujours :-( www.ets-michel.com

SebastienSerre · June 18, 2014

Bonsoir j'ai réglé le "soucis" grace à ce post espagnol: http://www.prestashop.com/forums/topic/338311-menu-superior-160/?hl=%2Bblocktopmenu&do=findComment&comment=1707623

EN gros pour les non hispanophone, il faut désactiver la fonction "function desktopInit()" dans

Prestashop/theme/votre-theme/js/modules/blocktopmenu/js/blocktopmenu.js en ajoutant /* avant la 1ere ligne et */ apres la derniere comme ceci:

/* 
function desktopInit()
{
	mCategoryGrover.off();
	mCategoryGrover.removeClass('active');
	$('.sf-menu > li > ul').removeClass('menu-mobile').parent().find('.menu-mobile-grover').remove();
	$('.sf-menu').removeAttr('style');
	categoryMenu.superfish('init');
	//add class for width define
	$('.sf-menu > li > ul').addClass('submenu-container clearfix'); 
	 // loop through each sublist under each top list item
    $('.sf-menu > li > ul').each(function(){
        i = 0;
        //add classes for clearing
        $(this).each(function(){ 
                if ($(this).attr('id') != "category-thumbnail") 
                {
                    i++;
                    if(i % 2 == 1)
                        $(this).addClass('first-in-line-xs');
                    else if (i % 5 == 1)
                        $(this).addClass('first-in-line-lg');
                }
        });
    });
}
*/

dln · June 19, 2014

j'ai mal exprimé ce que je veux semble t'il!!

J'ai bien réussi à vire les sous-catégories du menu en passant de display: block-inline à display:none

Mais ce que je voudrais et je ne sais pas ou modifier cela dans le global.css, c'est que lorsque l'on passe la souris sur chaque catégorie, si il y a une sous-catégorie qu'elle s'affiche alors.

En gros je veux le meme résultat qu'avant mais seulement lorsque je survole les catégories dans le menu.

je sais pas si je suis plus clair.

ludo0.moreau · June 26, 2014

Bonjour à tous,

Je voudrais modifier le blocktopmenu pour avoir donc:

CAT1 CAT2 CAT3 CAT4

sous-cat1

sous-cat2

sous-cat3

sous-cat4

Mais par contre dans mon cas j'aurai par exemple 20 sous cat dans CAT2, 12 dans CAT3, et seulement 4 dans CAT1.

Je voudrais afficher 4 sous catégories par catégories principal dans le topmenu et si il y en a plus que 4 avoir un bouton voir + par exemple.

Merci de m'éclairer. J'espère avoir était clair.

C'est pour avoir un menu ou tout est bien aligné et affichant le meme nombre de sous catégories par catégories.

webadherhone · March 3, 2015

j'ai mal exprimé ce que je veux semble t'il!!

J'ai bien réussi à vire les sous-catégories du menu en passant de display: block-inline à display:none

Mais ce que je voudrais et je ne sais pas ou modifier cela dans le global.css, c'est que lorsque l'on passe la souris sur chaque catégorie, si il y a une sous-catégorie qu'elle s'affiche alors.

En gros je veux le meme résultat qu'avant mais seulement lorsque je survole les catégories dans le menu.

je sais pas si je suis plus clair.

Up ! Je cherche à faire la même chose.

guirou62 · March 6, 2015

Bonjour,

Je suis sous Prestashop 1.5.4.1 et j'aimerais qu'en version mobile (largeur<970px) le Js ne s'active pas pour faire apparaître les sous-catégories.

Le problème est que je n'arrive pas à voir ou mettre cette restriction, apparemment, c'est bien le JS et pas le CSS à modifier, il ne reste donc que les fichiers superfish-modified.js et hoverIntent.js. J'avais au départ modifié ce dernier: sur le pc, un clic gauche n'affichait pas les sous cat's contrairement au clic droit et sur mobile, les sous-catégories apparaissaient.

Je ne sais plus trop quoi modifier et où.

Merci d'avance pour vos réponses.

Guillaume Roussel

Onices · July 8, 2015

Up du post car j'aimerai un complémént

Est il possible de faire apparaître uniquement les catégories de niveau 1 et 2 et au survole que les sous catégories 3, 5,6 apparaissent ?

cacher sous catégories menu haut horizontal

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in