| Avant de commencer à développer un menu dynamique en DHTML,
il faut dans un premier temps dessiner une esquisse en HTML de ce que nous
souhaitons obtenir. Cette étape est très importante et il
est nécessaire de respecter un certains nombres de contraintes.
Tableau en HTML
Ici nous décidons d’utiliser une technique simple de création
de menu. Pour le concevoir, nous allons cacher, à l’aide
d’un élément de style que nous verrons plus tard,
les lignes d’un tableau. Mais avant d’aller plus loin, il
est sans doute nécessaire de rappeler de quelle manière
est constitué un tableau html. Voici un tableau banal afin de bien
comprendre le fonctionnement.
| Fig. 1.1 : Code html d’un tableau |
| <table>
<tr>
<td>Ligne 1 : colonne 1</td>
<td>Ligne 1 : colonne 2</td>
</tr>
<tr>
<td>Ligne 2 : colonne 1</td>
<td>Ligne 2 : colonne 2</td>
</tr>
</table>
|
Ce qui permet d’obtenir :
| Ligne 1 : colonne 1 |
Ligne 1 : colonne 2 |
| Ligne 2 : colonne 1 |
Ligne 2 : colonne 2 |
Le principe est simple :
- Vous déclarez votre tableau entre les balises <table></table>
- Vous déclarez une nouvelle ligne entre les balises <tr></tr>
- Vous déclarez une nouvelle colonne entre les balises <td></td>
Mais attention, chacune de ces balises sont nécessaires pour afficher
correctement votre tableau. Ainsi, si vous possédez une seule ligne
à votre tableau, vous devez tout de même la déclarer
entre les balises <tr></tr>.
Le tableau de votre menu
Le menu que nous souhaitons développer sera vertical et aura une
largeur de 200 pixels. Aussi, il nécessitera plusieurs lignes et
une seule colonne. Pour ce faire, nous allons reprendre le principe vu
précédemment :
| Fig. 1.2 : Code html du menu |
<table width="200" cellspacing="1" cellpadding="0">
<tr>
<td>Titre 1</td>
</tr>
<tr>
<td>Espace réservé aux sous-titre
1</td>
</tr>
<tr>
<td>Titre 2</td>
</tr>
<tr>
<td>Espace réservé aux sous-titre
2</td>
</tr>
</table> |
Ce qui permet d’obtenir :
| Titre 1 |
| Espace réservé aux sous-titre 1 |
| Titre 2 |
| Espace réservé aux sous-titre 2 |
Vous remarquerez que nous avons ajouté trois attributs à
la balise <table> : « width », « cellspacing »
et « cellpadding ». Pour les curieux, voici une description
de chacun d’entre eux :
- width : Permet de définir la largeur du tableau. Par défaut
celle-ci est exprimée en pixel. Vous pouvez également la
définir en pourcentage à l’aide du symbole «
% ». Nous lui donnons donc la valeur de 200 pixels0
- cellspacing : C’est la quantité d’espace vide entre
les bords extérieur de chaque cellule du tableau. Comme nous souhaitons
obtenir un petit liseré vide ente chaque cellule, nous lui donnons
la valeur de 1 pixel.
- cellpadding : C’est la quantité d’espace vide entre
le bord de la cellule et le contenu de celle-ci. Afin d’utiliser
au mieux cet espace, nous lui donnons une valeur nulle.
Le tableau des sous menu
Vous avez sans doute remarqué dans le tableau précédent,
la mention « Espace réservé aux sous-titre n ».
Nous allons remplacer cette mention par un nouveau tableau contenant tout
les titres de sous-menus :
| Fig. 1.3 : Code html d’un sous-menu |
<table width="200" cellspacing="0" cellpadding="0">
<tr>
<td>- Sous-Titre 1.1</td>
</tr>
<tr>
<td>- Sous-Titre 1.2</td>
</tr>
</table> |
Ce qui permet d’obtenir ceci si on remplace les mentions du tableau
précédent :
| Titre 1 |
| - Sous-Titre 1.1 |
| - Sous-Titre 1.2 |
|
| Titre 2 |
| - Sous-Titre 2.1 |
| - Sous-Titre 2.2 |
|
Améliorer son design
Bien évidement, l’allure du menu est pour l’instant
très basique. Nous allons améliorer celui-ci en définissant
quelques styles css :
| Fig. 1.4 : Feuille de style du menu |
<style type="text/css">
td.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #959EAD;
cursor: hand
}
td.soustitre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #C3C9D4;
cursor: hand
}
</style>
|
Pour bien comprendre les styles css, aidez-vous du tutorial qui se trouve
à cette adresse :
http://www.script-masters.com/home/tutorial_html-html_fichiercss.html
Le principe est très simple. Nous avons décidé de
bien mettre en évidence la différence entre les titres des
menus et les sous-titres des sous-menus. Pour ce faire, on définit
une class titre et une seconde class soustitre qui définisse l’allure
générale des cellules appellant ces class.
Voici les propriétés déclarées :
- La police utilisée (Verdana dans les deux cas)
- La taille de police en pixels
- La couleur de la police (noir dans les deux cas)
- La couleur de fond.
- Le curseur se transforme en main au passage de la souris (IE seulement)
Comme vous pouvez l’apprendre dans le tutorial sur les feuilles
de styles, pour que ces changements soient pris en compte, il faut les
appeler à l’aide de l’attribut « class ».
Par exemple :
| Fig. 1.5 : Utilisation de la feuille de style |
<table>
<tr>
<td class= ‘titre’>Cellule
prenant l’allure définit par le style titre</td>
</tr>
</table> |
Nous allons donc utiliser ce principe afin de mettre en forme notre ersatz
de menu. On obtient alors le code suivant :
<table width="200" border="0" cellspacing="1"
cellpadding="0">
<tr>
<td class="titre">Titre
1</td>
</tr>
<tr>
<td><table
width="200" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td class="soustitre">-
Sous-Titre 1.1</td>
</tr>
<tr>
<td
class="soustitre">- Sous-Titre 1.2</td>
</tr>
</table></td>
</tr>
<tr>
<td
class="titre">Titre 2</td>
</tr>
<tr>
<td><table width="200" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td class="soustitre">- Sous-Titre 2.1</td>
</tr>
<tr>
<td class="soustitre">-
Sous-Titre 2.2</td>
</tr>
</table></td>
</tr>
</table> |
Ce qui permet d’obtenir notre menu comme si il était totalement
déroulé (et bien sûr statique). Voici à présent
ce à quoi il ressemble :
| Titre 1 |
| - Sous-Titre 1.1 |
| - Sous-Titre 1.2 |
|
| Titre 2 |
| - Sous-Titre 2.1 |
| - Sous-Titre 2.2 |
|
Nous venons de cette manière de définir l’allure
générale de notre menu. Dans la prochaine étape,
nous allons préparer le terrain pour le rendre dynamique. Pour
cela, il faudra cacher les sous menus et détecter les navigateurs
utilisés afin de le rendre compatible avec un maximum de navigateur.
Cliquez
ici pour lire la suite de ce tutorial...
|
Titre 1