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.
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
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