Tutorial écrit par : Daniel Fabien - Script Masters

La préparation du code nécessite deux étapes importantes. Tout d’abord, il faut cacher les parties dites déroulantes du menu. Il faut par ailleurs adapter le script au navigateur qui sera chargé de l’interpréter. Ceci fait, nous pourrons enfin, en troisième partie, développer l’aspect dynamique du menu.

Masquer les parties déroulantes

Le terme « masquer les parties déroulantes » est une façon simplifier d’exprimer le fait de rendre invisible les sous menus qui sont en réalité des lignes d’un tableau Html. Avant d’expliquer cette technique, il est nécessaire de rappeler que le langage de script portant le nom de DHTML est en fait un ‘melting pot’ de langage javascript et de feuilles de style (css). Ces dernières agissent principalement sur l’aspect visuel alors que le javascript les fait réagir à un instant ou sur un évènement bien précis.

Pour revenir à notre menu, nous allons donc utiliser les propriétés de style pour cacher les lignes du tableau qui feront office de sous menu. Voici la synthaxe :

De cette manière, nous pouvons cacher les sous menus du tableau tout en sachant que le code Html de ces lignes est présent. La propriété « id » permettra plus tard de reconnaître la ligne cachée à partir de l’identifiant qu’on lui aura attribué (ici « menu1 »). Nous obtenons alors le résultat suivant :

Détection du navigateur

Dans la partie suivante, nous verrons comment Javascript nous permettra de les faire apparaître sur un clic. Mais avant d’en arriver là, il est nécessaire de préciser que javascript est géré différemment selon le navigateur du client. Pour notre script, nous allons paramétrer le menu afin qu’il soit compatible avec Internet Explorer 4+ et Netscape 6+.

Pour ce faire nous devons dans un premier temps détecter le type de navigateur. Pour cela, on test si les différentes fonctions permettant d’accéder à un élément de la page est disponible. Voici un récapitulatif des fonctions utilisées par les différentes versions d’Internet Explorer et Netscape. :

Notez qu’à titre d’information, j’ai ajouté la fonction supportée par Netscape 4. Cependant, d’autres problèmes d’incompatibilité se posant par la suite, il est préférable de le laisser de coté ce navigateur afin de simplifier ce tutorial déjà assez complexe.

Les variables isIE et isNN6 prendront ainsi les valeurs true ou false selon le navigateur utilisé par le client. Elles seront utilisées plus tard dans la troisième partie de ce tutorial.

Cette troisième partie est la plus longue des trois, mais aussi la plus intéressante d’un point de vue développement. Vous y apprendrez à ouvrir et fermer les sous-menus, créer vos liens pour qu’ils soient notamment compatibles avec les frames, ajouter des effets de rollover ou bien encore changer d’image lors de l’ouverture d’un menu.
Curieux de voir ça ?

Cliquez ici pour lire la suite de ce tutorial...