onmouseout appliqué à des sous menus [regle]

[cemoi]

bonjour!

Quand je fais ça le onmouseout ne marche que sur le sous menu1.
Dé que que la souris passe sur le sous menu2 et bien le menu disparait (il se renroule) je ne peux donc pas cliquer sur le liens du sous menu2 et 3 et 4...ect

je peux pas faire ma modif ds mon fichier .js? pour que cela puisse s'appliquer sur les menus de chaque page?



<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul onmouseout="javascript:montre('smenu3');"

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>

</dd>
</dl>



mon fichierr .js


function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

[jv2759]

Tu as fait des modifcication par raport à alsacréation?

[cemoi]

la seule modif c'est de permettre l'enroulement du menu quand la souris s'enleve du menu deroulant mise à part ça non j'ai rien changé... et encore moins ds le fichier .js

ça devrai marcher pourtant non?

[cemoi]

la solution étais sur le site de alsacreation... autant pour moi

la voici:*


<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>

cordialement

[calimo]

N'oublie pas de vérifier que ton contenu soit accessible sans JavaScript en le désactivant et en regardant si tu peux accéder aux sous-rubriques
On l'oublie beaucoup trop souvent

[martin]

Et maintenant que çà marche, et que tu as vérifié que ton menu est accessible sans javascript, tu vires tous les onClick et autre onMouseOver directement dans le fichier js (en modifiant légèrement ta fonction js si il faut) : séparation des comportements du contenu (similaire à la séparation de la présentation du contenu via css).

[Invité]

A oui!! Justement ça c'est mon second gros probleme à tréter.... si je désactive javascript les menus ne se deroulent plus......
Et comme je connais que tres peu javascript... c'est un peu galere... Et franchement je vois pas trop coment retourner le probleme...

l'url: http://perso.wanadoo.fr/mobilier.urbain/

eee je dvrai peut etre faire un nouveau post pour ça.......

[calimo]

Si je dis ça c'est que bien sûr il ne l'est pas

Je crois que ce n'est pas à Mathieu de modifier le code, mais plutôt directement l'auteur d'alsacréations, sibelius
Au passage on peut citer l'article Séparer le comportement de la structure, rempli de bon sens et de choses qui devraient être déjà utilisées à profusion (mais qui ne le sont malheureusement pas )

Du JS comme ça : j'aime

[jv2759]

Une solution sait de suprimer le display: none; dans :

#menu dd {
display: none;}


puis de mettre à l'ouverture de ta pages :

montre();


Ainsi par defaut tout est ouvert. Si javascripte et activer, alors il fermeras tout...

[Invité]

séparer le comportement de la structure bé oui c'est ce que j'aimerai faire au maximum avec les css et les .js mais voila je suis pas un pro et j'ai peu de temps libre...

J'ai lu l'article et c'est évident que pour l'ergonomie de la navigation sur un site les script java ne devrai pas empécher cette derniere... du moins c'est ce que j'aimerai obtenir sur mon site final......

mais le truc c'est que je suis en html et non pas en xhtml.....bref j'ai du taff sur la planche

Pour le moment je pensse choisir l'alternative de jv2759 mais je compte bien terminé avec qq chose de propre au final! Ca sera pas pour cette année mais ça viendra ça c'est sur

Merci à tous pour vos precieux conseils et bonne nuit!

[calimo]

La séparation du contenu et du comportement (et de la mise en page) peut aussi bien se faire en xhtml qu'en html

[martin]

Continue en html, c'est trés bien, mais essaie de passer en html strict. Si un jour tu souhaites passer en xhtml, ce sera alors simplissime.

La solution pour que ton site soit accessible sans javascript peut être simple. Il suffit que les titres de tes menus soit des liens, pointant sur des pages où les sous menus sont disponibles. A toi de penser ton site en conséquence.

Sinon j'ai regardé ta page, quelques critiques :
pourquoi imbriquer des listes UL dans des listes DL. Dans ton cas c'est inutile, puisque tu imbrique une liste UL dans un unique DT. Utilise plutôt plusieurs DT.

Je l'aime pas ce javascript de menu, les menus tremblent sous mon mozilla.

Je te propose une autre solution, que je trouve plus simple, et que j'ai appliqué dernièrement.

Le code:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
body {
font: 80% verdana, arial, sans-serif;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
margin: 1px;
}
#menu dl:hover dd{
	display: block !important;
}
-->
</style>

<body>
 <div id="menu">
	<dl>
		<dt><a href="index.html" title="gnagna">Accueil</a></dt>
	</dl>
	<dl>			
		<dt><a href="#">Moi</a></dt>
			<dd><a href="fichier1.zip">Mon CV</a></dd>
			<dd><a href="#">Galleries ébénisterie:</a></dd>
			<dd><a href="#">Volute 1.0</a></dd>
	</dl>
	<dl>	
		<dt><a href="#">Venceslas</a></dt>
		<dd><a href="fichier2.zip">Son CV</a></dd>
		<dd><a href="#">Galleries graphisme</a></dd>
	</dl>
	<dl>	
		<dt><a href="fichier1.html">Le mémoire</a></dt>
			<dd><a href="fichier2.html">Remerciement</a></dd>
			<dd><a href="fichier3.html">Sommaire</a></dd>
			<dd><a href="fichier4.html">Chap 1</a></dd>
</div>

</body>
</html>

Chouette ? Non, mozilla c'est nickel, mais IE n'en veut pas.

Donc on utilise le hack trouvé ici http://www.xs4all.nl/~peterned/csshover.html

Tu télécharge le fichier csshover.htc proposé. Seulement je n'aime pas complétement la façon dont il propose de s'en servir.

Tu crées un fichier csshoverIE.css, contenant le code suivant :

Code : Tout sélectionner

body { behavior:url("csshover.htc"); }

Et dans la balise head de ta page, tu inclues:

Code : Tout sélectionner

<!--[if lt IE 7]>
<link href="csshoverIE.css" rel="stylesheet" type="text/css">
<![endif]-->

Il n'y a que IE qui interprétera ces lignes, qui signifient "si le navigateur est IE et qu'il est de version inférieur à 7". Si un jour cette version sort, on peut supposer que le selecteur hover sera intégré correctement...

(les 3 fichiers, html css et htc sont situés dans le même repertoire dans cet exemple)

Et voilà, IE est capable de lire correctement le fichier

Attention, si javascript est désactivé, IE ne déroulera pas les menus.

Voilà, si çà te plait, à toi d'améliorer.

[calimo]

Mouais, de nouveau je ne conseillerais pas les hacks, et en plus l'imbrication de ul dans les dd vient directement d'alsacreations, je ne sais pas pourquoi il a changé sa dernière version qui marchait très bien mais maintenant c'est la cata Je le contacte pour lui dire de changer ça

[cemoi]

ça tremble sous moz?... comprend pas ça le fais pas che moi... Bé merci de me le dire! Oula ya de la ré vision de fou à faire là...bon bon je prend note mais au pire je prefere adapter la mise en page du site que de faire cette technique...on m'en a déja parlé mais voila je le sens à moitié ce machin surtout dans le temps.....

Je pensse qu'il faut savoir revoir ça mise en page en fonction de l'ergonomie de navigation... en gros mieux vaut faire du tres simple et efficace que du compliqué et à moitié valid pour les autres navigateurs..... Dailleur on peut aussi faire du tres simple et tres beau du coup c'est tres efficace ;o)

Vraiment merci pour le tuyeau car cela me fait avencer dans mon aprentissage

[martin]

Bon, ben une solution sans hack alors, en simulant le hover par javascript, uniquement sur le div menu.

Le fichier html:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="monjs.js" type="text/JavaScript"></script>
<style type="text/css">
<!--
body {
font: 80% verdana, arial, sans-serif;
}
#menu dl {
float: left;
width: 12em;
border: 1px solid gray;
}
#menu dt {
/*width: 100%;*/
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
}
-->
</style>

</head>
<body>
 <div id="menu">
	<dl>
		<dt><a href="index.html" title="gnagna">Accueil</a></dt>
	</dl>
	<dl id="poil">			
		<dt><a href="#">Moi</a></dt>
			<dd><a href="fichier1.zip">Mon CV</a></dd>
			<dd><a href="#">Galleries ébénisterie:</a></dd>
			<dd><a href="#">Volute 1.0</a></dd>
	</dl>
	<dl>	
		<dt><a href="#">Venceslas</a></dt>
		<dd><a href="fichier2.zip">Son CV</a></dd>
		<dd><a href="#">Galleries graphisme</a></dd>
	</dl>
	<dl>	
		<dt><a href="fichier1.html">Le mémoire</a></dt>
			<dd><a href="fichier2.html">Remerciement</a></dd>
			<dd><a href="fichier3.html">Sommaire</a></dd>
			<dd><a href="fichier4.html">Chap 1</a></dd>
</div>

</body>
</html>

et le fichier javascript monjs.js :

Code : Tout sélectionner

function montreMenu(){
	var sousMenu=this.getElementsByTagName("dd");
	var nbreSousMenu=sousMenu.length;
	for (var i=0;i<nbreSousMenu;i++){
		sousMenu[i].style.display="block";
	};
}
function cacheMenu(){
	var sousMenu=this.getElementsByTagName("dd");
	var nbreSousMenu=sousMenu.length;
	for (var i=0;i<nbreSousMenu;i++){
		sousMenu[i].style.display="none";
	};
}
function init(){
	var lesMenus=document.getElementById("menu").getElementsByTagName("dl");
	var nbreMenus=lesMenus.length;
	for (var i=0;i<nbreMenus;i++){
		lesMenus[i].onmouseover=montreMenu;
		lesMenus[i].onmouseout=cacheMenu;
	};
}
window.onload=init;

Voilà, c'est un exemple de séparation des comportements.

Mais çà revient un peu au même que l'inclusion du fichier htc, sauf que ce dernier n'est pas plus lourd, inclus uniquement pour IE, et permet d'utiliser les hover ailleurs sur la page...