Publicité

Avant toute chose nous allons créer un code HTML qui va nous permettre de voir la télécommande. Ce menu doit s'intégrer dans un bandeau dans le haut de la page, l'espace qui lui est attribué est de 756px x 45px. Pour le réaliser, nous allons utiliser les balises <dl>, <dt>, <dd>, <ul> et <li>.

<dl> : definition list - permet de définir une liste de définitions.
<dt> : definition term - permet de définir une liste de termes à définir.
<dd> : definition definition - permet de définir un résumé d'une définition dans une liste de définitions.
<ul> : unordered list - permet de définir une liste énumérative.
<li> : list item - permet de définir une liste.

<table>
   <tr>
      <td>
         <div>
            <dl>
               <dt></dt>
            </dl>
            <dl>
               <dt></dt>
            </dl>
            …
         </div>
      </td>
   </tr>
</table>

Maintenant voyons un exemple de cette structure dans le tableau du bandeau, sur lequel nous appliquerons le style "TBLMENU" :

<!--Telecommande-->
<table width=756 cellspacing=0 cellpadding=0 border=0>

<tr>
<td width=756 height=45 align="left" valign="top" id="TBLMENU">
<div>
<dl style="width: 64px;">
<dt style="width: 64px;"><a href="index.php" title="Accueil" CLASS="MYMENU" style="width: 64px;">Accueil</a></dt>
</dl>
<dl style="width: 144px;">
<dt style="width: 144px;"><a href="presentation.php" title="Qui sommes-nous ?" CLASS="MYMENU" style="width: 144px;">Qui sommes-nous ?</a></dt>
</dl>
<dl style="width: 176px;">
<dt style="width: 176px;"><a href="partenaire.php" title="Clients / Partenaires" CLASS="MYMENU" style="width: 176px;">Clients / Partenaires</a></dt>
</dl>
<dl style="width: 136px;">
<dt style="width: 136px;"><a href="contact.php" title="Où sommes-nous ?" CLASS="MYMENU" style="width: 136px;">Où sommes-nous ?</a></dt>
</dl>
</div>
</td>
</tr>

Vous aurez sûrement remarqué que nous avons défini les largeurs des boutons à l'intérieur de chaque élément. Nous allons vous montrer plus loin dans le code comment faire pour réaliser cette opération de manière dynamique avec PHP. La définition des largeurs sur chaque élément nous permets de donner à chaque bouton une largeur spécifique, car l'espace utile pour "Accueil" n'est pas le même pour "Où sommes-nous ?".

Nous appliquons le style sur le "td" du tableau. Celui-ci s'appliquera à tous les éléments se trouvant à l'intérieur de cette cellule.

#TBLMENU
{
   background-image: url(http://www.ypci-net.com/images/fond_btn_up.jpg);
   background-repeat: repeat-x;
   width: 756;
   height: 45px;
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#TBLMENU div, dl, dt, dd
{
   margin: 0;
   padding: 0;
   top: 0;
   left: 0;
}

#TBLMENU div
{
   position: relative;
   z-index: 100;
   width: 756px;
   height: 45px;
}

#TBLMENU dl
{
   float: left;
   height: 45px;
}

#TBLMENU dt
{
   height: 45px;
   cursor: pointer;
}

La propriété "list-style-type: none;" du CSS nous permet de supprimer les points devant les éléments d'une liste.

La propriété "cursor: pointer;" du CSS nous permet de forcer l'apparition du curseur "lien" sur les éléments "dt" si ils n'ont pas de lien défini (ce qui sera le cas dans la deuxième étape avec la définition du "dd"). Pour la définition du style sur le "a" :

#TBLMENU .MYMENU
{
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   text-decoration: none;
   height: 45px;
   font-family: Arial, Helvetica;
   color: #FFFFFF;
   font-size: 9pt;
   font-weight: bold;
   border-right: 1px solid #6F9CCF;
}

#TBLMENU a.MYMENU:hover
{
   color: #0033CC;
   background-image: url(http://www.ypci-net.com/images/fond_btn_dw.jpg);
   background-repeat: repeat-x;
}

Les propriétés "display: table-cell" et "vertical-align: middle" ne fonctionnent que sous Mozilla. Celles-ci servent à mettre le texte du bouton centré dans le bouton. Afin de permettre cela sous Internet Explorer, il vous suffit de rajouter une définition de propriété conditionnée par le navigateur.

<!--[if ie]>
<LINK REL="stylesheet" TYPE="text/css" href="telec_supie.css" />
<![endif]-->

"telec_supie.css" contient les lignes suivantes :

#TBLMENU .MYMENU
{
   display: block;
   padding-top: 15px;
}

Ici les 15 pixels correspondent au placement du texte dans le bouton suivant la hauteur du texte et des marges du bouton.

Maintenant nous allons tout d'abord définir les éléments <dd>, <ul> et <li> dans la feuille de style CSS.

#TBLMENU ul
{
   margin: 0;
   padding: 0;
   position: absolute;
   border: 1px solid gray;
   background: #FFFFFF;
}

#TBLMENU li
{
   background: #FFFFFF;
   width: 98%;
   text-align: left;
   margin: 2;
   padding: 0;
   list-style-type: none;
}

#TBLMENU a.MYLIMENU
{
   text-decoration: none;
   display: block;
   font-family: Arial, Helvetica;
   font-size: 9pt;
   font-weight: bold;
   color: #0033CC;
}

#TBLMENU a.MYLIMENU:hover
{
   background: #6F9CCF;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 9pt;
   font-weight: bold;
   color: #0033CC;
}

La valeur de la largeur du "ul" sera déterminée par le calcul sur la base du plus long texte des sous rubriques.

Maintenant nous devons écrire un JavaScript qui va permettre de faire disparaître les zones de sous-rubrique.

window.onload = montre; // Sert à lancer la fonction au lancement de la page.
//
// montre(id) permet de faire disparaître l'ensemble des blocks,
// puis de faire apparaître le block spécifié si il existe.
function montre(id)
{

//
// Récupération de l'élément
var d = document.getElementById(id);
//
//Boucle sur l'ensemble des blocks
for (var i = 1; i<=10; i++)
{
if (document.getElementById('Prnt'+i))
{
document.getElementById('Prnt'+i).style.display='none';
}
}
//
//Si "d" existe, apparition du block.
if (d)
{

d.style.display='block';
}

Maintenant intégrons le sous-menu et l'appel de la fonction JavaScript :

<!--Telecommande-->
<table width=756 cellspacing=0 cellpadding=0 border=0>
<tr>
<td width=756 height=45 align="left" valign="top" id="TBLMENU">
<div>
<dl style="width: 64px;">
<dt onmouseover="javascript:montre();" style="width: 64px;"><a href="index.php" title="Accueil" class="MYMENU" style="width: 64px;">Accueil</a></dt>
</dl>
<dl style="width: 144px;">
<dt onmouseover="javascript:montre();" style="width: 144px;"><a href="presentation.php" title="Qui sommes-nous ?" class="MYMENU" style="width: 144px;">Qui sommes-nous ?</a></dt>
</dl>
<!--Bouton avec sous menu-->
<dl style="width: 104px;">
<dt onmouseover="javascript:montre('Prnt3');" style="width: 104px;"><span class="MYMENU" style="width: 104px;">Nos Services</span></dt>
<dd id="Prnt3">
<ul style="width: 224px;">
<li><a href="devapp.php" class="MYLIMENU">Développement d'application</a></li>
<li><a href="devweb.php" class="MYLIMENU">Développement Web</a></li>
<li><a href="si.php" class="MYLIMENU">Intranet et Collaboration</a></li>
<li><a href="forma.php" class="MYLIMENU">Formation</a></li>
<li><a href="comp.php" class="MYLIMENU">Nos Compétences</a></li>
</ul>
</dd>
</dl>
<!--Fin Bouton avec sous menu-->
<dl style="width: 176px;">
<dt onmouseover="javascript:montre();" style="width: 176px;"><a href="partenaire.php" title="Clients / Partenaires" class="MYMENU" style="width: 176px;">Clients / Partenaires</a></dt>
</dl>
<dl style="width: 136px;">
<dt onmouseover="javascript:montre();" style="width: 136px;"><a href="contact.php" title="Où sommes-nous ?" class="MYMENU" style="width: 136px;">Où sommes-nous ?</a></dt>
</dl>
</div>
</td>
</tr>
</table>
<!--FinTelecommande-->

Voilà le résultat :