Sujet Précédent Sujet Suivant

Modifier div par une selection d'une autre di

Fermé
frycrash Messages postés 7 Date d'inscription mardi 2 mars 2010 Statut Membre Dernière intervention 4 mai 2010 - Modifié par frycrash le 4/05/2010 à 10:37
frycrash Messages postés 7 Date d'inscription mardi 2 mars 2010 Statut Membre Dernière intervention 4 mai 2010 - 4 mai 2010 à 12:31
Bonjour à tous !

Voilà j'ai un petit soucis, je travaille sous joomla actuellement et je développe un site.


Comment on peut dire en CSS que si un menu est sélectionné, alors je vais afficher une image background dans une autre div ?


J'ai un menu principal du type :

- menu 1 - menu 2 - menu 3

pour chaque lien de menu j'ai 2 sous menu de ce type qui apparaissent quand un menu est sélectionné :

- menu 1 SELECTIONNE - menu 2 - menu 3
- Sous menu 1 - Sous menu1

Lorsque mon menu 1 est sélectionné, j'ai une image qui s'affiche en background pour montrer que c'est bien ce menu qui est sélectionné.
Lorsque je clique sur "Sous menu1" j'aimerais que l'image de background qui est sur "Menu1" reste affiché...

Quelqu'un sait comment faire ça en CSS ?
Merci d'avance !
A voir également:

2 réponses

Réponse 1 / 2
thunder413 Messages postés 167 Date d'inscription jeudi 21 mai 2009 Statut Membre Dernière intervention 16 novembre 2012 23
4 mai 2010 à 10:34
salut
si tu le peut poste la partie css qui concerne menu 1
0
Réponse 2 / 2
frycrash Messages postés 7 Date d'inscription mardi 2 mars 2010 Statut Membre Dernière intervention 4 mai 2010
4 mai 2010 à 12:31
Salut,

Alors voici le code CSS.

La classe PILLMENU concerne mon menu 1, et la classe PILL_LOL concerne mon sous menu.

ce que j'ai mis en gras, c'est l'image que j'affiche en background quand mon menu 1 est sélectionné, et donc l'image que j'aimerais continuer à afficher toujours sur menu 1 quand mon sous menu1 est sélectionné aussi.

#pillmenu li#current.active a:link {

background: url(../images/mw_menu_normal_bg_save.png) repeat-x;


font-weight: bold;

}

#pillmenu li#current.active a:visited {

background: url(../images/mw_menu_normal_bg_save.png) no-repeat;

color:#F90;

font-weight: bold;

}

table.pill {
margin-left: -60px;
margin-right: auto;
padding: 50px;

}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;

}

td.pill_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0px;
width: auto;






}



td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}

#pillmenu {
white-space: nowrap;
height: 0px;
float: left;

}

#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 15px;
color: #FFF;
text-decoration: none;

}

#pillmenu current.active {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
}

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;

}



/* Affichage du sous menu */
table.pill_lol {

margin-left: 10px;
margin-right: auto;
padding: 0;
}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;

}

td.lol_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;


}

td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}

#pillmenu_lol {
white-space: nowrap;
height: 32px;
float: left;
}

#pillmenu_lol ul {
margin: -20px;
padding: 0;
list-style:none;
}

#pillmenu_lol li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu_lol a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #FFF;
text-decoration: none;

}



#pillmenu_lol li#current.active a:visited {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
color:#F90;

}




#pillmenu_lol a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}




Je met mon code html qui concerne le menu au cas ou :

<div id="menu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_m">
<div id="pillmenu"><jdoc:include type="modules" name="user3" />

<div id="trait_dessus"><hr></div>

</div>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" class="pill_lol">
<tr>

<td class="lol_m">
<div id="pillmenu_lol">
<jdoc:include type="modules" name="lol" />
</div>
</td>

</tr>
</table>

</div>




Merci d'avance !
0

Discussions similaires

"L'indice n'appartient à la sélection" + VBA
fleur.31 -
geosevda -

2 réponses