Bonjour,
Je travaille depuis un petit moment à temps perdu sur un javascript qui permet une navigation sur un menu déroulant qui fonctionne aussi bien au clavier qu'à la souris.
J'ai mis une tempo sur les événements à la souris pour éviter les dépliages/enroulages intempestifs.
Ca a l'air de bien fonctionner, je pense être arrivé à quelque chose de stable, par contre, n'ayant aucune connaissance de javascript, le code n'est surement pas optimum.
Est-ce que quelqu'un aurait la bonté d'y jeter un oeil et de me faire une relecture du code ?
http://codepaste.appspot.com/show?id=376121
Pour voir le résultat
Je copie colle le code ici aussi, au cas où l'url ne soit pas pérenne :
Merci d'avance.
Modifié par Jihaisse (26 Nov 2010 - 14:59)
Je travaille depuis un petit moment à temps perdu sur un javascript qui permet une navigation sur un menu déroulant qui fonctionne aussi bien au clavier qu'à la souris.
J'ai mis une tempo sur les événements à la souris pour éviter les dépliages/enroulages intempestifs.
Ca a l'air de bien fonctionner, je pense être arrivé à quelque chose de stable, par contre, n'ayant aucune connaissance de javascript, le code n'est surement pas optimum.
Est-ce que quelqu'un aurait la bonté d'y jeter un oeil et de me faire une relecture du code ?
http://codepaste.appspot.com/show?id=376121
Pour voir le résultat
Je copie colle le code ici aussi, au cas où l'url ne soit pas pérenne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
var surElem = false;
var elem = '';
var old = '';
function deroule(elem) {
if (surElem == true) {
//on déroule les sous rubrique de l'élément sur lequel on est (elem)
$(elem).children("ul.subMenu").slideDown("slow", function () { $(elem).addClass("open") });
//si l'élément sur lequel on est (elem) est différent de celui sur lequel on était (old)
if (old.id != elem.id) {
//on replie le menu de l'élément sur lequel on était (old)
$(old).children("ul.subMenu").slideUp("slow", function () { $(old).parent().removeClass("open") });
//old prend la valeur de l'élément sur lequel on est
old = elem;
}
}
}
function renroule(elem) {
//document.getElementById("test").innerHTML = surElem;
if (surElem == false) {
$(elem).children("ul.subMenu").slideUp("slow", function () { $(elem).removeClass("open") });
}
}
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On modifie l'évènement "hover" sur les liens dans les items de liste
$(".navigation li.toggleSubMenu").hover(
//over : on déroule le menu
function () {
surElem = true;
elem = this;
setTimeout(function(){deroule(elem)},1000);
},
//out : on replie le menu
function () {
surElem = false;
elem = this;
setTimeout(function(){renroule(elem)},1000);
}
);
// On modifie l'évènement "focus" sur les liens dans les items de liste
$(".navigation li.toggleSubMenu > a").focus( function () {
//on replie tous les menus ouverts
$(".navigation ul.subMenu").slideUp("slow", function () { $(this).parent().removeClass("open") });
//on déroule le menu de la rubrique
$(this).next("ul.subMenu").slideDown("slow", function () { $(this).parent().addClass("open") });
});
} ) ;
// -->
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="test"></span>
<ul class="navigation">
<li class="toggleSubMenu" id="item1"><a href="#" title="Aller à la page 1">Item 1</a></li>
<li class="toggleSubMenu" id="item2"><a href="#" title="Aller à la page 2">Item 2</a>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>
<li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
<li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu" id="item3"><a href="#" title="Aller à la page 3">Item 3</a>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
<li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>
</ul>
</li>
<li class="toggleSubMenu" id="item4"><a href="#" title="Aller à la page 4">Item 4</a></li>
</ul>
</body>
</html>
Merci d'avance.
Modifié par Jihaisse (26 Nov 2010 - 14:59)
