Jump to content

cacher sous catégories menu haut horizontal


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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;

}
Link to comment
Share on other sites

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 by claudie (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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');
                }
        });
    });
}
*/
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 8 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 months later...

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
×
×
  • Create New...