Modification du Top menu : d'horizontal à vertical

[lekidou]

Bonjour à tous,

 

J'ai modifié le top menu de ma boutique Prestashop en cours de construction.

 

Je souhaitais enlever le menu déroulant horizontal natif pour le remplacer par un menu déroulant vertical.

 

J'ai modifié mon superfish-modified.css selon des indications données sur le forum prestashop anglophone, mais j'ai deux ou trois détails à modifier et je ne sais pas comment...

 

Voici mon top menu actuel

 

 

Il y a 5 choses que je souhaite modifier :

- la largeur du bandeau (le faire aussi large que les onglets "Nouveautés" et "promotions" en dessous)

- si je modifie cette taille, le menu déroulant vient empiéter sur ce top menu. (comme on le voit ici, le bleu vient par dessus le rouge, et ça fait pas super propre)

- la longueur du menu déroulant, qu'il s'adapte automatiquement à la taille des sous-catégories (accessoires cheveux dépasse ici du cadre)

- les sous-catégories ne sont pas chacune bien alignées sous les catégories

- et enlever le pop up "accessoires beauté" qui vient se mettre quand on survole à la souris (l'encadré gris)

 

 

Merci pour ceux ou celles qui pourront m'aider

 

 

Voici mon superfish-modified.css complet

/*** ESSENTIAL STYLES ***/
.sf-contener {
	clear: both;
  float: left;
  width: 100%;
}
.cat-title {
display: none;
}
@media (max-width: 767px)
.cat-title {
display: block;
font: 600 18px/22px "Open Sans", sans-serif;
text-transform: uppercase;
color: #fff;
display: block;
padding: 17px 20px;
background: #00255E;
position: relative;
}
.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:100%;
	text-transform: uppercase;
	font: 600 16px/24px "Open Sans", sans-serif;
	background: #00255E;}
	@media (max-width: 767px) {
    .sf-menu {
      display: none; [spam-filter]
	  
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */}
	@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;
	position:		relative;
	border-right: 1px solid #001A42;
}
.sf-menu a {
	display:		block;
	position:		relative;
	color:#fff;
	border-bottom: 1px solid #00173B;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	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:44px;
	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(0, 37, 94, 0.9);
}
.sf-menu li li li {
	background:	rgba(0, 37, 94, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  	background: #BB133E;
}
.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:		#BB133E;
	outline:		0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	1.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;
}

Edited May 23, 2015 by lekidou (see edit history)

[lekidou]

Vraiment personne pour m'aider, ça ne doit pas être grand chose ?

[Mediacom87]

Bonjour,

en lisant votre demande j'ai constaté que vous mélangez les longueurs largeurs.

 

Donc vous avez changé la Hauteur de votre menu top et la Largeur des sous menu ne s'adapte pas ... et j'en passe.

 

Donc si vous ne comprenez pas ces termes vous êtes bien entendu dans l'incapacité de les modifier dans le css puisque vous inversez tout.

 

Votre demande n'est pas simple et en se fait pas à l'aide d'une baguette magique même pour quelqu'un de très habitué à faire du css.

 

Et dans votre cas de demande d'aide il faut bien comprendre que le gars doit posséder une installation identique à la votre mais comme vous ne donnez même pas la version de Prestashop utilisé ce n'est pas simple.

 

après il doit copier  le texte (vous ne l'avez pas mis en forme comme du code le signe <> dans le menu de mis een forme du forum) pour l'installer sur son site en espérant que cela donne le résultat que vous donnez.

 

Puis il doit réfléchir, chercher sur le net comment faire le mieux possible ce que vous demandez.

 

 

 

Par contre si vous aviez communiqué un lien vers votre site avec l'état actuel de vos travaux certainement que vous auriez eu une réponse.

[lekidou]

Désolé, mais je ne suis pas un pro du css, je débute.

J'ai réussi à me débrouiller seul pour la mise en forme de mon site en furetant sur le net sans demander d'aide, et tout est ok, sauf cette partie là...

 

Je suis sous la version 1.6, mais je ne peux pas mettre de lien de mon site car je le développe en local pour l'instant.

 

Je vais éditer mon poste pour mettre le css en code, et supprimer un problème que j'ai réussi à règler tout seul.

 

Merci en tout cas pour ces précisions, j'espère y avoir répondu

[Mediacom87]

Non, puisque le plus important serait d'accéder à votre site directement.

 

Perso je ne développe jamais en local du fait des contraintes de certains hébergements qui risque vous poser des soucis lors de la mise en ligne de votre site.

 

De plus travailler directement en ligne permet de prendre conscience lors du développement si le site est rapide ou pas et ainsi rapidement prendre la décision de changer d'hébergeur si cela s'avère nécessaire.