Ce tutoriel a pour but de réaliser un menu efficace en JavaScript, permettant un accès rapide à des sous-rubriques et une évolution relativement simple.

Il faudra ainsi procéder en trois étapes :

- Création du fichier JavaScript comprenant les fonctions essentielles à la construction du menu (menu.js).

- Mise en place du fichier HTML avec les composants du menu (index.html).

- Rédaction de la feuille de style CSS afin d'embellir le menu (style.css).

Avant de commencer, il est nécessaire de définir le mode de fonctionnement de notre menu. L'objectif est donc de générer des rubriques qui comprendront chacune des liens vers d?autres pages. Pour ce faire il nous faudra cinq fonctions JavaScript :

- Ajout d'une rubrique avec le nom en paramètre,
- Ajout d'un lien à la rubrique parente comprenant le nom et l'URL du lien,
- Construction du menu,
- Sélection de l'onglet voulu,
- Affichage du menu.

La première étape consiste donc à créer le fichier JavaScript qui va permettre de générer le menu :


La deuxième étape consiste à la mise en place du fichier HTML. Il contient les différentes rubriques et liens de notre menu :
 
Nous allons maintenant attaquer la partie CSS de notre menu afin de le rendre plus joli.
body {
background-color:#DDDDDD;
}
#MenuJs {
position:relative;
top:20px;
}
#Rubriques {
display:block;
}
#Rubriques div {
display:inline;
margin-left:10px;
margin-right:-5px;
padding:5px;
padding-bottom:1px;
border:1px solid #999;
border-bottom-width:0px;
font-weight:bold;
cursor: pointer;
font-family:verdana, arial;
font-size:.8em;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
.Rubrique {
color:#FFF;
background-color:#888;
}
.Rubrique:hover {
background-color:#AAA;
}
.Rubrique:active {
background-color:#444;
}
.RubriqueON {
color:#FFF;
background-color:#222222;
}
#sousRubrique {
display:block;
background-color:#222222;
padding:4px;
margin:0px;
border:1px solid #999;
font-weight:bold;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
#sousRubrique a:hover {
color:#666666;
}
#sousRubrique div,a {
color:#CCC;
font-family:verdana, arial;
font-size:.8em;
text-align:center;
display:inline;
padding:2px;
margin-right:10px;
}

Voilà, vous avez maintenant toutes les clés en main pour créer votre menu JavaScript tout simplement !

Et surtout n'hésitez pas à nous faire part de vos remarques.