Menu dynamique (problème avec visibility)
Menu dynamique (problème avec visibility) - HTML/CSS - Programmation
Marsh Posté le 19-03-2005 à 11:56:15
| Hermes le Messager a écrit : exemple ? Page ? |
désolé
je les ai mises la : http://lemarechalseb.free.fr/cours/application3tiers/
merci
Message édité par seb306bzh le 19-03-2005 à 11:56:42
Marsh Posté le 19-03-2005 à 13:00:07
Prévois le cas où l'internaute n'a pas JS 
Sinon pour tes problèmes de menus, base-toi sur cet article chez AlsaCréations
Marsh Posté le 19-03-2005 à 16:50:51
A noter que l'article d'Alsa n'est franchement pas terrible au niveau de la séparation donnée/comportement ![[:aloy]](https://forum-images.hardware.fr/images/perso/aloy.gif "[:aloy]")
Je lui préfère largement cet article d'A List Apart qui passe par le gestionnaire d'évènements, est propre, performant et fonctionne peu ou prou parfaitement.
---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Marsh Posté le 22-03-2005 à 16:11:04
style.display plutot que style.visibility ca ne serait pas mieux ?
Marsh Posté le 22-03-2005 à 16:11:29
et en valeur remplace par visible par block ou inline en fonction
Sujets relatifs:
- [ASP.NET] Probleme d'acces BD
- Problème d'interaction entre une page et une popup
- Problème avec un Ghost
- Problème avec Oracle
- [C++] VFW & création d'avi ... Problème de palette
- Génération dynamique de documents paramétrés (templates)
- Probléme de mise en page ( ça marche sous IE mais pas sous firefox)
- probleme vb => excel => sub
- problème avec mysql_fetch_assoc() !!
- [résolu][applet] probleme d'affichage
Marsh Posté le 19-03-2005 à 11:36:27
Bonjour,
je suis entrain de faire un menu dynamique mais je n'arrive pas à afficher et cacher mes couches
voici mon code :
------------------------------------ menuDynamique.html ------------------------------------
<html>
<head>
<title>Menu dynamique vertical</title>
<link rel="stylesheet" type="text/css" href="menuDynamiqueVertical.css">
<SCRIPT Language="Javascript" Src="menuDynamiqueVertical.js"></SCRIPT>
</head>
<body>
<table class="tableau" border="1" align="left" width="120">
<tr>
<td onmouseover="this.style.backgroundColor='lightblue'; pop('chapitre1');" onmouseout="this.style.backgroundColor='#003366'; kill('chapitre1');">Chapitre1</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue'; pop('chapitre2');" onmouseout="this.style.backgroundColor='#003366'; kill('chapitre2');">Chapitre2</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue'; pop('chapitre3');" onmouseout="this.style.backgroundColor='#003366'; kill('chapitre3');">Chapitre3</td>
</tr>
</table>
<table class="chapitre1" border="1" width="120">
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section1</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section2</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section3</td>
</tr>
</table>
<table class="chapitre2" border="1" width="120">
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section1</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section2</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section3</td>
</tr>
</table>
<table class="chapitre3" border="1" width="120">
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section1</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section2</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='lightblue';" onmouseout="this.style.backgroundColor='#003366';">section3</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------
// menuDynamiqueVertical.js
function pop(chapitre){
//alert("pop | chapitre ="+chapitre);
//document.getElementById("'numChapitre'" ).style.visibility="visible";
chapitre.style.visibility='visible';
}
function kill(chapitre){
chapitre.style.visibility='hidden';
}
-------------------------------------------------------------------------------------------------------
/* menuDynamiqueVertical.css */
.tableau {
font-family:verdana;
color:#FFFFFF; /*blanc*/
background-color:#003366; /*bleu foncé*/
text-align:center;
}
.chapitre1 {
visibility:hidden;
font-family:verdana;
color:#FFFFFF; /*blanc*/
background-color:#003366; /*bleu foncé*/
text-align:center;
position:absolute;
left:128px;
top:15px;
}
.chapitre2 {
visibility:hidden;
font-family:verdana;
color:#FFFFFF; /*blanc*/
background-color:#003366; /*bleu foncé*/
text-align:center;
position:absolute;
left:128px;
top:40px;
}
.chapitre3 {
visibility:hidden;
font-family:verdana;
color:#FFFFFF; /*blanc*/
background-color:#003366; /*bleu foncé*/
text-align:center;
position:absolute;
left:128px;
top:65px;
}
----------------------------------------------------------------------------------------------
est ce que vous voyez quelquechose qui ne va pas ?
merci d'avance