chgt de couleur au survol

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

<body>
<ul style="list-style-type:square">
<li
onMouseOver="sous_menu_ouvre(document.getElementById('niveau_1_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_1_in'));"
id="niveau_1" style="float:left">
couleur fixe</li>
<ul id="niveau_1_in" style="display:none" >

<li
onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));"
id="niveau_11">
meme couleur</li>
<ul id="niveau_11_in" style="display:none">
<li> menu 1.1.1</li> <li> menu 1.1.2</li>
</ul>

<li
onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));"
id="niveau_12">
couleur differente</li>
<ul id="niveau_12_in" style=" display: none; color: green ;">
<li> menu 1.2.1</li> <li> menu 1.2.2</li>
</ul>

</ul>
</body> </html>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pascal
Le #22202921
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 :




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
Le #22203531
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">
<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>
</ul>
</li>
<li>menu 2
<ul>
</ul>
</li>
<li>menu 3
<ul>
</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
Le #22203931
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
Le #22204161
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
Le #22205311
On Wed, 02 Jun 2010 18:00:27 +0200, 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


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 #22205961
Le 6/3/10 3:37 AM, bpdu92 a écrit :
On Wed, 02 Jun 2010 18:00:27 +0200, SAM

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">
</ul>
</li>
<li onmouseover="vu(this)" onmouseout="vu(this)">menu 2
<ul style="display: none">
</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.

<!-- 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
Publicité
Poster une réponse
Anonyme