bonjour à tous
je voudrais
-afficher l'arborescence suivante
et
-changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas
si je mets color:green et display:none, le bloc n'apparait pas (voir
niveau 12)
si je mets color:green, il ne disparait pas
à l'ecoute de vos suggestions,
le code est ci-dessous
merci d'avance (j'ai IE8)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Menu déroulant en Javascript</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<style>
#niveau_1{ width:200px; background-color:red; padding-left:20px; }
</style>
</head>
<script>
function sous_menu_ouvre(_sous_menu) {
_sous_menu.style.display='block'; }
function sous_menu_ferme(_sous_menu) {
_sous_menu.style.display='none'; }
</script>
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Pascal
bpdu92 a écrit :
bonjour à tous
Bonjour à toi,
je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
Ok, pour les menus déroulants, il y a une tonne et demi de bibliothèq ues disponibles gratuitement sur le web. Il y en a même de très légères, si on ne veut pas faire trop d'é pate !
Sinon, globalement, quelques petits conseils :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ce 'doctype' va entrainer le mode 'quirks' des navigateurs. c'est pas forcément très grave, mais il vaut mieux le savoir. En cas de doute : http://www.w3.org/QA/2002/04/valid-dtd-list.html
</head> <script> [...] </script> <body>
Original, le script placé entre le <head> et le <body> ! C'est là qu'on mesure toute la tolérance des navigateurs... Le mieux serait encore de mettre le code dans un fichier externe, et de l'appeler dans le <head>.
L'utilisation des listes imbriquées n'est pas neutre. S'il y avait besoin d'identifier tous les niveaux et d'y placer du code répétitif, autant utiliser des <div> ! Là, on a la chance d'avoir un fragment de DOM complètement structuré , alors autant en tirer profit dans le script.
Conclusion : tout le code devrait se trouver à l'extérieur du HTML, ainsi que les styles, d'ailleurs. Pas besoin d'identifiant, sauf pour l'élément de plus haut niveau, qui sera appelé à l'initialisation du code. Plutôt que de changer le style, préférer le changement de cla sse (ex: monBeauMenu.className="menuVisible").
Rien qu'avec ça, on y verra plus clair. Tous ces conseils valent également pour le choix d'une bibliothèque toute faite, parce qu'on voit aussi de sacrées m....s se promener sur l a toile. Il faut donc garder l'esprit critique.
Cordialement, Pascal
bpdu92 a écrit :
bonjour à tous
Bonjour à toi,
je voudrais
-afficher l'arborescence suivante
et
-changer la couleur d'un bloc lors du survol
Ok, pour les menus déroulants, il y a une tonne et demi de bibliothèq ues
disponibles gratuitement sur le web.
Il y en a même de très légères, si on ne veut pas faire trop d'é pate !
Sinon, globalement, quelques petits conseils :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ce 'doctype' va entrainer le mode 'quirks' des navigateurs.
c'est pas forcément très grave, mais il vaut mieux le savoir.
En cas de doute : http://www.w3.org/QA/2002/04/valid-dtd-list.html
</head>
<script>
[...]
</script>
<body>
Original, le script placé entre le <head> et le <body> !
C'est là qu'on mesure toute la tolérance des navigateurs...
Le mieux serait encore de mettre le code dans un fichier externe, et de
l'appeler dans le <head>.
L'utilisation des listes imbriquées n'est pas neutre.
S'il y avait besoin d'identifier tous les niveaux et d'y placer du code
répétitif, autant utiliser des <div> !
Là, on a la chance d'avoir un fragment de DOM complètement structuré ,
alors autant en tirer profit dans le script.
Conclusion : tout le code devrait se trouver à l'extérieur du HTML,
ainsi que les styles, d'ailleurs. Pas besoin d'identifiant, sauf pour
l'élément de plus haut niveau, qui sera appelé à l'initialisation du
code. Plutôt que de changer le style, préférer le changement de cla sse
(ex: monBeauMenu.className="menuVisible").
Rien qu'avec ça, on y verra plus clair.
Tous ces conseils valent également pour le choix d'une bibliothèque
toute faite, parce qu'on voit aussi de sacrées m....s se promener sur l a
toile. Il faut donc garder l'esprit critique.
je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
Ok, pour les menus déroulants, il y a une tonne et demi de bibliothèq ues disponibles gratuitement sur le web. Il y en a même de très légères, si on ne veut pas faire trop d'é pate !
Sinon, globalement, quelques petits conseils :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ce 'doctype' va entrainer le mode 'quirks' des navigateurs. c'est pas forcément très grave, mais il vaut mieux le savoir. En cas de doute : http://www.w3.org/QA/2002/04/valid-dtd-list.html
</head> <script> [...] </script> <body>
Original, le script placé entre le <head> et le <body> ! C'est là qu'on mesure toute la tolérance des navigateurs... Le mieux serait encore de mettre le code dans un fichier externe, et de l'appeler dans le <head>.
L'utilisation des listes imbriquées n'est pas neutre. S'il y avait besoin d'identifier tous les niveaux et d'y placer du code répétitif, autant utiliser des <div> ! Là, on a la chance d'avoir un fragment de DOM complètement structuré , alors autant en tirer profit dans le script.
Conclusion : tout le code devrait se trouver à l'extérieur du HTML, ainsi que les styles, d'ailleurs. Pas besoin d'identifiant, sauf pour l'élément de plus haut niveau, qui sera appelé à l'initialisation du code. Plutôt que de changer le style, préférer le changement de cla sse (ex: monBeauMenu.className="menuVisible").
Rien qu'avec ça, on y verra plus clair. Tous ces conseils valent également pour le choix d'une bibliothèque toute faite, parce qu'on voit aussi de sacrées m....s se promener sur l a toile. Il faut donc garder l'esprit critique.
Cordialement, Pascal
SAM
Le 6/2/10 3:18 PM, bpdu92 a écrit :
bonjour à tous je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas si je mets color:green et display:none, le bloc n'apparait pas (voir niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra; que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css) et agiter en passant par des class comme ça, simplement en changeant la class du menu_1 je change tout ce que j'ai décidé dans menu_1 et ses sous-menus d'un coup d'un seul
le code est ci-dessous merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains. (c'est ça ?)
Il faut mettre l'UL du sous-menu dans le LI du menu
Exemple (1 niveau de sous-menus) : ================================= à copier + coller dans NotePad + enregistrer + ouvrir dans IE (testé Fx.3 et IE.6) (Si JS désactivé le menu est déplié.) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>test de menu</title> <script type="text/javascript"> function ouvreFerme(quoi) { quoi.className = quoi.className==''? 'vu' : ''; } function init() { var m = document.getElementById('menu'), a = m.getElementsByTagName('LI'), n = a.length; while(n--) { a[n].onmouseover = function() { ouvreFerme(this) }; a[n].onmouseout = function() { ouvreFerme(this) }; } m.className = 'vu'; } </script> <style type="text/css"> ul { list-style: none; margin: 0; padding: 0; text-align: center; cursor: pointer; } ul li { float: left; width: 100px; margin: 0 2px; border: 1px solid; background: #ffc; } ul ul { width : 100%; } ul ul li { width: 100%; margin: 0 -1px; } ul.vu ul { display: none; } /* mode sous-menus repliés */ ul li.vu { background: #ff0; } /* couleur menu survolé */ ul.vu li.vu ul { display: block; } /* les sous-menus affichés */ .stop { clear: left; margin-top: 30px} /* arrêt flottaison */ </style> </head> <body onload="init();"> <ul id="menu"> <li>menu 1 <ul> <li>sous-menu 1.1</li> <li>sous-menu 1.2</li> <li>sous-menu 1.3</li> </ul> </li> <li>menu 2 <ul> <li>sous-menu 2.1</li> <li>sous-menu 2.2</li> <li>sous-menu 2.3</li> </ul> </li> <li>menu 3 <ul> <li>sous-menu 3.1</li> <li>sous-menu 3.2</li> <li>sous-menu 3.3</li> </ul> </li> </ul> <!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript"> function change(quoi) { var s = document.getElementById('menu').style; if(s && !s.position || s.position=='relative') { s.position = 'absolute'; s.top = '5px'; quoi.innerHTML = 'changer menu en relative' ; } else { s.position = 'relative'; s.top = '0px'; quoi.innerHTML = 'changer menu en absolute' ; } } </script> </body> </html>
-- sm
Le 6/2/10 3:18 PM, bpdu92 a écrit :
bonjour à tous
je voudrais
-afficher l'arborescence suivante
et
-changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas
si je mets color:green et display:none, le bloc n'apparait pas (voir
niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra;
que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css)
et agiter en passant par des class
comme ça, simplement en changeant la class du menu_1
je change tout ce que j'ai décidé dans menu_1 et ses sous-menus
d'un coup d'un seul
le code est ci-dessous
merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains.
(c'est ça ?)
Il faut mettre l'UL du sous-menu dans le LI du menu
Exemple (1 niveau de sous-menus) :
================================= à copier + coller dans NotePad + enregistrer + ouvrir dans IE
(testé Fx.3 et IE.6)
(Si JS désactivé le menu est déplié.) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>test de menu</title>
<script type="text/javascript">
function ouvreFerme(quoi) {
quoi.className = quoi.className==''? 'vu' : '';
}
function init() {
var m = document.getElementById('menu'),
a = m.getElementsByTagName('LI'),
n = a.length;
while(n--) {
a[n].onmouseover = function() { ouvreFerme(this) };
a[n].onmouseout = function() { ouvreFerme(this) };
}
m.className = 'vu';
}
</script>
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; text-align: center;
cursor: pointer; }
ul li { float: left; width: 100px; margin: 0 2px; border: 1px solid;
background: #ffc; }
ul ul { width : 100%; }
ul ul li { width: 100%; margin: 0 -1px; }
ul.vu ul { display: none; } /* mode sous-menus repliés */
ul li.vu { background: #ff0; } /* couleur menu survolé */
ul.vu li.vu ul { display: block; } /* les sous-menus affichés */
.stop { clear: left; margin-top: 30px} /* arrêt flottaison */
</style>
</head>
<body onload="init();">
<ul id="menu">
<li>menu 1
<ul>
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
<li>sous-menu 1.3</li>
</ul>
</li>
<li>menu 2
<ul>
<li>sous-menu 2.1</li>
<li>sous-menu 2.2</li>
<li>sous-menu 2.3</li>
</ul>
</li>
<li>menu 3
<ul>
<li>sous-menu 3.1</li>
<li>sous-menu 3.2</li>
<li>sous-menu 3.3</li>
</ul>
</li>
</ul>
<!-- fin du menu - la suite pour tester -->
<p class="stop">test de fin pour voir l'effet YoYo !</p>
<p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript">
function change(quoi) {
var s = document.getElementById('menu').style;
if(s && !s.position || s.position=='relative')
{
s.position = 'absolute';
s.top = '5px';
quoi.innerHTML = 'changer menu en relative' ;
}
else
{
s.position = 'relative';
s.top = '0px';
quoi.innerHTML = 'changer menu en absolute' ;
}
}
</script>
</body>
</html>
bonjour à tous je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas si je mets color:green et display:none, le bloc n'apparait pas (voir niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra; que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css) et agiter en passant par des class comme ça, simplement en changeant la class du menu_1 je change tout ce que j'ai décidé dans menu_1 et ses sous-menus d'un coup d'un seul
le code est ci-dessous merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains. (c'est ça ?)
Il faut mettre l'UL du sous-menu dans le LI du menu
Exemple (1 niveau de sous-menus) : ================================= à copier + coller dans NotePad + enregistrer + ouvrir dans IE (testé Fx.3 et IE.6) (Si JS désactivé le menu est déplié.) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>test de menu</title> <script type="text/javascript"> function ouvreFerme(quoi) { quoi.className = quoi.className==''? 'vu' : ''; } function init() { var m = document.getElementById('menu'), a = m.getElementsByTagName('LI'), n = a.length; while(n--) { a[n].onmouseover = function() { ouvreFerme(this) }; a[n].onmouseout = function() { ouvreFerme(this) }; } m.className = 'vu'; } </script> <style type="text/css"> ul { list-style: none; margin: 0; padding: 0; text-align: center; cursor: pointer; } ul li { float: left; width: 100px; margin: 0 2px; border: 1px solid; background: #ffc; } ul ul { width : 100%; } ul ul li { width: 100%; margin: 0 -1px; } ul.vu ul { display: none; } /* mode sous-menus repliés */ ul li.vu { background: #ff0; } /* couleur menu survolé */ ul.vu li.vu ul { display: block; } /* les sous-menus affichés */ .stop { clear: left; margin-top: 30px} /* arrêt flottaison */ </style> </head> <body onload="init();"> <ul id="menu"> <li>menu 1 <ul> <li>sous-menu 1.1</li> <li>sous-menu 1.2</li> <li>sous-menu 1.3</li> </ul> </li> <li>menu 2 <ul> <li>sous-menu 2.1</li> <li>sous-menu 2.2</li> <li>sous-menu 2.3</li> </ul> </li> <li>menu 3 <ul> <li>sous-menu 3.1</li> <li>sous-menu 3.2</li> <li>sous-menu 3.3</li> </ul> </li> </ul> <!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript"> function change(quoi) { var s = document.getElementById('menu').style; if(s && !s.position || s.position=='relative') { s.position = 'absolute'; s.top = '5px'; quoi.innerHTML = 'changer menu en relative' ; } else { s.position = 'relative'; s.top = '0px'; quoi.innerHTML = 'changer menu en absolute' ; } } </script> </body> </html>
-- sm
Pascal
Bonjour,
Une toute petite minuscule amélioration, si je puis.
SAM a écrit :
function ouvreFerme(quoi) { quoi.className = quoi.className==''? 'vu' : ''; }
function ouvreFerme() { this.className = this.className==''? 'vu' : ''; }
C'était pas grand chose, mais pourquoi s'en priver, hein ?
toutafé
Merci, ça servira beaucoup à Bernard-Paul Dukatrvindooz
J'en reviens pas ! ce "menu", même corrigé par Pascal, passe impec dans mon vieux IE.5 Mac ! Dommage que je n'ai plus ce bon cher NC.4 -- sm
bpdu92
On Wed, 02 Jun 2010 18:00:27 +0200, SAM wrote:
Le 6/2/10 3:18 PM, bpdu92 a écrit :
bonjour à tous je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas si je mets color:green et display:none, le bloc n'apparait pas (voir niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra; que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css) et agiter en passant par des class comme ça, simplement en changeant la class du menu_1 je change tout ce que j'ai décidé dans menu_1 et ses sous-menus d'un coup d'un seul
on peut ptet faire entierement en css -sans notre cher JS- avec des hover, mais -le support est musclé dans ce news, avec SAM et autres experts -des chses que ne sait pas (encore) faire CSS, tel setimout
le code est ci-dessous
marche impec, comme d'hab
merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains.
je suis heureux avec IE8 : -plus rapide -onglets -selection impression -securité trés complétée -...
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
(c'est ça ?)
mais FF et Chrome en secours, si difficultés avec un site
Il faut mettre l'UL du sous-menu dans le LI du menu ........
je n'ai pas repris le listing pour alleger le post
<!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript"> function change(quoi) { var s = document.getElementById('menu').style; if(s && !s.position || s.position=='relative') { s.position = 'absolute'; s.top = '5px'; quoi.innerHTML = 'changer menu en relative' ; } else { s.position = 'relative'; s.top = '0px'; quoi.innerHTML = 'changer menu en absolute' ; } }
quels sont les merites respectifs de absolu (ma preference avant ton avis) et relatif ?
un plaisir permanent de vous lire cordialt
On Wed, 02 Jun 2010 18:00:27 +0200, SAM
<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Le 6/2/10 3:18 PM, bpdu92 a écrit :
bonjour à tous
je voudrais
-afficher l'arborescence suivante
et
-changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas
si je mets color:green et display:none, le bloc n'apparait pas (voir
niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra;
que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css)
et agiter en passant par des class
comme ça, simplement en changeant la class du menu_1
je change tout ce que j'ai décidé dans menu_1 et ses sous-menus
d'un coup d'un seul
on peut ptet faire entierement en css -sans notre cher JS- avec des
hover, mais
-le support est musclé dans ce news, avec SAM et autres experts
-des chses que ne sait pas (encore) faire CSS, tel setimout
le code est ci-dessous
marche impec, comme d'hab
merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains.
je suis heureux avec IE8 :
-plus rapide
-onglets
-selection impression
-securité trés complétée
-...
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
(c'est ça ?)
mais FF et Chrome en secours, si difficultés avec un site
Il faut mettre l'UL du sous-menu dans le LI du menu
........
je n'ai pas repris le listing pour alleger le post
<!-- fin du menu - la suite pour tester -->
<p class="stop">test de fin pour voir l'effet YoYo !</p>
<p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript">
function change(quoi) {
var s = document.getElementById('menu').style;
if(s && !s.position || s.position=='relative')
{
s.position = 'absolute';
s.top = '5px';
quoi.innerHTML = 'changer menu en relative' ;
}
else
{
s.position = 'relative';
s.top = '0px';
quoi.innerHTML = 'changer menu en absolute' ;
}
}
quels sont les merites respectifs de
absolu (ma preference avant ton avis) et relatif ?
bonjour à tous je voudrais -afficher l'arborescence suivante et -changer la couleur d'un bloc lors du survol
si je mets display:none seul, la couleur ne change evidt pas si je mets color:green et display:none, le bloc n'apparait pas (voir niveau 12)
ben si c'est à ne pas afficher (display: none;) c'est un peu normal, non?
si je mets color:green, il ne disparait pas
Heu ... et en mettant : magic: acadabra; que donne-ce ?
à l'ecoute de vos suggestions,
Moi je préfère soigner la FdS (les css) et agiter en passant par des class comme ça, simplement en changeant la class du menu_1 je change tout ce que j'ai décidé dans menu_1 et ses sous-menus d'un coup d'un seul
on peut ptet faire entierement en css -sans notre cher JS- avec des hover, mais -le support est musclé dans ce news, avec SAM et autres experts -des chses que ne sait pas (encore) faire CSS, tel setimout
le code est ci-dessous
marche impec, comme d'hab
merci d'avance (j'ai IE8)
tant pis ! pas d'ma faute, je te plains.
je suis heureux avec IE8 : -plus rapide -onglets -selection impression -securité trés complétée -...
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
(c'est ça ?)
mais FF et Chrome en secours, si difficultés avec un site
Il faut mettre l'UL du sous-menu dans le LI du menu ........
je n'ai pas repris le listing pour alleger le post
<!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
<script type="text/javascript"> function change(quoi) { var s = document.getElementById('menu').style; if(s && !s.position || s.position=='relative') { s.position = 'absolute'; s.top = '5px'; quoi.innerHTML = 'changer menu en relative' ; } else { s.position = 'relative'; s.top = '0px'; quoi.innerHTML = 'changer menu en absolute' ; } }
quels sont les merites respectifs de absolu (ma preference avant ton avis) et relatif ?
un plaisir permanent de vous lire cordialt
SAM
Le 6/3/10 3:37 AM, bpdu92 a écrit :
On Wed, 02 Jun 2010 18:00:27 +0200, SAM wrote:
Moi je préfère soigner la FdS (les css) et agiter en passant par des class
Surtout quand il y a des couleurs à reconnaitre et modifier certains navigateurs se les appropriant en hexa (#FF12A5) d'autres en RVB
mais -le support est musclé dans ce news, avec SAM et autres experts -des chses que ne sait pas (encore) faire CSS, tel setimout
Oui, bon, alors si c'est plus simple pour toi : (sous-menus non overisés pour ne pas compliquer)
<style type="text/css"> #menu, #menu ul { list-style: none; padding:0 } #menu li { background-color: lightyellow; ) </style>
<script type="text/javascript">
/* la fonction 'vu' agit comme un balancier * un coup jaune et sous-menu affiché * un coup jaune clair et sous-menu caché */
function vu(quoi) {
// les styles du menu survolé/quitté et de ses sous-menus var menu = quoi.style, ss_menu = quoi.getElementsByTagName('UL')[0].style;
if( ss_menu.display == 'none' ) // le cas du menu survollé { menu.backgroundColor = 'yellow'; ss_menu.display = 'block'; }
else // le cas du menu en mouseOut { menu.backgroundColor = 'lightyellow'; ss_menu.display = 'none'; } } </script>
ce que je voulais dire : peu importe le navigateur que *tu* as, il faut que ça fonctionne (à peu près) correctement partout.
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
ce qui ne résoudra pas les pbs rencontrés avec les autres versions.
<!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
quels sont les merites respectifs de absolu (ma preference avant ton avis) et relatif ?
Normalement, si tu as essayé le code proposé, tu as dû voir le problème rencontré avec le relatif.
D'autre part, pour une bienséance de la présentation du html si css (et JS) désactivé(s) - cas mal-voyants par exemple - le menu doit être mis tout à la fin du fichier dans le html (on lit la page - avec un vocaliseur ou non - et en fin de lecture on peut continuer à naviguer, sans tout relire à l'envers) donc l'absolute s'impose pour un menu mis en forme en haut de page.
À ce propos de bienséance, le code ci-haut n'est pas tout à fait correct puisque JS désactivé ça ne fonctionne pas. Ou alors il faut que les menus renvoient vers une page où les sous-menus associés sont affichés.
-- sm
Le 6/3/10 3:37 AM, bpdu92 a écrit :
On Wed, 02 Jun 2010 18:00:27 +0200, SAM
<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Moi je préfère soigner la FdS (les css)
et agiter en passant par des class
Surtout quand il y a des couleurs à reconnaitre et modifier
certains navigateurs se les appropriant en hexa (#FF12A5)
d'autres en RVB
mais
-le support est musclé dans ce news, avec SAM et autres experts
-des chses que ne sait pas (encore) faire CSS, tel setimout
Oui, bon, alors si c'est plus simple pour toi :
(sous-menus non overisés pour ne pas compliquer)
<style type="text/css">
#menu, #menu ul { list-style: none; padding:0 }
#menu li { background-color: lightyellow; )
</style>
<script type="text/javascript">
/* la fonction 'vu' agit comme un balancier
* un coup jaune et sous-menu affiché
* un coup jaune clair et sous-menu caché */
function vu(quoi) {
// les styles du menu survolé/quitté et de ses sous-menus
var menu = quoi.style,
ss_menu = quoi.getElementsByTagName('UL')[0].style;
if( ss_menu.display == 'none' ) // le cas du menu survollé
{
menu.backgroundColor = 'yellow';
ss_menu.display = 'block';
}
else // le cas du menu en mouseOut
{
menu.backgroundColor = 'lightyellow';
ss_menu.display = 'none';
}
}
</script>
ce que je voulais dire : peu importe le navigateur que *tu* as,
il faut que ça fonctionne (à peu près) correctement partout.
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
ce qui ne résoudra pas les pbs rencontrés avec les autres versions.
<!-- fin du menu - la suite pour tester -->
<p class="stop">test de fin pour voir l'effet YoYo !</p>
<p><button onclick="change(this)">changer menu en absolute</button></p>
quels sont les merites respectifs de
absolu (ma preference avant ton avis) et relatif ?
Normalement, si tu as essayé le code proposé,
tu as dû voir le problème rencontré avec le relatif.
D'autre part, pour une bienséance de la présentation du html si css (et
JS) désactivé(s) - cas mal-voyants par exemple - le menu doit être mis
tout à la fin du fichier dans le html (on lit la page - avec un
vocaliseur ou non - et en fin de lecture on peut continuer à naviguer,
sans tout relire à l'envers)
donc l'absolute s'impose pour un menu mis en forme en haut de page.
À ce propos de bienséance, le code ci-haut n'est pas tout à fait correct
puisque JS désactivé ça ne fonctionne pas.
Ou alors il faut que les menus renvoient vers une page où les sous-menus
associés sont affichés.
ce que je voulais dire : peu importe le navigateur que *tu* as, il faut que ça fonctionne (à peu près) correctement partout.
plus tard, avec IE9, on devrait avoir HTML5, CSS 100%,..
ce qui ne résoudra pas les pbs rencontrés avec les autres versions.
<!-- fin du menu - la suite pour tester --> <p class="stop">test de fin pour voir l'effet YoYo !</p> <p><button onclick="change(this)">changer menu en absolute</button></p>
quels sont les merites respectifs de absolu (ma preference avant ton avis) et relatif ?
Normalement, si tu as essayé le code proposé, tu as dû voir le problème rencontré avec le relatif.
D'autre part, pour une bienséance de la présentation du html si css (et JS) désactivé(s) - cas mal-voyants par exemple - le menu doit être mis tout à la fin du fichier dans le html (on lit la page - avec un vocaliseur ou non - et en fin de lecture on peut continuer à naviguer, sans tout relire à l'envers) donc l'absolute s'impose pour un menu mis en forme en haut de page.
À ce propos de bienséance, le code ci-haut n'est pas tout à fait correct puisque JS désactivé ça ne fonctionne pas. Ou alors il faut que les menus renvoient vers une page où les sous-menus associés sont affichés.
