Menu Vertical compatible IE6 IE7 et FF 2.0.0.4

Salut,

Un peu de recherches t'aurais permis de trouver ceci.

++

Bonjour,

slax a écrit :
ma demande n'a pas étaient comprise.

C'est sans doute parce qu'elle était incomplète. Tu n'as pas annoncé que tu voulais faire un menu dynamique/déroulant/etc., tu t'es juste contenté de dire qu'il ne devait pas utiliser Javascript.

slax a écrit :
Je voudrais un menu comme sur geckzone.fr

Ce site n'existe pas. Je suppose que tu penses à geckozone.org ?

slax a écrit :
Un menu en CSS avec liste déroulante sans javascript en ul li

C'est techniquement possible, mais il s'agit d'une utilisation détournée des styles CSS, pas conçus pour gérer l'affichage ou le masquage d'un élément au survol d'un autre (ou de son parent).

De plus, ces menus déroulants « full CSS » utilisent la pseudo-classe :hover, qui n'est que partiellement supportée par IE6 (uniquement sur les éléments a). Sur geckozone.org, on peut voir le code suivant :

<style type="text/css">
	/** Behavior IE pour le menu horizontal */
	body {
		behavior:url("squelettes/styles/htc/csshover.htc");
	}
</style>

Il faut bien sûr disposer du fichier csshover.htc en question. Celui-ci contient du Javascript (ou plus exactement du JScript...), ce qui signifie que... le fonctionnement du menu déroulant sous IE dépendra de Javascript. De plus, sous Windows XP SP2, l'utilisation des .htc est plus stricte (règles de sécurité), et ça peut ne pas passer correctement.

Bref, c'est une solution très imparfaite. À ce compte, autant faire un menu déroulant reposant sur Javascript pour tous les navigateurs... ce qui permettra, tant qu'à faire, de tenter de faire une menu déroulant accessible à la navigation au clavier.

Ceci dit, le menu déroulant pleinement accessible c'est un mythe, ça n'existe tout simplement pas. Pour les raisons évoquées dans cet article, par exemple : L'accessibilité des menus de navigation en cascade.

À mon sens, le mieux qu'on ait à faire est de repenser l'organisation des contenus et la navigation du site, et de faire un menu simple avec une navigation cohérente. Ce qui demande quelques efforts, par contre.

Si on tient à faire un menu déroulant, oublier l'illusion du menu déroulant « full CSS », et se pencher sur les menus déroulants utilisant Javascript (et non obstrusifs!).
Modifié par Felipe (05 Jun 2007 - 01:42)

Hello à tous, niark niark

Un peu arnieu le slax !
Et, je viens juste de tombé sur son c.v. sur le web (http://kiween.free.fr/).
Intégrateur Web, Css 5 étoiles (voir bas de c.v.) ?!

Mais pour être un intégrateur de ce nom, les menus déroulant vertical, ça devraient être su !

Alors :

La Css (un peu complet, mais tu fera le tri) :

#menu { width: 950px; background: #084479 none repeat; float: left; height: 40px; padding-top: 12px; z-index: 2000;
font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; white-space: nowrap;
}

#menu ul { margin: 0pt; padding: 0pt; list-style-type: none; list-style-image: none; list-style-position: outside; float: left; width: auto; z-index: 2000;}

/*
#menu ul { margin: 0pt; padding: 0pt; list-style-type: none; list-style-image: none; list-style-position: outside; float: left; width: auto;}
*/

/*
#menu a, #menu h2 { border-style: solid; border-color: rgb(204, 204, 204) rgb(136, 136, 136) rgb(85, 85, 85) rgb(187, 187, 187); border-width: 1px; margin: 0pt; padding: 2px 3px; font-family: arial,helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 16px; font-size-adjust: none; font-stretch: normal; display: block; }
*/
#menu a, #menu h2 { margin: 0pt; padding: 2px 3px; display: block; z-index: 2000;
font-family: arial,helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 16px; font-size-adjust: none; font-stretch: normal;
}
#menu h2 { background: #084479 none repeat; color: #00ABE3; z-index: 2000; padding-left: 10px;}

#menu li.hr {border-bottom: 1px solid #5BD7FF; margin-left: 5px; width: 115px;}

#menu h2.actif {background-image: url(images/actif.gif); background-repeat: no-repeat; padding-left: 22px; color: #fff; z-index: 2000;}
#menu h2.actif a { background: #084479 none repeat; color: #fff; text-decoration: none; z-index: 2000;}
#menu h2.actif a:hover { background: #084479 none repeat; color: #fff; z-index: 2000;}

#menu h2.level1 a { background: #084479 none repeat; color: #00ABE3; text-decoration: none; z-index: 2000;}
#menu h2.level1 a:hover { background: #084479 none repeat; color: #fff; z-index: 2000;}

#menu a { background: #0A5192 none repeat; color: #00ABE3; text-decoration: none; z-index: 2000;}
#menu a:hover { background: #0A5192 none repeat; color: #fff; z-index: 2000;}

#menu .sub a {color: #00ABE3; text-decoration: none; background-image: url(images/menu_sub.gif); background-position: right; background-repeat: no-repeat;}
#menu .sub a:hover {color: #fff; text-decoration: none; background-image: url(images/menu_sub.gif); background-position: right; background-repeat: no-repeat;}

#menu .sub li a { background: #0A5192 none repeat; color: #00ABE3; text-decoration: none; z-index: 2000;}
#menu .sub li a:hover { background: #0A5192 none repeat; color: #fff; z-index: 2000;}

#menu li { position: relative; z-index: 2000;}
#menu ul ul { position: absolute; width: auto; background: #0A5192; z-index: 2000;}
#menu ul ul ul { position: absolute; top: 0pt; left: 100%; z-index: 2000;}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; z-index: 2000;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; z-index: 2000;}

#menu ul.actif {margin-left: 16px;}
#menu ul ul li { padding-left: 7px; padding-right: 7px;}

L'HTML :

<div id="menu">
// Menu Actif (par exemple)
<ul style="width: 100px;">
<li>
<h2 class="actif"><a href="#">MENU 1</a></h2>
</li>
</ul>
// Menu et Sous-Menu
<ul style="width: 100px;">
<li>
<h2>MENU 2</h2>
<ul>
<li>
<a href="#">SOUS-MENU ITEM-1</a>
</li>
<li>
<a href="#">SOUS-MENU ITEM-2</a>
</li>
</ul>
</li>
</ul>

webMastarZ

Merci pour ta réponse

La compatibilité de ton menu sur IE6 me semble invalide et ton menu ne fonctionnera pas pour la simple et unique raison que les menus verticaux valid XHTML Strict sans javascript sous IE6 c'est impossible à faire sans le HTC .

Enfin, je n'ai pas testé ton code mais il me semble qu'il manque quelques balises ou même beaucoup.

Un master en Nouvelles technologies de développement chez supinfo, çà te tente ?!

Cordialement, Ludovic JOLY
Intégrateur web XHTML/css2