Alors que mon site était en pleins travaux, déjà beaucoup de monde me demandent le code de mon menu... donc le voici ! :-)
En plus d'être esthétique (disons... pas vilain au moins :D), il est compatible avec tous les navigateurs modernes, il fonctionne quand même si le javascript est désactivé... il est navigable au clavier et pratique pour les non-voyants équipés de plage braille ou d'une synthèse vocale...
Bref le maxi bonheur pour le webmaster et pour les surfeurs !!!
Cet article est également publié sur mon site perso à l'adresse http://iubito.free.fr/prog/menu.php
Iubito's menu a été repéré par Tristan Nitot sur Standblog.
Démos !
avec en cadeau bonux les explications pour faire un menu au look XP très réaliste ! ;-)
voir différentes captures d'écran...
Téléchargez le zip
Nouveau : la FAQ !
Fonctionnalités -
Comment construire le menu ? -
Configuration très simple -
Feuille de style -
Cadeau Bonux !
Fonctionnalités
Iubito's menu :
- design entièrement en CSS, avec un peu de javascript pour compléter
- compatible avec les navigateurs modernes, texte (Lynx), plage tactile braille pour déficients visuels, navigable au clavier (touche tab)...
- google peut facilement explorer et référencer votre site contrairement à certaines moulinettes tordues uniquement en JS... (les moteurs ignorent les codes javascript) !
- peut rester scotché en haut de page, ou scroller en même temps que la page (donc toujours visible en haut de l'écran).
- peut être horizontal ou vertical, centré ou positionné "manuellement".
- ...
Je me suis inspiré librement du script disponible sur OpenWeb (excellent site que je vous recommande pour sa politique d'utilisation des standards, et permettre l'accès des handicapés à l'Internet).
J'ai grandement amélioré le script d'OpenWeb (scroll possible, feuille de style...).
Pour tester le menu en action, direction mon site perso ;-)
« Iubito's menu » a été testé avec succès dans les conditions suivantes :
- Internet Explorer 5.0/5.5 Windows 2000
- Internet Explorer 6 Windows 98/2000/XP - javascript activé, et javascript désactivé ;
- Synthése vocale JAWS dans IE6 Windows XP ;
- MyIE2 ;
- Netscape 7 Windows ;
- Mozilla 1.5 Windows 2000/XP - javascript activé et javascript désactivé ;
- Opera 7.11 et 7.23 Windows - javascript activé et javascript désactivé ;
- Lynx (navigateur texte) Windows dont voici la capture d'écran :
- Konqueror Linux (Knoppix) ;
- Galeon 1.2 ;
- Mozilla Linux (Knoppix) ;
- Internet Explorer 5 Mac ;
- Safari 1.0 MacOS X 10.2.8 ;
- Safari 1.1 MacOS X 10.3 ;
- Mozilla 1.6 Mac ;
- Camino MacOS X ;
- Firebird MacOS X ;
- OmniWeb MacOS X ;
- ... ça fait un bon petit nombre déjà, non ? ;-)
Il ne fonctionne pas avec Netscape 4.
Si quelqu'un le teste avec un autre navigateur, qu'il me dise le résultat !
Seul limitation actuelle du script, il ne peut pas y avoir de sous-menus dans les sous-menus. Mais à côté des gros avantage qu'il possède, ce n'est rien.
Et en même temps il faut savoir qu'un menu ce n'est pas un plan du site : inutile de vouloir tout faire rentrer dedans ! Un menu trop chargé est mauvais pour la page. Donc ça vous force à simplifier et structurer votre site... ce n'est pas un mal :)
Comment construire le menu ?
Assez de blabla ! il est temps de mettre les mains dans le cambouis... oh rassurez-vous ! c'est presque un jeu d'enfant ;-)
Dans la section <head></head>, il faut mettre :
<script language="javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css" />
|
Étape 2 - le menu en lui-même : |
|
Juste après le <body>, placez le code suivant... (exemple du menu de mon site) :
<!-- pour éviter le clignotement désagréable -->
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="http://iubito.free.fr"
onfocus="MontrerMenu('ssmenu1');">iubito.free.fr<span> :</span></a>
</p>
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
<a href="/">Accueil<span> ;</span></a>
</li>
<li>
<a href="/livre/">Livre d'Or<span> ;</span></a>
</li>
<li>
<a href="/annu/">Annuaire<span> ;</span></a>
</li>
<li>
<a href="javascript:addFav();">Ajouter aux favoris<span>.</span></a>
</li>
</ul>
... idem avec menu2 et ssmenu2 ... et ainsi de suite ...
</div>
<div id="texte"></div>
<script language="Javascript"
type="text/javascript">Chargement();</script>
|
Explications :
- un
<div id="conteneurmenu"> encadre tout le menu. Le style="float:left;" sert à placer le menu à gauche (une colonne) du site si toutefois le javascript est désactivé. C'est pas toujours génial mais c'est mieux que rien. Les liens sont présents ! (voilà encore un aspect de la comptabilité...).
- un
<p> fait un menu, chaque menu doit être nommé menu1, menu2...
- le sous-menu est fait par un
<ul></ul>, chaque sous-menu doit être nommé ssmenu1, ssmenu2...
- chaque
<li></li> constitue un item du sous-menu.
Dans le <p> et dans les <li> on met :
<a href="le lien ou le javascript">Texte</a>- avant le
</a> on ajoute un <span> ;</span>. Ceci sert juste aux synthèses vocales pour aveugles. Le point-virgule leur fait "prendre une pause pour respirer" ce qui facilite "l'écoute" du menu.
Le span sera caché dans la feuille de style, pas de panique !
- le
<div id="texte"> sert juste au code javascript de tester si le navigateur est compatible CSS.
Donc ainsi vous constituez votre menu. Remarquez que la syntaxe étant du html pur et simple, il est très facile d'utiliser un langage serveur (ASP, PHP, JSP...) pour construire le menu :-)
Configuration très simple
Ça se passe dans le fichier menu.js. Les variables sont :
/* true = le menu sera vertical, à gauche.
false = le menu sera horizontal, en haut. */
var vertical = false;
/* TRES IMPORTANT !
Il faut mettre ici le nombre de menus, le script n'est pas capable de compter tout
seul ! :-p Donc si votre code va jusqu'à <p id="menu5"...> il faut mettre 5. */
var nbmenu = 3;
/* Centrer le menu ? (true/false).
Centre horizontalement ou verticalement suivant le mode choisi. */
var centrer_menu = false;
/* On est obligé de définir une largeur pour les menus. */
var largeur_menu = 85;
/* En mode vertical, on a besoin de connaître la hauteur de chaque menu.
Même si les "cases" ne sont pas dimensionnées en hauteur.
Ajustez cette variable si les menus sont trop rapprochés ou espacés en vertical. */
var hauteur_menu = 25;
/* En mode horizontal.
Largeur des sous-menus, pour IE uniquement, les autres navigateurs respectent la largeur
auto. Mettez "auto" uniquement si vous êtes sûr d'avoir mis des à la place des
espace dans les items ! */
var largeur_sous_menu = 150;
/* ... pour mettre un peu d'espace entre les menus ! */
var espace_entre_menus = 5;
/* position du menu par rapport au haut de l'écran ou de la page.
0 = le menu est tout en haut. en px */
var top_menu = 2;
/* En version horizontale.
position des sous-menus par rapport au haut de l'écran ou de la page. Il faut prévoir
la hauteur des menus, donc ne pas mettre 0 et faire "à tâton". en px */
var top_ssmenu = top_menu + 28;
/* Position gauche du menu, en px. */
var left_menu = 0;
/* En version verticale.
Position des sous-menus par rapport au bord gauche de l'écran. */
var left_ssmenu = largeur_menu+2;
/* Quand la souris quitte un sous-menu, si le sous-menu disparait immédiatement,
cela gêne l'utilisateur. Alors on peut mettre un délai avant disparition du sous-menu.
500 ms c'est bien :-) */
var delai = 650; // en milliseconde
/* En version horizontale.
Comme le menu peut se superposer avec le texte de la page, il est possible de faire
descendre un peu la page (on augmente la marge du haut) pour aérer un peu la page,
une quarantaine de pixel c'est pas mal. en px*/
var marge_en_haut_de_page = top_menu + 40;
/* En version verticale.
On décale le document à droite pour pas que le menu le superpose. */
var marge_a_gauche_de_la_page = largeur_menu + 10;
/* Mettez à true si vous souhaitez que le menu soit toujours visible.
Mettez false si vous ne le souhaitez pas, dans ce cas le menu "disparaîtra" quand vous
descendrez dans la page. */
var suivre_le_scroll=true;
|
Comment modifier l'affichage ?
Des explications détaillées sont dans le fichier menu.css, mais pour résumer, voici ce qu'il y a à modifier :
- couleurs, police, bordure et largeur des menu et ssmenu.
- l'effet spécial IE pour les ssmenu
- police et couleurs des liens "non survolés" et "survolés".
Résultat...
Sans CSS, le menu sera une liste <ul> avec des <li>... idéal pour Lynx et les synthèse vocale.
Sans javascript, on aura une bande verticale à gauche.
Avec JS et CSS, on aura le menu complet ;-)
Et en cadeau bonux... !
Eh oui, fait rarissime, je publie quelque chose en ASP.Net !!!
Christophe Liacopoulos de la société Sokhar utilise Iubito's
menu dans son ERP (par ici la démo !). Il a créé un code ASP.Net C# qui génère le menu à partir d'une base Access.
Il offre son script en téléchargement ici. Il intègre même une fonctionnalité que je vais ajouter bientôt.
Comme je n'y connais rien au .NET, en cas de
soucis, contactez-le.
NOTE : La version de Iubito-Sokhar actuellement téléchargeable n'est pas "à jour" ! Le code n'est généré ne marche pas avec IE5. Je posterai la nouvelle version quand Christophe l'aura refaite.
Have Fun !
Vous pouvez utiliser librement ce menu, ça serait sympa de laisser mon nom dans le code, afin que les webmasters visitant votre site puissent bénéficier comme vous d'un menu sympa :)
Et puis à l'exemple de Christophe, si vous lui apportez un plus, ou alors si vous créez une feuille de style qui déchire tout, c'est sympa de me le dire :)
J'ai mis une liste de sites qui utilisent le menu sur la page http://iubito.free.fr/prog/menu.php.
Avant de poser une question, jetez un coup d'oeil à la F.A.Q., et si vous avez un problème d'affichage, comme je ne suis pas devin, ça serait sympa de donner une URL où je puisse déceler les erreurs dans le code. Merci !
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
