Bonjour,
Partie d'une liste imbriqué (dl,dt,dd) , fonctionnant uniquement avec un javascript et du display:none , ...
je propose a un ami une version "revisité" de son menu qui me semble plutot accessible .
Ceci dit , je ne suis pas un expert et la demande initiale concerne un bug connu de ce type de menu et un aspect concernant le référencement .
La raison me fait opter pour une architecture html différente et un support css pour l'effet a conserver , avec un leger support js pour IE6 et inf ... au cas ou . Je ne m'inquiete donc que du coté "utilisable ou pas " .
Puis , je me dis que cette architecture et le display:none en moins ne peuvent pas avoir un impact négatif sur le référencement. (vous pouvez tourné la phrase autrement hein !).
voici une page avec le menu revisité :
(menu et mise en forme simplifié , fonctionnement identique a l'original).
Ce menu est accessible au clavier , et mérite peut-être , un 'parentNode' pour un affichage plus agréable a la tabulation , je ne juge pas la surcharge js necessaire .( ... Aucun framework JS n'est ou ne sera integré a ce site qui ne contient que textes et images d'illustrations et icônes pour rythmé la mise en page).
"Cette construction de menu n'est pas remarquable , ce n'est qu'une amelioration a un menu qui ne peut fonctionné sans javascript".
"La consultation a partir d'un telephone portable (par exemple ) n'as pas eté envisagez pour ce menu . Cet aspect ne concerne pas que le menu , mais toutes critiques sont bonnes."
Alors , menu a garder ? ou a ne mettre en place que temporairement le temps d'opter pour un autre type de navigation ?
Pourquoi un menu déroulant ?
- Le menu revisité contient une trentaine de lien reparti dans 8 rubriques.
Ouvert dans le flux , il occuperait environ 700 pixels de hauteur ... peu confortable visuellement avec 40 lignes d'infos a trier contre 8 deja trier.
- repartir les liens dans 8 pages , eloigne d'un click et d'un chargement suplementaire de page le contenu a atteindre .
Mes argument ou raisonnement sont-ils pertinent ou suis je passé a coté de quelque chose ?
G.C.
Modifié par gc-nomade (14 Jul 2009 - 21:45)
Partie d'une liste imbriqué (dl,dt,dd) , fonctionnant uniquement avec un javascript et du display:none , ...
je propose a un ami une version "revisité" de son menu qui me semble plutot accessible .
Ceci dit , je ne suis pas un expert et la demande initiale concerne un bug connu de ce type de menu et un aspect concernant le référencement .
La raison me fait opter pour une architecture html différente et un support css pour l'effet a conserver , avec un leger support js pour IE6 et inf ... au cas ou . Je ne m'inquiete donc que du coté "utilisable ou pas " .
Puis , je me dis que cette architecture et le display:none en moins ne peuvent pas avoir un impact négatif sur le référencement. (vous pouvez tourné la phrase autrement hein !).
voici une page avec le menu revisité :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Déroulant vertical, CSS et accessibilité</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="menu vertical a un niveau deroulant , test sur la tabulation et le survol a la souris . Base 100% html et CSS (cascaded style sheet) Pas de javascript impliqué , exepté pour une compatibilté IE (Internet Explorer) versions 6 et inferieur" />
<meta name="keywords" content="Menu deroulant en CSS,
compatible html et xhtml ,CSS 2.1 , survol a la souris (mouseover), accesible par tabulation , compatibilité IE6 et inferieur " />
<meta name="Identifier-url" content="http://gcyrillus.free.fr" />
<meta name="Copyright" content="©Copyright : http://gcyrillus.free.fr" />
<meta name="Location" content="Normandie , Ile de France " />
<style type="text/css" media="screen">
/* reset , RAZ */
#navsite ul {margin:0;padding:0px ;list-style-type:none;width:200px;}
#navsite li {margin:0;padding:0px 3px;list-style-type:none;width:194px;}
/*dimension du conteneur du menu et stylage simple */
#navsite {width:200px;border:1px solid;background:#ccc;padding-bottom:0.5em;}
/* Premier titre precedent la navigation */
#navsite h2 strong {text-align:center;background:#aaa;display:block;margin:0;width:200px;}
#navsite h2 {text-indent:1em;margin:0 0 10px 0;padding:0;overflow:hidden;}
/* prise de reference pour les liste imbriquée */
#navsite div {position:relative;}
/* positionement hors ecran de la liste au repos */
#navsite div ul {position:absolute;right:2000px;width:200px;top:0;}
/* affichage de la liste , soliciter par le passage de la souris */
#navsite div div:hover ul ,
#navsite div div.over ul /* class ie 6 */
{right:-200px;border:1px solid;background:#eee;z-index:2}
/* affichage du lien qui reçoit le focus par le biais d'une tabulation clavier */
#navsite li a:focus , #navsite li a:active {background:#eee;left:2200px;position:relative;z-index:3}
/* positionement du lien au survol de la souis , prevalant sur le focus */
#navsite ul li a:hover , #navsite div:hover ul li a , #navsite div div:hover h2 ,
#navsite div.over ul li a , #navsite div div.over ul li a , #navsite div.over h2 /* class ie 6 */
{position:static!important;background:#eee;}
</style>
<!--[ if lte IE 6]>
<style type="text/css">
#navsite div ul {position:static;right:0px;width:200px;top:0;}
</style>
<script type="text/javascript" >
document.write('<'+'style type="text'+'/'+'css"'+'>'+'#navsite div ul {position:absolute;right:2000px;width:200px;top:0;}<'+'/style'+'>');
menuvert = function() {
if (document && document.getElementById)
{
lemenu = document.getElementById("ie6");
for (i=0; i<lemenu.childNodes.length; i++)
{
node = lemenu.childNodes[ i];
if (node.nodeName=="DIV")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=menuvert;
</script>
<![ endif]-->
</head>
<h1>Menu vertical deroulant simple</h1>
<p>Les liens s'affiche au survol des titres ou au focus induit par la tabulation.</p>
<p>Un supplement de javascript pour IE6 et inferieur , permet de rendre ce script compatible garace a l'ajout ou le retrait d'une classe a la "volée" </p>
<div id="navsite">
<h2><strong>GUIDE</strong></h2>
<div id="ie6">
<div tabindex="0"><h2>abattages</h2>
<ul>
<li><a href="#a">Qu'est-ce ?</a></li>
<li><a href="#b">Définition</a></li>
<li><a href="#c">question</a></li>
<li><a href="#d">manipulation </a></li>
<li><a href="#e">attitude</a></li>
<li><a href="#f">Pourquoi se former ?</a></li>
</ul>
</div>
<div tabindex="0"><h2>Greffes</h2>
<ul>
<li><a href="#g" >techniques</a></li>
<li><a href="#h" >Pour tous</a></li>
<li><a href="#i" >Indications</a></li>
<li><a href="#j" >Pourquoi ?</a></li>
<li><a href="#k" >Auto-greffe</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>(menu et mise en forme simplifié , fonctionnement identique a l'original).
Ce menu est accessible au clavier , et mérite peut-être , un 'parentNode' pour un affichage plus agréable a la tabulation , je ne juge pas la surcharge js necessaire .( ... Aucun framework JS n'est ou ne sera integré a ce site qui ne contient que textes et images d'illustrations et icônes pour rythmé la mise en page).
"Cette construction de menu n'est pas remarquable , ce n'est qu'une amelioration a un menu qui ne peut fonctionné sans javascript".
"La consultation a partir d'un telephone portable (par exemple ) n'as pas eté envisagez pour ce menu . Cet aspect ne concerne pas que le menu , mais toutes critiques sont bonnes."
Alors , menu a garder ? ou a ne mettre en place que temporairement le temps d'opter pour un autre type de navigation ?
Pourquoi un menu déroulant ?
- Le menu revisité contient une trentaine de lien reparti dans 8 rubriques.
Ouvert dans le flux , il occuperait environ 700 pixels de hauteur ... peu confortable visuellement avec 40 lignes d'infos a trier contre 8 deja trier.
- repartir les liens dans 8 pages , eloigne d'un click et d'un chargement suplementaire de page le contenu a atteindre .
Mes argument ou raisonnement sont-ils pertinent ou suis je passé a coté de quelque chose ?
G.C.
Modifié par gc-nomade (14 Jul 2009 - 21:45)
, vivement que IE6 ne soit plus 