Plusieurs couleur de sous menu, est-ce possible?

Question

missty95

21 Aug 2010 à 23:07

Bonjour

Premièrement merci pour votre aide!

J'explique ma situation, dans mon mega menu, j'ai 4 sections avec des menus déroulants.
La couleur par défaut est grise, mais je me demandais s'il était possible d'avoir une couleur différente pour chaque car je n'ai pas trouvé d'id ou de class qui me permettait de les identifier.

J'ai réussis pour le level0 et les lien dans les sous menu, mais pas le conteneur en arrière.

Voici un site présentant un graphique proche de ce que je veux faire : www.francenergies.fr/

J'utilise joomla et le template JA PURITY2

Merci d'avance

Stéphanie W.

21 Aug 2010 à 23:38

Bonjour

J'avoue que je suis un peu perdue dans tes niveaux / liens du coup je suis pas sure d'avoir compris à 100% ce que tu veux faire.

Si tu veux un menu comme celui dans le lien donc avec des couleurs différentes pour chaque item de ton menu, tu peux utiliser le sélecteur + (sélecteur de frère ou sélecteur adjacent ) si tu n'as pas d'id ou de classe. Ce qui te donnes :

ul li{ }  /* ton premier item du menu */
ul li+li {} /* ton 2em item du menu */
ul li+li+li {}/* ton 3em item du menu */ 
etc

Par contre j'ai des doutes pour IE, je suis presque sure que IE6 c'est mort, peut être que ça passe à partir de IE7. Le mieux resterait quand même rajouter des classes pour être sure, tu te t'enquiquinera moins dans le css.

Sinon une piste css3 du coté de nth-child mais j'avoue que c'est un peu obscure pour moi aussi, et toute façon avec le css3 ie tu oublies pour le moment (vivement le 9 !!)

missty95

22 Aug 2010 à 00:52

Bonjour et merci à toi de venir passer un moment sur mon problème.

Je vais essayer d'être plus clair :

- Pour le menu horizontal ( premier niveau et les suivants) je n'ai pas de problème :

/* Couleur des boutons du menu horizontal */

#menu9 {background: url(../images/grad1-mask.png) repeat-x bottom left #fff;}
#menu9:hover {background: #e4e0e0;}

et de la même manière j'utilise les id de mes items pour personnaliser la couleur de chaque lien du menu

- Reste le fond des sous menu, comme sur ce site http://www.collotinformatique.com/ je n'arrive pas à avoir des couleur différentes car le seul endroit pour modifier la couleur est celui-ci

.childcontent-inner {
	background: #333333;
	border: 1px solid #666666;
	color: #ccc;

Il faudrait avoir plusieurs childcontent mais je ne sais pas si c'est possible.

Nigel

22 Aug 2010 à 11:19

Bonjour,

Ne peux-tu pas ajouter une classe différente pour chaque li comme ceci ? (afin de pouvoir les identifier)

<ul class="megamenu level0">
  <li class="[...] univers01"></li>
  <li class="[...] univers02"></li>
  <li class="[...] univers03"></li>
  ...
</ul>

Auquel cas il te suffirait d'attribuer une couleur à chaque ".universXX .chilcontent {...}" ou ".level0 .universXX .childcontent {...}", en fonction de ton cas.

Mais je ne suis pas sur d'avoir compris la problématique, c'est le fond orange qui te pose un souci ?
Modifié par Nigel (22 Aug 2010 - 11:27)

mlbcreation

22 Aug 2010 à 11:41

Tu regarde dans ta source les classes de tes items de menu et tu ajoutes au CSS :

.ta-classe1, .ta-classe1 ul, .ta-classe1 ul li{background:#f00;}
.ta-classe2, .ta-classe2 ul, .ta-classe2 ul li{background:#0f0;}
.ta-classe3, .ta-classe3 ul, .ta-classe3 ul li{background:#00f;}
.ta-classe4, .ta-classe4 ul, .ta-classe4 ul li{background:#f0f;}

missty95

22 Aug 2010 à 21:29

Bonjour les gars et merci à vous de vous pencher sur mon problème, voici quelques pistes que je vais essayer d'exploiter ce soir, je dis essayer car vu mon niveau mais je vais faire le maximum pour comprendre et je vous donnerais mon état d'avancement demain.

Pour plus d'information car je suis en local voici le template que j'utilise :

- JA PURITY 2 http://templates.joomlart.com/ja_purity_ii/?ja_menu=mega

- ce que je veux faire http://www.francenergies.fr/

Merci encore et à bientôt.

missty95

23 Aug 2010 à 01:28

Désolé mais pour ce soir je n'ai pas avancé, rien de bon ou j'ai peut être mal compris, je remet ça a demain soir.
Merci et à plus

Voici les codes CSS utilisés (j'espère avoir bien ciblé ou ça se passe)

Template.css

/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
	background: url(../images/grad1-mask.png) repeat-x top #444;
	border-top: 1px solid #666;
	line-height: 1;
	position: relative;
	z-index: 11;
}

#ja-mainnav .main { font-size: 12px; }

span.has-image {
	padding-left: 25px;
	display: block;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: left 2px;
}

span.menu-title { display: block; }

span.menu-desc {
	display: block;
	font-weight: normal;
	font-size: 92%;
	color: #999;
}

Mega.css

/*
#------------------------------------------------------------------------
  JA Purity II for Joomla 1.5
#------------------------------------------------------------------------
#Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
#@license - GNU/GPL,  http://www.gnu.org/copyleft/gpl.html
 
#Author: J.O.O.M Solutions Co., Ltd
#Websites:  http://www.joomlart.com  -  http://www.joomlancers.com
 
#------------------------------------------------------------------------
*/
 

.ja-megamenu { margin: 0; padding: 0; }
.ja-megamenu a.over, .ja-megamenu a.active { color: #ffffff !important; }

ul.megamenu { margin: 10px; /* menu's gutter */ } 

/* lv - 0
-----------------------------------*/
/* Styling ---*/
ul.level0 {
	border-right: 1px solid #666666;
	float: left;
	margin: 0;
	padding: 0;
}

ul.level0 li.mega {
	background: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

ul.level0 li.mega a.mega {
	border-left: 1px solid #666666;
	border-right: 1px solid #333333;
	color: #cccccc;
	display: block;
	font-weight: bold;
	line-height: normal;
	margin: 0;
	padding: 8px 15px;
	text-decoration: none;
}

ul.level0 li.mega .has-image {
	padding-left: 25px;
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
}

ul.level0 li.mega span.menu-title { display: block; }

ul.level0 li.mega span.menu-desc {
	display: block;
	font-weight: normal;
	font-size: 92%;
	color: #999;
}

ul.level0 li.mega a img {
	float: left;
	padding-right: 5px;
}

ul.level0 li.over, ul.level0 li.haschild-over {
	background: url(../../images/grad1-mask.png) repeat-x top #666666;
}

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {
	background: url(../../images/arrow3.png) no-repeat left center;
	padding-left: 12px;
}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {
	padding-left: 12px;
}

ul.level0 li.active {
	background: url(../../images/grad1-mask.png) repeat-x top #006699;
}

/* lv - 1 and below
-----------------------------------*/
/* Layout ---*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent, 
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent, 
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right, 
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right, 
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.ja-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right 
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level1 .childcontent { margin: -2em 0 0 160px; }

 /* Columns ---*/
.megacol { float: left;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }


.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }
*/

/* Styling ---*/
ul.level1 li.mega { border-top: 1px dotted #444444; }

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
	background: none;
	border: 0;
	color: #cccccc;
	font-weight: normal;
	padding: 5px;
}

ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0; }

ul.level1 li.haschild {
	background: url(../../images/arrow.png) no-repeat 95% center;
	padding: 0;
}

ul.level1 li.over, ul.level1 li.haschild-over { background: #444444; }

ul.level1 li.group { background: none; }

 /* CHILD CONTENT
-----------------------------------*/
.childcontent {
	z-index: 999;
}
.childcontent-inner {
	background: #333333;
	border: 1px solid #666666;
	color: #ccc;
}
.childcontent .ja-moduletable {
	color: #ccc;
	border-bottom: 0;
	line-height: 1.5;
	margin: 10px 0;
	padding: 0;
}

.childcontent .ja-moduletable h3 {
	background: none;
	color: #fff;
	border-bottom: 1px dotted #444;
	margin-left: 10px;
	margin-right: 10px;
	text-indent: 5px;
	text-transform: none;
}

.childcontent .ja-moduletable .ja-box-ct {
	padding: 0 5px;
}

.childcontent .ja-moduletable a {
	color: #ccc;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
	margin-top: 0 !important;
}

.childcontent .ja-moduletable li {
	background: url(../../images/bullet2.gif) no-repeat 2px 7px !important;
	margin-bottom: 5px;
}

/* Grouped --- */
.group {}

.group-title {
	border-bottom: 1px solid #444;
	overflow: hidden;
}

.group-title .menu-title {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 115%;
}

.group-title .menu-desc {
	color: #999;
	padding-left: 0 !important;
}

.group-content .ja-moduletable,
.group-content ul.megamenu  {
	margin: 10px; /* Group-content's gutter*/
}

/* reset --- */
.childcontent ul.megamenu .ja-moduletable {
	padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
	margin-left: 0;
	margin-right: 0;
}

Modifié par missty95 (23 Aug 2010 - 17:49)

missty95

25 Aug 2010 à 00:13

Bonjour à tous après explication avec Nigel je ne savais pas que vous attendiez un complément de ma part, donc je m'en excuse.

Pour ce qui est de rajouter une classe différente pour chaque <li> de mon menu :
- je n'en sais rien car je n'arrive pas à trouver l'information

Pour ce qui est du site http://www.collotinformatique.com/ :
- oui c'est le fond orange qui me pose problème car il est commun à tout les sous menu

J'ai essayer de faire une image pour masquer l'ensemble du sous menu mais elle reste uniquement sur l'item

voici le code

#menu60 {background: url(../images/menu.png);}

#menu60:hover {background: url(../images/menu.png);}

Je vous donne le code du mainnav.php a tout hazard :

<div id="ja-mainnav" class="wrap">
<div class="main clearfix">
	<?php if (($jamenu = $this->loadMenu())) $jamenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
</div>
</div>

<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div id="ja-subnav" class="wrap">
<div class="main clearfix">
	<?php $jamenu->genMenu (1); ?>
</div>
</div>
<?php endif;?>

<ul class="no-display">
    <li><a href="<?php echo $this->getCurrentURL();?>#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
</ul>

Désolé pour le manque d'info je suis vraiment un débutant, je bidouille c'est tout.
Merci d'avance
Modifié par missty95 (26 Aug 2010 - 17:05)

missty95

26 Aug 2010 à 17:59

salut, j'ai modifié mon dernier post pour donner plus d'information.

Sujet clos

CSS et mise en forme, CSS3

Plusieurs couleur de sous menu, est-ce possible?