chgt de couleur au survol

Pascal

02/06/2010 à 16:11

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>.

<ul style="list-style-type:square">
<li
onMouseOver="sous_menu_ouvre( [etc...]

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

02/06/2010 à 18:00

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

<ul id="menu">
<li onmouseover="montre('m_1')">menu 1
<ul id="m_1">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
<ul>
</li>
.../... etc.

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>

<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

<ul id="menu">
<li onmouseover="montre('m_1')">menu 1
<ul id="m_1">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
<ul>
</li>
.../... etc.

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>

<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

Vous avez filtré cet utilisateur ! Consultez son message

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

<ul id="menu">
<li onmouseover="montre('m_1')">menu 1
<ul id="m_1">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
<ul>
</li>
.../... etc.

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>

<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

02/06/2010 à 19:03

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' : '';
}

a[n].onmouseover = function() { ouvreFerme(this) };
a[n].onmouseout = function() { ouvreFerme(this) };

a[n].onmouseover = ouvreFerme;
a[n].onmouseout = ouvreFerme;

C'était pas grand chose, mais pourquoi s'en priver, hein ?

Cordialement,
Pascal

SAM

02/06/2010 à 20:01

Le 6/2/10 7:03 PM, Pascal a écrit :

Bonjour,

Une toute petite minuscule amélioration, si je puis.

Ha!? Tien ? oui, ça fonctionne aussi dans IE.6

Et dans les versions antérieures ?

function ouvreFerme() {
this.className = this.className==''? 'vu' : '';
}

a[n].onmouseover = ouvreFerme;
a[n].onmouseout = ouvreFerme;

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

03/06/2010 à 03:37

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

<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

<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

Vous avez filtré cet utilisateur ! Consultez son message

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

<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

03/06/2010 à 10:14

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>

</head>
<body>

<ul id="menu">
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 1
<ul style="display: none">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
</ul>
</li>
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 2
<ul style="display: none">
<li>sous-menu 2.1</li>
<li>sous-menu 2.2</li>
</ul>
</li>
</ul>

le code est ci-dessous

marche impec, comme d'hab

Donc tu l'as essayé.

merci d'avance (j'ai IE8)

tant pis ! pas d'ma faute, je te plains.

je suis heureux avec IE8 :

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.

<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>

</head>
<body>

<ul id="menu">
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 1
<ul style="display: none">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
</ul>
</li>
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 2
<ul style="display: none">
<li>sous-menu 2.1</li>
<li>sous-menu 2.2</li>
</ul>
</li>
</ul>

le code est ci-dessous

marche impec, comme d'hab

Donc tu l'as essayé.

merci d'avance (j'ai IE8)

tant pis ! pas d'ma faute, je te plains.

je suis heureux avec IE8 :

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.

<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

Vous avez filtré cet utilisateur ! Consultez son message

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>

</head>
<body>

<ul id="menu">
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 1
<ul style="display: none">
<li>sous-menu 1.1</li>
<li>sous-menu 1.2</li>
</ul>
</li>
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 2
<ul style="display: none">
<li>sous-menu 2.1</li>
<li>sous-menu 2.2</li>
</ul>
</li>
</ul>

le code est ci-dessous

marche impec, comme d'hab

Donc tu l'as essayé.

merci d'avance (j'ai IE8)

tant pis ! pas d'ma faute, je te plains.

je suis heureux avec IE8 :

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.

<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

chgt de couleur au survol

6 réponses

Veuillez sélectionner un problème