Question en XHTML/CSS
roma
-
M@dien Messages postés 437 Date d'inscription Statut Membre Dernière intervention -
M@dien Messages postés 437 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train de créer un site web, et j'aimerais mettre en place un menu déroulant de telle sorte que l'on ne voit que les titres et que lorsque on clique sur un titre, le texte contenu dans ce titre s'affiche. J'aimerais donc éviter de créer d'autre page.
Avant de cliquer: A
B
C
Si je clique par exemple sur A:
A
A1
A2
B
C
Merci
Je suis en train de créer un site web, et j'aimerais mettre en place un menu déroulant de telle sorte que l'on ne voit que les titres et que lorsque on clique sur un titre, le texte contenu dans ce titre s'affiche. J'aimerais donc éviter de créer d'autre page.
Avant de cliquer: A
B
C
Si je clique par exemple sur A:
A
A1
A2
B
C
Merci
A voir également:
- Question en XHTML/CSS
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
1 réponse
Impossible en CSS, il faudra faire du javascript (phrase que j'ai absolument horreur de dire...)
En fait, c'est possible mais pas compris sur internet explorer (encore.... et même en version 8...)
Pour appliquer un style spécial à un élément cliqué il faut utiliser l'attribut :active ( genre div:active {})
Mais pour ce cas là, le plus propre est de tout préparer en xhtml/css, et de provoquer l'affichage par javascript:
En fait, c'est possible mais pas compris sur internet explorer (encore.... et même en version 8...)
Pour appliquer un style spécial à un élément cliqué il faut utiliser l'attribut :active ( genre div:active {})
Mais pour ce cas là, le plus propre est de tout préparer en xhtml/css, et de provoquer l'affichage par javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<script langage="javascript">
function afficher_menu(id) {
if (document.getElementById(id).style.display=="block") {
document.getElementById(id).style.display="none";
}else{
document.getElementById(id).style.display="block";
}
}
</script>
<style>
ul.sousMenu{
display:none;}
</style>
</head>
<body>
<ul>
<li onclick="afficher_menu('sousMenuA');">a
<ul class="sousMenu" id="sousMenuA">
<li>a.1</li>
<li>a.2</li>
</ul>
</li>
<li onclick="afficher_menu('sousMenuB');">b
<ul class="sousMenu" id="sousMenuB">
<li>b.1</li>
<li>b.2</li>
</ul>
</li>
</ul>
</body>
</html>
