[Problème] Item menu horizontal couleur différente

[clem62]

Bonjour,

J'ai trouvé ce tutoriel, mais visiblement il y a un soucis avec mon menu
le tutoriel

voici le code que j'ai essayé

table, ul.art-hmenu
{
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
}
/* Personnalisation Couleur Items Menu Level 0 */
#menu592  {background: #f60; color: #F9F32C;}
#menu464{background: #5CED1A; color: #000;}
#menu444 {background: #1245ED; color: #F9F32C;}
#menu475 {background: #F9F32C; color: #900;}
#menu470 {background: #000; color: #5CED1A;}
#menu551 {background: #f00; color: #1245ED;}
 /* Items Menu Level 0 - Survol */
#menu592:hover  {background: #f90; color: #F9F32C!important;}
#menu464:hover {background: #1a0; color: #000!important;}
#menu444:hover {background: #6fe; color: #F9F32C!important;}
#menu475:hover {background: #ffb; color: #900 !important;}
#menu470:hover {background: #444; color: #5CED1A !important;}
#menu551:hover {background: #b00; color: #1245ED !important;}

merci

[lesoutier]

Re : Item menu horizontal couleur différente

Ce tuto concerne un template particulier (JA Purity 2), et un menu spécifique (Megamenu) de ce template. Tu es bien dans ce cas de figure ?

[clem62]

Re : Item menu horizontal couleur différente

ben en faire changer la couleur de chaque item de menu
es ce possible avec un module de menu (une exention
en plus mes boutons doivent avoir la même largeur même hauteur si possible mais parfois
au total j'ai 6 menus

merci

[manu93fr]

Re : Item menu horizontal couleur différente

Tu ne reponds pas a la question de lesoutier

Tu essaies un bout de code mais es tu dans le meme cas de figure ?
Un lien vers ton site ?

[clem62]

Re : Item menu horizontal couleur différente

a priori je dois faire comme ça
http://tutoriels-joomla.joomlack.fr/...lasse-css.html


avec ceci en plus à intégrer dans mon css

#nav1 ul.menu > li.item-114 > ul {background:red;}

[clem62]

Re : Item menu horizontal couleur différente

non, j'ai créé une grande partir de mon template avec artisteer et je l ai personalisé ensuite

[jisse03]

Re : Item menu horizontal couleur différente

Bonjour,

S'agissant de Artisteer, consulter les documents relatifs aux personnalisations pour ce type d etemplate, par exemple http://studiocoleo.com/docs/menu-personnalise.pdf

D'autre sréférences du même ordre en cherchant avec google "artisteer personalise menu item background"

[clem62]

Re : Item menu horizontal couleur différente

bonjour, j'ai déjà lu ce doc, il date de 2010 donc un peu dépensé depuis on est passé à joomla 2.5
MERCI quand même je vais regarder les recerches avec ce mot clé "artisteer personalise menu item background "

[clem62]

Re : Item menu horizontal couleur différente

j'ai trouvé un exemple parfais pour illustrer ce que je veux

même largeur et multicolor comme ça en choissant 6 couleurs

[clem62]

Re : Item menu horizontal couleur différente

mon menu actuelle pour que vous puissiez m'aider svp.

<nav class="art-nav">
    
<ul class="art-hmenu"><li class="item-592 current active"><a class=" active" href="/">Accueil</a></li><li class="item-464 deeper parent"><a href="">LIEN</a><ul><li class="item-468"><a href="">lien 2</a></li><li class="item-471"><a href="LIEN">LIEN</a></li><li class="item-469 deeper parent"><a href="LIEN">LIEN</a><ul><li class="item-589"><a href="/LIEN">LIEN</a></li></ul></li></ul></li><li class="item-444 deeper parent"><a href="/LIEN4"></a><ul><li class="item-472"><a href="LIEN">LIEN</a></li><li class="item-474"><a href="/LIEN">LIEN</a></li><li class="item-473"><a href="/LIEN">LIEN</a></li></ul></li><li class="item-475 deeper parent"><a href="/LIEN">LIEN</a><ul><li class="item-587"><a href="LIEN">LIEN</a></li><li class="item-600"><a href="/LIEN">LIEN</a></li></ul></li><li class="item-470"><a href="/lIEN">LIEN</a></li><li class="item-551"><a href="/LIEN">LIEN</a></li></ul> 
    </nav>

le css

.art-nav
{
  background: none;
  border-bottom: 1px solid #FFFFFF;
  margin: 10px auto 0;
  position: relative;
  z-index: 499;
  text-align: center;
}

ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
  outline: none;
  position: relative;
  z-index: 11;
}

ul.art-hmenu, ul.art-hmenu ul
{
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
}

ul.art-hmenu li
{
  position: relative;
  z-index: 5;
  display: block;
  float: left;
  background: none;
  margin: 0;
  padding: 0;
  border: 0;
}

ul.art-hmenu li:hover
{
  z-index: 10000;
  white-space: normal;
}

ul.art-hmenu:after, ul.art-hmenu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}

ul.art-hmenu, ul.art-hmenu ul
{
  min-height: 0;
}

ul.art-hmenu
{
  display: inline-block;
  vertical-align: bottom;
}

.art-nav:before
{
  content: ' ';
}

.desktop .art-nav
{
  width: 1500px;
  padding-left: 0;
  padding-right: 0;
}

.art-hmenu-extra1
{
  position: relative;
  display: block;
  float: left;
  width: auto;
  height: auto;
  background-position: center;
}

.art-hmenu-extra2
{
  position: relative;
  display: block;
  float: right;
  width: auto;
  height: auto;
  background-position: center;
}

.art-menuitemcontainer
{
  background: none;
  margin: 0 auto;
}

ul.art-hmenu>li
{
  margin-left: 7px;
}

ul.art-hmenu>li:first-child
{
  margin-left: 3px;
}

ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child
{
  margin-right: 3px;
}

ul.art-hmenu>li>a
{
  background: #D9DFE3;
  border: 1px solid #696969;
  border-bottom: none;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
  display: block;
  height: 110px;
  cursor: pointer;
  text-decoration: none;
  color: #293138;
  line-height: 110px;
  text-align: center;
}

.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover
{
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
}

ul.art-hmenu>li>a.active
{
  background: #DEDEDE;
  border: 1px solid #DEDEDE;
  border-bottom: none;
  padding: 0 50px;
  margin: 0 auto;
  color: #343E46;
  padding-bottom: 1px;
  margin-bottom: -1px;
  text-decoration: none;
}

ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a
{
  text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
  background: #D9DFE3;
  border: 1px solid rgba(158, 173, 183, 0.8);
  border-bottom: none;
  padding: 0 50px;
  margin: 0 auto;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
  color: #000000;
  text-decoration: none;
}

ul.art-hmenu>li>a.active:hover
{
  padding-bottom: 0;
  margin-bottom: 0;
}

ul.art-hmenu li li a
{
  background: #ABABAB;
  background: transparent;
  padding: 0 12px;
  margin: 0 auto;
}

ul.art-hmenu li li
{
  float: none;
  width: auto;
  margin-top: 5px;
  margin-bottom: 5px;
}

.desktop ul.art-hmenu li li ul>li:first-child
{
  margin-top: 5px;
}

ul.art-hmenu li li ul>li:last-child
{
  margin-bottom: 0;
}

.art-hmenu ul a
{
  display: block;
  white-space: nowrap;
  height: 24px;
  min-width: 7em;
  border: 0 solid transparent;
  text-align: left;
  line-height: 24px;
  color: #000000;
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  text-decoration: none;
  margin: 0;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a.active, .art-hmenu ul a:hover
{
  text-align: left;
  line-height: 24px;
  color: #000000;
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  text-decoration: none;
  margin: 0;
}

.desktop ul.art-hmenu>li>ul>li
{
  margin-top: 0;
  margin-bottom: 0;
}

.desktop .art-hmenu>li>ul>li>a
{
  font-weight: bold !important;
}

.desktop .art-hmenu>li>ul>li
{
  float: left;
}

.desktop .art-hmenu>li>ul>li>ul
{
  position: relative;
  left: 0 !important;
  right: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.desktop .art-hmenu>li:hover>ul>li>ul
{
  visibility: visible;
}

.desktop .art-hmenu>li>ul>li>ul:before
{
  visibility: hidden;
}

ul.art-hmenu li li:after
{
  display: block;
  position: absolute;
  content: ' ';
  height: 0;
  top: -3px;
  left: 0;
  right: 0;
  z-index: 1;
  border-bottom: 1px solid #B5B5B5;
}

.desktop ul.art-hmenu>li>ul>li:after, .desktop ul.art-hmenu>li>ul>li:before
{
  display: none;
}

.desktop ul.art-hmenu li li:after
{
  left: 5px;
  right: 5px;
}

ul.art-hmenu ul li a:hover
{
  background: #FFFFFF;
  background: transparent;
  margin: 0 auto;
}

.art-hmenu ul a:hover
{
  text-decoration: none;
  color: #000000;
}

ul.art-hmenu ul:before
{
  background: none;
  margin: 0 auto;
  display: block;
  position: absolute;
  content: ' ';
  z-index: 1;
}

.desktop ul.art-hmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.desktop ul.art-hmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

ul.art-hmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background-image: url('../images/spacer.gif');
}

.desktop ul.art-hmenu>li>ul
{
  padding: 15px 34px 34px 34px;
  margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul ul
{
  padding: 34px 34px 34px 14px;
  margin: -34px 0 0 -6px;
}

.desktop ul.art-hmenu ul.art-hmenu-left-to-right
{
  right: auto;
  left: 0;
  margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul.art-hmenu-right-to-left
{
  left: auto;
  right: 0;
  margin: -10px -30px 0 0;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right
{
  right: auto;
  left: 100%;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left
{
  left: auto;
  right: 100%;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right
{
  right: auto;
  left: 0;
  padding: 34px 34px 34px 14px;
  margin: -34px 0 0 -6px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left
{
  left: auto;
  right: 0;
  padding: 34px 14px 34px 34px;
  margin: -34px -6px 0 0;
}

.desktop ul.art-hmenu li ul>li:first-child
{
  margin-top: 0;
}

.desktop ul.art-hmenu li ul>li:last-child
{
  margin-bottom: 0;
}

.desktop ul.art-hmenu ul ul:before
{
  border-radius: 0;
  top: 30px;
  bottom: 30px;
  right: 30px;
  left: 10px;
}

.desktop ul.art-hmenu>li>ul:before
{
  top: 11px;
  right: 30px;
  bottom: 30px;
  left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-left-to-right:before
{
  right: 30px;
  left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-right-to-left:before
{
  right: 30px;
  left: 30px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right:before
{
  right: 30px;
  left: 10px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left:before
{
  right: 10px;
  left: 30px;
}

[jisse03]

Re : Item menu horizontal couleur différente

Si tu avais vraiment suivi le lien que je t'ai donné et que tu as déclaré très vite "obsolète", tu aurais vu que la structure de menu n'a pas changé, et que leur explication tient toujours.

A toi de noter les ID de chacun d etes menus à colorier, et d'appliquer exactement les conseils qu'ils donnent dans ce document. On ne va pas en recopier le code ici, le PDF est très explicite.

[clem62]

Re : Item menu horizontal couleur différente

j'ai ajouter les couleur
et assigné à un lien dans le lien du menu et ça fonctionne pas

/* Begin Additional CSS Styles */
.vert {
background-color:#6CBE42;
}
bleuf {
background-color:#356AB3;
}
.bleuc {
background-color:#57BAE8;
}
.jaune {
background-color:#FFAA31;
}
.orange {
background-color:#F57D20;
}
.violet {
background-color:#916CAF;
}

/* End Additional CSS Styles */

[clem62]

Re : Item menu horizontal couleur différente

je verrais ça demain quand je serais d'attaque

sur artisteer les item sot des images ? ou des couleurs ?
est ce qu'il faut que je fasse un background-image comme dans le tutoriel
et que je créé des rectangles de couleurs

merci

[jisse03]

Re : Item menu horizontal couleur différente

N'utilisant pas Windows, je n'utilise pas non plus l'usine Artisteer. Mais les règles générales CSS devraient s'appliquer à cet outil également.

[clem62]

Re : Item menu horizontal couleur différente

.art-menu ul#item14 {background-color: #6CBE42;};

est ce que on peut supposer avec ça