C'est en surfant sur le net à la recherche d'un tutoriel css que je suis tombée sur un site utilisant ce menu. Je l'ai trouvé ergonomique et pratique et j'ai voulu l'utiliser.
Pour avoir un aperçu de ce menu, il suffit de lever la tête, il est présent sur (presque) toutes les pages du site.
Si vous aussi vous souhaitez utiliser ce menu pour votre site, voici la marche à suivre:
- Téléchargez les fichiers menu.js et menu.css sur le site iubito.free.fr (vous trouverez également sur ce site une explication sur la manière d'utiliser ce menu)
- Copier les fichiers menu.js et menu.css dans le même répertoire que vos pages web dans lesquelles vous souhaitez utiliser ce menu.
- Ouvrez votre page HTML en mode texte (avec le bloc-note windows par exemple) pour modifier directement le code HTML.
- Dans la section <HEAD>...</HEAD> aussi appelée en-tête,
c'est à dire avant la balise de fermeture </HEAD> copiez les deux
lignes suivantes:
<script language="javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">
- Dans la sections <BODY>...</BODY> aussi appelée corps,
c'est à dire après la balise d'ouverture <BODY> copiez le
code suivant:
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
- Ensuite vous pouvez commencer à construire votre menu, voici un exemple:
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="lien"
onfocus="MontrerMenu('ssmenu1');">Titre 1<span> :</span></a>
</p>
(Si vous ne voulez pas de sous-menu ne mettez pas de section <ul>... </ul> tout simplement !)
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
<a href="lien">Titre sous menu 1<span> ;</span></a>
</li>
</ul>
( idem avec menu 2 en renommant menu2 et ssmenu2 et ainsi de suite... puis menu 3 etc...)
remplacez "lien" par l'adresse de la page vers laquelle vous voulez pointer.
et enfin copiez le texte suivant (après tous
vos éléments de menu):
</div>
<script language="Javascript"
type="text/javascript">
// Vous pouvez éventuellement changer des variables ici (nbmenu...)
// à modifier selon le nb d'en-têtes (peut différer selon
les pages)
nbmenu=1; //dans l'exemple nous avons un seul menu avec un sous-menu
Chargement();
</script>
Bon courage !