28220 sujets

CSS et mise en forme, CSS3

[résolu] Aidez-moi pour finir un menu déroulant ultime (IE bugs)

Bonjour,

Pour mon site, j'étais à la recherche du menu déroulant parfait qui réponde à ces conditions :

- étirable en largeur
- peu ou pas de javascript
- possibilité de donner un design attrayant en forme d'onglet ou autre
- pas de clignotement ou autre bug...

je suis arrivé à la conclusion qu'un bon choix serait de mélanger les onglets de Douglas Bowman avec le menu déroulant Suckerfish
http://www.htmldog.com/articles/suckerfish/example/

le résultat que j'ai obtenu est le suivant :

http://www.antonietti-vesco.ch/new/onglets.htm

Mais, car il y a un mais, sinon ce serait trop beau :

le site est une vrai catastrophe sous IE Smiley fache
Je n'arrive pas à convertir correctement mon code pour qu'il s'affiche de la même manière que sous Firefox.

Entre autres joyeusetés: les onglets se mettent les uns sous les autres, le sous-menu n'apparait pas en dessous de l'onglet, le curseur ne se met pas en forme de main pour indiquer le liens etc etc...

peut-être pourriez-vous m'y aider, afin d'obtenir un menu déroulant de référence ??


edit: le menu ne passe pas bien sous Opéra non plus...
Modifié par Noisequik (21 Mar 2007 - 10:30)
Bonjour,

Noisequik a écrit :
Pour mon site, j'étais à la recherche du menu déroulant parfait


Que de temps perdu avec ces menus déroulants improvisés en CSS/javascript !
Modifié par Laurent Denis (13 Dec 2005 - 10:08)
Laurent Denis a écrit :
Bonjour,



Que de temps perdu avec ces menus déroulants improvisés en CSS/javascript !


Oui je ne suis pas pour les menu déroulants personnellement, mais malheureusement ce n'est pas moi qui ai décidé, ce sont les clients/patron...
Bonjour,

Laurent Denis a écrit :
Bonjour,

Que de temps perdu avec ces menus déroulants improvisés en CSS/javascript !


J'avoue ne pas bien comprendre ta réponse...

1) est-ce que c'est le terme "improvisé" qu'il fallait retenir ? Sous-entendu, il y a longtemps que ce sujet a déjà été traité, il y a des solutions toutes faites qui sont éprouvées et valables dans tous les cas ? Dans ce cas, j'attends l'url, parce que moi, j'ai pas trouvé dans mes recherches de solution réellement acceptable à ce sujet, au point où j'en suis arrivé à la conclusion qu'il valait mieux développer son propre script (avec en particulier des tests de performances assez poussés pour faire en sorte que le menu soit suffisamment rapide pour des "vieux" PCs) car les différentes ressources que l'on trouve sur le sujet sont, soit des usines à gaz incompréhensibles et inexploitables (genre 40 Ko de javascript), soit des "essais" qui semblent bien fonctionner tant que l'on se limite à 1 ou 2 niveaux et qui s'effondrent complètement quand on essaie de les confronter à une situation "réelle" (plusieurs niveaux, largeurs non homogènes).

2) ou alors, tu voulais signifier qu'il ne FAUT PAS faire de menu déroulant en CSS+Javascript parce que au choix : ça marche pas, c'est trop compliqué, on arrive pas à avoir le même comportement sur tous les navigateurs, c'est pas accessible (je sens que tu vas te précipiter sur cette dernière proposition... Smiley cligne )
Mais on peut très bien imaginer proposer une version "accessible" en remplaçant par exemple les menus par des "select" successifs pour ceux qui naviguent au clavier...

Pour en revenir à l'exemple proposé :
- visuellement, c'est pas mal... (sous FF)
- sous IE, effectivement, c'est pas la joie... Mais je suis sûr que ça peut se résoudre (à mon avis, commencer par mettre un "display: inline" sur le premier niveau, celui des onglets)
- je serais curieux de voir ce que ça donne si on rajoute des sous-niveaux (parce que ma propre expérience me dit que ça va ramer...)
- enfin, il manque un "timeout" sur l'effacement des rubriques (tant qu'à utiliser javascript, autant en profiter...)

Note: j'ai pas encore décidé si je devais implémenter un menu de ce type sur mon site, je suis en phase de réflexion.
Bonjour,

Rapidement : voici une version débuguée de la page concernée, pour les navigateurs Windows (IE5.5et 6.0, Firefox, Opera). Débugage à poursuivre pour IE5.0 Win et pour les navigateurs Mac.

<!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 - 	alsa 2005-12-14</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin:0;
padding:0;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
background:#bfc0c0;
}
#header {
font-size: 93%;
padding: 10px 0 0 0;
text-align:center;
}
#header a {
text-decoration:none;
color:#fff;
display:block;
}
#header a:hover{
color: #F6C61A;
}
#header ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul#nav {
width: 64%;
margin: 0 auto;
}
li#home, li#societe, li#products, li#about, li#contact {
float: left;
width:19.9%;
position: relative;
}
a.menuprincipal{
background:url("left_bot.gif") no-repeat left top;
padding:0 0 0 9px;
}
#header a span {
background:url("right_bo.gif") no-repeat right top;
padding:8px 10px 4px 1px;
display:block;
}
li ul {
display: none;
position: absolute;
left: 0;
width: 100%;
text-align:left;
}
li.first {
padding-top: 1px;
}
li ul li a {
background: #6C9ED8;
display: block;
border-bottom: 1px solid #fff;
padding: 5px;
}
li:hover ul, li.over ul {
display: block;
}
#content {
clear: left;
border-top: 1px solid #000;
background: #fff;
padding: 1em;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
a.menuprincipal{
height: 1%;
cursor: hand;
}
#header a span {
zoom: 1;
}
li ul li {
zoom: 1;
display: inline;
}
li ul li a {
height: 1%;
}
</style>
<![endif]-->
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
  <div id="wrapper">
    <div id="header">
    	<ul id="nav">
    		<li id="home"><a class="menuprincipal" href="#"><span>Home</span></a></li>
    		<li id="societe"><a class="menuprincipal" href="#"><span>La Société</span></a>
      		<ul>
      			<li class="first"><a href="#">Ordinateurs de bureau</a></li>
      			<li><a href="#">Portables</a></li>
      			<li><a href="#">Réseau</a></li>
      			<li><a href="#">Sécurité</a></li>
      			<li><a href="#">Périphériques</a></li>
      		</ul>
      	</li>
      	<li id="products"><a class="menuprincipal" href="#"><span>Products</span></a>
    			<ul>
    				<li class="first"><a href="#">Ordinateurs de bureau</a></li>
    				<li><a href="#">Portables</a></li>
    				<li><a href="#">Réseau</a></li>
    				<li><a href="#">Sécurité</a></li>
    				<li><a href="#">Périphériques</a></li>
    			</ul>
    	</li>
    	<li id="about"><a class="menuprincipal" href="#"><span>About</span></a></li>
    	<li id="contact"><a class="menuprincipal" href="#"><span>Contact</span></a></li>
    </ul>
    </div>
    <div id="content">
    	<p style="margin-top: 0;">Eodem modo typi, qui nunc nobis videntur parum clari</p>
    </div>
  </div>
</body>
</html>


[/i]
Mpok a écrit :
1) est-ce que c'est le terme "improvisé" qu'il fallait retenir ? Sous-entendu, il y a longtemps que ce sujet a déjà été traité, il y a des solutions toutes faites qui sont éprouvées et valables dans tous les cas ?


Oh que non ! Smiley cligne

Mpok a écrit :
2) ou alors, tu voulais signifier qu'il ne FAUT PAS faire de menu déroulant en CSS+Javascript parce que au choix : ça marche pas, c'est trop compliqué, on arrive pas à avoir le même comportement sur tous les navigateurs, c'est pas accessible (je sens que tu vas te précipiter sur cette dernière proposition... Smiley cligne )


Je ne dis pas "il ne faut pas" (Bien que ce soit une position fréquement retenue pour l'accesibilité).

D'un côté, la "demande" pour ce type d'interface est très forte. Mais d'un autre côté :
- ils touchent aux limites des capacités du HTML4.01, ce qu'agravent les difficultés liées aux implémentations CSS/javascript
- leur accessibilité et leur ergonomie sont effectivement problématiques
- ils masquent souvent (pas toujours) un manque de réflexion sur l'interface et la structure de navigation du site (on met tout en bloc dans un menu dynamique).

Ces problèmes sont particulièrement critiques quand il s'agit de menus à plusieurs niveaux.

Alors : faire ou ne pas faire des menus dynamiques ? Pour ma part, c'est une solution à adopter autant que possible en dernier ressort, après avoir envisagé toutes les autres possibilités d'organisation de la navigation, et en se limitant au strict minimum (un seul niveau).
Modifié par Laurent Denis (14 Dec 2005 - 09:56)
Sujet clos
Aller à