Jump to content

Couleur BackGround d'un Onglet de Menu


Recommended Posts

Bonjour, 

 

Je dispose d'un menu sur mon prestashop (1.6.0.6) et je souhaiterai que l'un des onglets de ce menu ai une couleur de background différente de celle des autres onglets. Comment dois-je modifier le fichier css ?

 

Merci d'avance

Edited by Franque (see edit history)

Share this post


Link to post
Share on other sites

Avec le module de menu de base, je crains qu'il n'y ai pas de solution, car rien ne vous permet de cibler précisément votre onglet (hormis la nouvelle propriété CSS :nth-child(), mais peu compatible avec les anciens navigateurs).

 

Pour plus de contrôle sur votre menu, il vous faudrait passer à un module de menu avancé.

Share this post


Link to post
Share on other sites

Avec le module de menu de base, je crains qu'il n'y ai pas de solution, car rien ne vous permet de cibler précisément votre onglet (hormis la nouvelle propriété CSS :nth-child(), mais peu compatible avec les anciens navigateurs).

 

Pour plus de contrôle sur votre menu, il vous faudrait passer à un module de menu avancé.

 

C'est pas le menu de base que je dispose. Le menu que j'ai ( et dont le code est au dessus ), fait partie d'un thème que j'ai acheté..

Edited by Franque (see edit history)

Share this post


Link to post
Share on other sites

 

 

( et dont le code est au dessus )

 

 

Si c'est un menu custom, voyez si vous avez moyen de spécifier une classe CSS pour un onglet.

Cela vous permettrait de la cibler en CSS.

 

Sinon, donnez le lien du site, que l'on puisse voir si la structure HTML ne permet pas de cibler un onglet en particulier.

Share this post


Link to post
Share on other sites

 

Si c'est un menu custom, voyez si vous avez moyen de spécifier une classe CSS pour un onglet.

Cela vous permettrait de la cibler en CSS.

 

Sinon, donnez le lien du site, que l'on puisse voir si la structure HTML ne permet pas de cibler un onglet en particulier.

 

 

 

Le code du css du menu n'a pas était enregistré, le voici : 

.spanOption,.spanOptionList,.spanColumn{
	position: absolute;
	position: relative\9; /* For IE9 */
    position: relative \9; /* For IE8*/
}
#menu {clear:both;padding:0;background:#141414;width:100%;float:left;margin:0}
#menu ul.ul_mega_menu{text-align:left;width:100%;}
#menu ul  li.menu_item{width:auto;float:left;display:inline-block;position:relative;margin:0;padding:0;background: url(../img/bkg_li_item.jpg) repeat-y  right top;}
#menu ul  li.menu_item a.title_menu_parent{padding:10px 20px;color:#fff;font-size:16px;text-transform:uppercase;font-family:"Oswald",Helvetica,Arial, Verdana, sans-serif;display:block}
#menu ul  li.menu_item a:hover{color:#ff7800}
#menu > ul > li:last-child{padding-right:0}

#menu > ul > li ul > li{padding:5px 20px;display:block;width:auto;position:relative;z-index:20;}
#menu > ul > li ul > li.category_item{padding:0;margin:5px 20px 10px;}
#menu > ul > li ul > li.parent a.cat_child{background: url(../img/bkg_arrow.png) no-repeat  right 6px;padding-right:10px;}
#menu ul  li.menu_item.parent:hover > a.title_menu_parent{background: url(../img/arrow.png) no-repeat  bottom center;transition: none 0s ease 0s;}
#menu > ul  li > div.options_list,
#menu > ul  li > div.sub_menu,
#cs_megamenu_more .more-menu{top:auto;
	margin:0;background:#fff;
	position: absolute;
	z-index:100;
	padding:25px 0 0;text-align:left;
	transition:opacity 0.8s ease 0s;
	/*opacity:0;
	filter:alpha(opacity=0);*/
	box-shadow:0 2px 5px #aeaeae;
	display:none;
}

#menu > ul  li:hover > div.options_list,
#menu > ul  li:hover > div.sub_menu,
#cs_megamenu_more:hover .more-menu{opacity:1;filter:alpha(opacity=100)}

#menu > ul  li > div.sub_menu{width:auto!important}
#menu > ul > li > div {	display: none;}
#menu > ul > li:hover > div {display: block;}
/*#menu  ul ul > li.parent div.sub_menu{opacity:0;filter:alpha(opacity=0)}*/
#menu ul li.parent:hover,#menu > ul > li ul > li.parent:hover{z-index:100}
#menu  ul ul > li.parent:hover div.sub_menu{left:95%;top:-25px;z-index:100;padding-top:20px;/*opacity:1;filter:alpha(opacity=100)*/}
#menu  ul li.parent:hover div.sub_menu{z-index:100}
#menu > ul li.menu_item > div a{
	color:#969696;
	display:block;
	padding:0;height:auto;
	margin:0;z-index:20;position:relative;}
#menu > ul li.menu_item > div a:hover{transition: all 0.5s ease 0s;color:#141414;text-decoration:none;}
#menu > ul > li > div > ul {
	display: table-cell;
}
#menu ul li#cs_megamenu_more  div ul{display:block}
#menu > ul > li .options_list ul{float:left;padding-bottom:25px;}
#menu > ul > li .options_list ul.manufacture{padding-bottom:0;}

#menu > ul > li div a.cat_parent{padding:0 22px;display:block;}
#menu > ul > li div a.cat_parent img{display:block;margin-bottom:10px;max-width:100%}
#menu > ul > li div a:hover,#menu > ul li.menu_item > div a:hover,#menu ul li .product_item a:hover {
	color:#141414;text-decoration:none;transition: all 0.5s ease 0s;
}

/*#menu .option ul li {position: relative;}
#menu ul li ul li{position:relative}*/
#menu ul li ul li:hover > div.sub_menu{display:block;z-index:100}
#menu ul li .div_static{margin:0;padding:0 20px;}
#menu ul li .div_static > div{margin-bottom:18px;}
#menu ul li .div_static  .static_menu_6{margin-bottom:10px;}
#menu ul li .div_static a{text-align:center;display:block;padding-bottom:10px}
#menu ul li .div_static a img{max-width:100%}
#menu ul li .div_static h3{padding-bottom:13px;font-size:14px;text-transform:uppercase}
#menu ul li .div_static h3.title_2{margin-top:10px;border-top:1px dotted #c8c8c8;}
#menu .column.product li.product_item p{color:#fff;padding-left:12px;}
#menu ul li div.out_cat_parent{display:block;padding:0 20px;text-align:left}
#menu ul li div.out_cat_parent a,
#menu ul li .div_static h5{color:#1e1e1e;padding-bottom:10px;text-transform:uppercase;font-size:14px;}
.option > .name_cat_parent{padding:0 20px 5px;color:#141414;text-transform:uppercase;font-size:14px;}
.div_static h4.title_block{color:#141414;text-transform:uppercase;font-size:14px;font-weight:400}
#menu .option > .name_cat_parent a{color:#141414;}
#menu .option > .name_cat_parent a:hover{color:#ff7800}
#menu > ul > li .out_cat_parent a{padding:0;display:block;text-align:left}
#menu ul li.cs_m_manufacter  div.options_list{padding:20px 20px 0 0}
#menu ul li .manufacture .product_item{width:auto;float:left;padding:0 25px 25px;}
#menu ul li .manufacture .product_item a{display:block;text-align:center;}
#menu ul li .manufacture .product_item a img{max-width:100%;vertical-align:top}
#menu ul li .ajax_block_product{padding:0 20px!important;overflow:hidden}
#menu ul li .ajax_block_product + .ajax_block_product{margin-top:20px;}
#menu ul li .ajax_block_product,#menu ul li .ajax_block_product a {}
#menu ul li .ajax_block_product .product_image_menu{display:block;padding:1px;border:1px solid #dcdcdc;margin-bottom:10px;text-align:center}
#menu ul li .ajax_block_product .product_image_menu img{max-width:99%}
#menu ul li .ajax_block_product h3 a{color:#646464;font-size:14px;display:inline;}
#menu #cs_megamenu_more li .name_product{clear:both;display:block}
#menu ul li a.product_image{text-align:center}
#menu ul li .ajax_block_product a:hover{text-decoration:none}
#menu ul li .ajax_block_product p{margin:0 0 5px}
#menu ul li .ajax_block_product p.price_container{margin:10px 0 15px}
#menu ul li .ajax_block_product .exclusive{width:auto;padding:0 10px;display:inline-block;height:32px;line-height:32px;color:#fff;}
#menu ul li .ajax_block_product .exclusive:hover{text-decoration:none}
.cs_hide_p .name_product,.cs_hide_p  .price{display:none}
#menu ul li.cs_hide_p  .ajax_block_product .image{float:none;padding:0;margin-bottom:10px;}
#menu ul li .ajax_block_product .exclusive:hover{color:#fff;}
.cs_st_img {text-align:center;margin-bottom:10px;}
.cs_st_img  img{max-width:100%}
/* Responsive Menu */
#megamenu-responsive{
    width:100%;position:relative;z-index:98;clear:both;
    line-height:17px;display:none;text-align:left
}

.menu-toggle > p{ background: url("../img/menu.png") no-repeat scroll 50% center transparent;
    display: block;
    float: left;
    height: 30px;
    left: 5px;
    margin: 0;
    position: absolute;
    top: 3px;
    width: 30px;
}

#megamenu-responsive-root li.menu-toggle{
    padding:10px 10px 10px 40px;
    background:#141414;
    color:#fff;
    font-size:16px;
    cursor:pointer;position:relative;margin-bottom:5px;
}


#megamenu-responsive-root{text-align:left}
#megamenu-responsive-root li.root{padding:0}
#megamenu-responsive-root > li{padding:10px 0;display:block;font-family:"Oswald",Helvetica,Arial, Verdana, sans-serif;text-transform:uppercase;color:#fff}
#megamenu-responsive-root > li a{padding:10px;display:block;background:#141414;color:#fff;text-align:left;  font-family:"Oswald",Helvetica,Arial, Verdana, sans-serif;text-transform:uppercase;margin-bottom:5px; }
#megamenu-responsive-root ul li li li a{text-transform:none}
#megamenu-responsive-root li.root > ul{
    display:none;
}

#megamenu-responsive-root li.root.open > ul{
    display:block;
}

#megamenu-responsive-root li.parent > ul{
    display:none;
}


#megamenu-responsive li.parent {clear:both
}
#megamenu-responsive .root li{padding:0;}


#megamenu-responsive .root li a:hover{
    color:#ff7800;text-decoration:none
}

#megamenu-responsive li.parent ul{clear:both;}
#megamenu-responsive .root li ul{padding:0;overflow:hidden}
#megamenu-responsive .root li li ul{padding:0 5px;}
#megamenu-responsive ul span{}

#megamenu-responsive a{
    display:block;
}

#megamenu-responsive li.parent > a span{
    display:block;
}

#megamenu-responsive li.parent > p{
    display:block;
    float:right;
    padding:0 10px;
    width:10px;min-height:18px;line-height:1.35;
    text-align:center;
    cursor:default;
    font-weight:700;
    font-size:24px;
    color:#fff;
    margin:0;
}

#cs_megamenu_more .more-menu{right:0;width:180px!important;padding:10px 0;}
#menu #cs_megamenu_more ul li.menu_item {padding:5px 20px;width:140px;background:none}

#cs_megamenu_more .more-menu div.options_list{top:0}
/* Media Queries */
@media only screen and (min-width:1024px) and (max-width: 1279px) {
	
	#menu > ul > li div a.cat_parent img{width:100%}
}
@media only screen and (max-width: 1023px) {
	#menu ul li.menu_item a{min-width:auto;padding:0 10px}
	#menu > ul > li div a.cat_parent img{width:100%}
	#menu > ul > li .options_list ul{margin-bottom:15px}
}

@media only screen and (max-width: 767px) {
	#menu{display:none!important;}
	#megamenu-responsive{display:block;margin-bottom:10px}
	#menu > ul > li .options_list ul{width:100%!important;}
}

/* ipad */
#cs_megamenu_more .more-menu li:hover div.options_list{display:block;left:auto;right:100%;}
#cs_megamenu_more .more-menu li:hover div ul li div.options_list{display:none;}
#cs_megamenu_more .more-menu li:hover div ul li:hover div.options_list{display:block;}
#menu #cs_megamenu_more .more-menu li a.title_menu_parent{padding:0;color:#969696}
#menu #cs_megamenu_more .more-menu li a.title_menu_parent:hover{color:#141414}
/*.spanOption,.spanColumn{display:none}*/
/* ipad hover */
/*@media only screen and (min-width:768px) and (max-width:1199px){
#menu ul li.level-1.parent{padding-right:3px;padding-left:7px;}
}*/

.spanColumn,.spanOption{display:none}
Edited by Franque (see edit history)

Share this post


Link to post
Share on other sites

Rien dans l'html du menu ne nous permet de cibler un onglet présicement.

Votre seul option est donc la propriété :nth-child en css

.ul_mega_menu li:nth-child(2) {
    background: #ff0000;
}

Devrait cibler le 2eme onglet.

Par contre, c'est du CSS3, peu compatible avec les vieux navigateurs.

Share this post


Link to post
Share on other sites

Rien dans l'html du menu ne nous permet de cibler un onglet présicement.

Votre seul option est donc la propriété :nth-child en css

.ul_mega_menu li:nth-child(2) {
    background: #ff0000;
}

Devrait cibler le 2eme onglet.

Par contre, c'est du CSS3, peu compatible avec les vieux navigateurs.

 

Merci pour votre réponse rapide.

Donc en rajoutant seulement ça à la suite, dans le code css gérant le menu, cela fonctionnera ?

Share this post


Link to post
Share on other sites

Oui et non, il faut lire !

Ça fonctionnera sur les navigateur le supportant :)

 

Et mon code n'est qu'un exemple. Je vous montre juste la propriété CSS nth-child(n)

Vous en faite ce que vous voulez ensuite.

Share this post


Link to post
Share on other sites

Oui et non, il faut lire !

Ça fonctionnera sur les navigateur le supportant :)

 

Et mon code n'est qu'un exemple. Je vous montre juste la propriété CSS nth-child(n)

Vous en faite ce que vous voulez ensuite.

 

Oui j'ai bien compris pour les anciens navigateurs ;)

 

Je vais essayer voir ci cela fonctionne

 

Merci

Share this post


Link to post
Share on other sites

Après avoir essayé de mettre le code suivant dans le fichier css, c'est les deuxièmes onglets des sous menu qui est passé (en l'occurrence) orange .. mais pas l'onglet principal.. Avez vous des idées de comment dois je faire ?

 

.ul_mega_menu li:nth-child(3) {

    background: #FF7F50;
}
 
Merci

Share this post


Link to post
Share on other sites

Probablement une mauvaise utilisation de nth-child de ma part  : http://www.w3schools.com/cssref/sel_nth-child.asp

 

Pourtant votre code semble correct, car en l'occurrence, pour les onglets du menu c'est bien "li" qu'il faut mettre, mais le css semble "zaper" les premiers pour directement passer au sous-menu

 

Cela ne fonctionne donc pas pour les onglets principaux

Edited by Franque (see edit history)

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 6 months later...

Bonjour, jespere toujours vous aidez en repondant a votre preocupation. Voici le code a inserer:

 

 .sf-menu  li:nth-child(7) {
    background: #ff0000;
}
au lieu de
 

.ul_mega_menu li:nth-child(3) {

    background: #FF7F50;
}
EXPLICATIONS:
 .sf-menu : nom du menu (pour moi) 
 

 li:nth-child(7) : selectionne de 7e onglet

Share this post


Link to post
Share on other sites

.sf-menu a[href*=13]{background: #votrecouleur;}

 

je ne cible pas avec hommes sinon vous aller avoir d'autres catégories qui comportent hommes qui vont être ciblée. En ciblant avec le numero ca devait etre bon

 

Juste pour info votre site est extrêmement lent à charger.

 

N'oubliez pas de vider le cache pour voir le changement.

Share this post


Link to post
Share on other sites

  • 1 month later...

.sf-menu a[href*=13]{background: #votrecouleur;}

 

je ne cible pas avec hommes sinon vous aller avoir d'autres catégories qui comportent hommes qui vont être ciblée. En ciblant avec le numero ca devait etre bon

 

Juste pour info votre site est extrêmement lent à charger.

 

N'oubliez pas de vider le cache pour voir le changement.

 

Génial ! ca fait 15 j que le chercher une solution , ca fonctionne presque parfaitement jusqu'au 1.6.0.14

le seul soucis c'est que la categorie n'est pas stricte je m'explique : si on met 13 dans le href , tout ce qui termine par 13 se retrouve coloré (113,213)

comment peut on donner une valeur stricte ?

 

auriez vous par contre dans le meme temps une idée pour changer le hover dans le meme style ?

 

Merci

Edited by organizetmoi (see edit history)

Share this post


Link to post
Share on other sites

C'est la même chose si c'est pour le background

 

.sf-menu a[href*=13]:hover {background: #votrecouleur;}

 

Bonjour et merci

ce n'est pas du background dont je parlais pardon , mais du background hover (a:hoverforce) ,

ce qui est plus embettant c'est l'histoire de "categorie stricte" , auriez vous une idée ?

j'ai laisser en prod un exemple sur le site http://mafete.fr pour vous eclairer

Bonne journée

Edited by organizetmoi (see edit history)

Share this post


Link to post
Share on other sites

 background hover (a:hoverforce) 

 

J'ai rien compris  :wacko: 

c'est plutôt a:hover {background:----;}

 

 

categorie stricte

 

Non plus  :rolleyes: 

 

Vous voulez dire que ca touche plusieurs catégories ? Dans ces cas la il faut essayer de cibler au maximum la catégorie avec des mots qui n’appartienne qu'à elle.

Share this post


Link to post
Share on other sites

 background hover (a:hoverforce) 

 

J'ai rien compris  :wacko: 

c'est plutôt a:hover {background:----;}

 

 

categorie stricte

 

Non plus  :rolleyes: 

 

Vous voulez dire que ca touche plusieurs catégories ? Dans ces cas la il faut essayer de cibler au maximum la catégorie avec des mots qui n’appartienne qu'à elle.

 

Mdrrr ^_^  je 'ai jamais été doué dans mes explications lol

 

par categorie stricte :

lorsque j'utilise ce code :.sf-menu a[href*=13]:hover {background: #votrecouleur;}    cela fonctionne , sauf que j'ai mes categories : 113 - 213 - 313 qui prennent donc la couleur aussi , lorque j'utilise les mots clés le code ne fonctionne pas du tout chez moi.

 

pour le bakground :

en utilisant votre code , cela me colore bien les differentes categorie , mais comment changer la couleur par "onglet categorie" au survol de la souris ?

 

j'espere avoir été un peu plus comprehensible (et c'est pas gagné :D )

 

j'ai laissé un exemple en ligne si ca peut vous aider

Cdt

Share this post


Link to post
Share on other sites

Donc il faut remplacer 13 par 213 ou 313 etc .... pour cibler au mieux. Le code que j'ai donné signifit un lien qui contient 13, remplacez par un lien qui contient 213 ou 313 etc ....

13 c'était pour l'exemple.

 

du coup pour le changement par onglet catégorie c'est pareil, cibler mieux.

 

Je ne voit pas l'adresse de votre site.

Share this post


Link to post
Share on other sites

Donc il faut remplacer 13 par 213 ou 313 etc .... pour cibler au mieux. Le code que j'ai donné signifit un lien qui contient 13, remplacez par un lien qui contient 213 ou 313 etc ....

13 c'était pour l'exemple.

 

du coup pour le changement par onglet catégorie c'est pareil, cibler mieux.

 

Je ne voit pas l'adresse de votre site.

 

http://mafete.fr

j'ai toujours pas été clair je crois :lol:

 

je veut utiliser : 13

je ne veut pas de 113, 213,313 justement :D

Edited by organizetmoi (see edit history)

Share this post


Link to post
Share on other sites

La il y a un hover bleu foncé sur tout les lien, il faut le supprimer puis cibler chaque lien indépendamment.

 

Pour le premier vous mettez .sf-menu a[href*=18-deguisement]

 

Génial ! ca fonctionne

il ne me reste plus que le survol mais pas urgent tout ca

 

merci beaucoup pour votre aide (et dsl pour l'incompréhension de mes messages :D )

bonne journée !!

Share this post


Link to post
Share on other sites

Pour le survol c'est pareil.

 

Dans

li.sfHover > a.sf-menu > li > a:hover,.sf-menu > li.sfHoverForce > a 
 
Supprimer la ligne
  1. background#0131B4; c'est la couleur bleu foncé du hover

 

et créer un nouveau selecteur

.sf-menu a[href*=18-deguisement]:hover{background: #votrecouleur;}

  • Like 1

Share this post


Link to post
Share on other sites

Pour le survol c'est pareil.

 

Dans

li.sfHover > a.sf-menu > li > a:hover,.sf-menu > li.sfHoverForce > a 
 
Supprimer la ligne
  1. background#0131B4; c'est la couleur bleu foncé du hover

 

et créer un nouveau selecteur

.sf-menu a[href*=18-deguisement]:hover{background: #votrecouleur;}

 

Une tuerie :P  merci beaucoup !

(je n'oublierais pas quand j'aurais un budget pour refaire le design ;) )

Share this post


Link to post
Share on other sites

N’hésitez pas notre graphiste est très talentueuse   :D et on est pas cher  :rolleyes:

 

oula , j'ai un gros soucis  ! :wacko::blink:

 

lorsque mes clients arrivent sur la page de commande , le menu se deplie totalement empechant de voir les articles dans le panier

pour voir l'exemple il faut mettre un article dans le panier et aller jusqu'au processus de commande : http://mafete.fr/commande-rapide

 

un idée pour m'aider ??

Share this post


Link to post
Share on other sites

oula , j'ai un gros soucis  ! :wacko::blink:

 

lorsque mes clients arrivent sur la page de commande , le menu se deplie totalement empechant de voir les articles dans le panier

pour voir l'exemple il faut mettre un article dans le panier et aller jusqu'au processus de commande : http://mafete.fr/commande-rapide

 

un idée pour m'aider ??

resolu

j'avais un bout de code qui embetait le monde

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Bonjour,

 

Merci pour ce code car je cherchais justement à attribué un backgound différent pour un item de mon menu prestashop.

 

Seulement, j'ai un souci :

 

Le code :

.jetmenu a[href*="http://www.lesdoigtsfleuris.com/jardin/"]{background: #EB8561;}

Ce code ne devrait modifier que la couleur du background de "BLOG ALTERNATIF JARDIN". Or, l'item "AMENAGEMENT & CREATION JARDIN" subit aussi cette modification (sans doute car la racine du lien hypertexte est la même).

 

Voici le lien pour mieux comprendre : http://www.lesdoigtsfleuris.com

 

Avez-vous une brillante idée ? :)

 

Merci beaucoup !!!

 

Grunjo

Share this post


Link to post
Share on other sites

  • 9 months later...

Donc il faut remplacer 13 par 213 ou 313 etc .... pour cibler au mieux. Le code que j'ai donné signifit un lien qui contient 13, remplacez par un lien qui contient 213 ou 313 etc ....

13 c'était pour l'exemple.

 

du coup pour le changement par onglet catégorie c'est pareil, cibler mieux.

 

Bonjour et désolée pour le déterrage...

 

J'essaye désespérément d'appliquer une couleur à un onglet mais en appliquant le code :

.sf-menu a[href*=ID_catégorie]{background: #macouleur;}  les sous-catégories sont surlignées de la couleur appliquée à l'onglet menu

 

Comment faire pour que la couleur s'applique uniquement à l'onglet catégorie et pas au texte des sous-catégories ? 

 

Merci :)

 

    

Share this post


Link to post
Share on other sites

  • 2 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
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More