Thursday, 4. June 2009, 06:53:07
J’ai récemment pu
télécharger un menu très sympathique, rappelant celui de Mac… Son utilisation est des plus simplistes, vu que le travail nous a été maché.
Malheureusement, lorsque nous regardons le code, ce n’est pas très propre (oui cela valide, mais on peut faire mieux !) :
<div class="dock-container" id="dock-contener">
<a class="dock-item" href="../index.php" tabindex="1" accesskey="1"><img src="../images/menu/accueil.png" alt="Accueil"><span>Accueil</span></a>
<a class="dock-item" href="../contact.php" tabindex="2" accesskey="2"><img src="../images/menu/contact.png" alt="Contact"><span>contactez-nous</span></a>
<a class="dock-item" href="../photographies" tabindex="3" accesskey="3"><img src="../images/menu/les-photos.png" alt="Photos"><span>Les photos</span></a>
<a class="dock-item" href="../ceremonie_civile.php" tabindex="4" accesskey="4"><img src="../images/menu/ceremonie-civile.png" alt="cécrémonie civile"><span>La cérémonie civile</span></a>
<a class="dock-item" href="../ceremonie_laique.php" tabindex="5" accesskey="5"><img src="../images/menu/ceremonie-laique.png" alt="cécrémonie laïque"><span>La cérémonie laïque</span></a>
<a class="dock-item" href="../nos_fiancailles.php" tabindex="6" accesskey="6"><img src="../images/menu/nos-fiancailles.png" alt="fiançailles"><span>Nos fiançailles</span></a>
<a class="dock-item" href="../le_mariage.php" tabindex="7" accesskey="7"><img src="../images/menu/mariage.png" alt="mariage"><span>Le mariage</span></a>
<a class="dock-item" href="../le_voyage_de_noce.php" tabindex="8" accesskey="8"><img src="../images/menu/voyage-de-noces.png" alt="voyage de noces"><span>Le voyage de noces</span></a>
</div>
Comme vous pouvez le constater, ici il s’agit d’une succession d’ancre située dans un conteneur… Ces ancres, ce conteneur et ces « span » sont mis en forme par du CSS que voici :
.dock { margin-left: 150px; float: left; width: 400px; position: relative; height: 50px; text-align: center; padding-left: 20px; }
.dock-container { top: 0px; height: 50px; }
a.dock-item { display: block; width: 40px; color: #A50021; position: absolute; top: 0px; text-align: center; text-decoration: none;
font: bold 12px Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif; }
li.dock-item a { color: #A50021; font: font: bold 12px Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif; }
.dock-item img { border: none; margin: 5px 10px 0px; width: 100%; }
.dock-item span { display: none; padding-left: 20px; }
Ce qui donne un bel effet de mise en page, grâce à la librairie Jquery ainsi qu’un petit complément appelé Interface.
Malheureusement lorsqu’on navigue sans le javascript activé, cela n’a pas l’effet escompté… Et la mise en page ne se charge pas comme nous le désirions, et rend donc la navigation impossible (en gros tout est superposé).
Il est vrai qu’il n’est pas recommandé de baser sa navigation principale sur le javascript ou un complément quelconque… Toutefois si nous regardons le code, ce n’est pas le cas principal ici : c’est du HTML mis en forme par du CSS sur lequel on passe une couche de javascript pour donner un effet. Ouf mais cela ne résoud pas notre problème !
Tentons d’abord quelques petites modification basique pour rendre ce code plus propres :
a)modifions le HTML comme suis :
<div class="dock" id="dock">
<ul class="dock-container" id="dock-contener">
<li class="dock-item"><a href="../index.php" tabindex="1" accesskey="1"><img src="../images/menu/accueil.png" alt="Accueil"><span>Accueil</span></a> </li>
<li class="dock-item"><a href="../contact.php" tabindex="2" accesskey="2"><img src="../images/menu/contact.png" alt="Contact"><span>contactez-nous</span></a> </li>
<li class="dock-item"><a href="../photographies" tabindex="3" accesskey="3"><img src="../images/menu/les-photos.png" alt="Photos"><span>Les photos</span></a></li>
<li class="dock-item"><a href="../ceremonie_civile.php" tabindex="4" accesskey="4"><img src="../images/menu/ceremonie-civile.png" alt="cécrémonie civile"><span>La cérémonie civile</span></a></li>
<li class="dock-item"><a href="../ceremonie_laique.php" tabindex="5" accesskey="5"><img src="../images/menu/ceremonie-laique.png" alt="cécrémonie laïque"><span>La cérémonie laïque</span></a> </li>
<li class="dock-item"><a href="../nos_fiancailles.php" tabindex="6" accesskey="6"><img src="../images/menu/nos-fiancailles.png" alt="fiançailles"><span>Nos fiançailles</span></a> </li>
<li class="dock-item"><a href="../le_mariage.php" tabindex="7" accesskey="7"><img src="../images/menu/mariage.png" alt="mariage"><span>Le mariage</span></a>
<li class="dock-item"><a href="../le_voyage_de_noce.php" tabindex="8" accesskey="8"><img src="../images/menu/voyage-de-noces.png" alt="voyage de noces"><span>Le voyage de noces</span></a></li>
</ul>
</div>
(en résumé j’ai ajouté un LI devant les A, et remplacé le DIV nommé DOCK-CONTENER par un appel de liste uniforme UL)
b)modifier le javascript
Mais si on recharge la page, cela ne fonctionne plus. Eh non, car dans les paramètres de Interface il faut modifier aussi du javascript. Comme suis :
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
//items: 'a',// test accessibilite
items: 'li',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
(en résumé : j’ai changé l’interaction sur les éléments de liste en place d’un élément d’ancre)
Et là tout refonctionne à merveille…
Mais lorsque nous naviguons sans javascript, cela ne va toujours pas !
Bon ne paniquons pas… Que se passe-t-il ? La mise en page est scabreuse. Remodifions donc la mise en page pour le cas où le visiteur n’a pas le javascript d’activé !
c)petit hack entre amis
Pour cela, déterminons un emplacement dans l’entête qui va appeler une feuille de style (CSS) en cas où le javascript n’est pas actif. En effet, ici ce n’est plus un problème d’accessibilité, mais de mise en page.
Nous savons aussi que le dernier élément appelé d’une CSS est celui dont la mise en page sera appliquée. Parfais. Maintenant que nous savons cela, nous avons la solution !
Modifions le HTML comme suis, et rajoutons :
<!-- HACK pour JQUERY INTERFACE si Javascript desactive -->
<noscript>
<link href="../css/noscript.css" rel="stylesheet" type="text/css">
</noscript>
<!-- FIN HACK pour JQUERY INTERFACE si javascript desactive -->
Ceci doit être placé en fin de la balise HEAD.
Créons maintenant une CSS appelée noscript.css qui sera appelée comme déterminé plus haut et remettons la mise en page correcte !
/*
CSS Hack pour JQUERY INTERFACE
Rôle : réadapte le menu si le javascript n'est pas actif
Auteur : X Brusselaers
Licence : GNU GPL v2
*/
.dock { margin-left: 150px; float: left; width: 400px; position: relative; height: 150px; padding-left: 20px; }/* augmenter la hauteur pour repousser les éléments du bas
réorganisation selon une liste classique */
.dock-container { height: 100%; }/* modification simple => 100% */
li.dock-item { display: block; width: 400px; color: #A50021; position: relative; text-align: left; /* remise en ordre des éléments du menu */
text-decoration: none;
font: bold 12px Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;}
.dock-item img { display: none; }/* je cache les images, car je ne veux plus naviguer avec */
.dock-item span { display: block; }/* display en block, pour annuler le display none */
Maintenant lorsqu’on navigue sans javascript, nous avons un menu qui s’affiche comme une liste.
[[ EDIT ]]
Et zut, cela ne valide pas ! Mais au moins c'est accessible... Je recherche encore une solution pour cette "unique" erreur...
WIDGETIZE