28172 sujets

CSS et mise en forme, CSS3

Menu horizontal 3 niveaux

Olà !
J'ai besoin d'un coup d'oeil sur un menu horizontal à trois niveaux que j'essaie de construire (suis encore novice en css...).
J'ai d'abord créé un menu à 2 niveaux tout en css : pas de pb (sauf du positionnement, mais je vais persévérer).
Pb : j'essaie d'imbriquer un troisième niveau et là ça marche pu : j'ai un gros pb d'affichage.
Le mieux, c'est que je vous montre mon code : Smiley smile

(entete, c'est le menu de niveau supérieur dans lequel j'aimerais imbriquer menu et menu1)`

<html>
<head>
<title>menu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/CSS">

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	background-color: #CFCFCF;
	padding:0;
	margin:0;
}
#zonesite {
	width:800px;
	height:550px;
	margin-left:auto;
	margin-right:auto;
	padding-top:50px;
	background-color:#FFFFFF;
}


#entete {
	height:36px;	
	background-color:#C1004A;
	margin:0;
	padding-left:auto;
	padding-right:30px;
}
#entete ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:left;
}
#entete li {
	float:left;
	margin:auto;
	padding:0;
	background-color:#C1004A;
}
#entete li a {
	font-size:20px;
	display:block;
	color:white;
	text-decoration:none;
	padding:5px 15px 0px 15px;
	border-right-style: groove;
	border-right-width:thin;
}
#entete li a:hover {
	color:#000000;
}
#entete ul li ul {
	display:none;
}
#entete ul li:hover ul {
	display:block;
}
#entete li:hover ul li {
	float:none;
}


#menu {
	height:30px;	
	background-color:#C1004A;
		-moz-opacity:0.6;
		opacity: 0.6;
		filter:alpha(opacity=60);
}
#menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:left;
}
#menu li {
	float:left;
	margin:0;
	padding:0;
	background-color:#C1004A;
	-moz-opacity:0.6;
	opacity: 0.6;
	filter:alpha(opacity=60);
}
#menu li a {
	font-size:16px;
	display:block;
	/*width:100px;*/
	color:white;
	text-decoration:none;
	padding:5px;
	padding:5px 10px 0px 10px;
}
#menu li a:hover {
	color:#000000;
}
#menu ul li ul {
	display:none;
}
#menu ul li:hover ul {
	display:block;
}
#menu li:hover ul li {
	float:none;
}




#menu2 ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu2 li {
	float:left;
	margin:auto;
	padding:0px;
	background-color:#C1004A;
	-moz-opacity:0.5;
	opacity: 0.5;
	filter:alpha(opacity=50);
}
#menu2 li a {
	display:block;
	width:180px;
	color:white;
	text-decoration:none;
	padding:5px;
}
#menu2 li a:hover {
	color:#000000;
	text-decoration:underline;
	list-style-type:circle;
}
#menu2 ul li ul {
	display:none;
}
#menu2 ul li:hover ul {
	display:block;
}
#menu2 li:hover ul li {
	float:none;
}
</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<body>



<div id="zonesite">

    <div id="entete">
        <ul>
          <li><a href="#">theme1 lipsum</a></li>
          <li><a href="#">theme2 dolor</a></li>
          <li><a href="#">theme3 si</a></li>

          <li><a href="#">theme4 amet</a></li>
          <li><a href="#">theme5</a></li>
        </ul>
    </div>

    <div id="menu">
        <ul>
          <li><a href="#">item 1</a>

            <ul id="menu2">
              <li><a href="#">Sous-item 1 xxxxxxxx</a></li>
              <li><a href="#">Sous-item 2</a></li>
              <li><a href="#">Sous-item 3</a></li>
             </ul>
          </li>
          <li><a href="#">item 2 looooooooooooooooooooong</a>

            <ul id="menu2">
              <li><a href="#">Sous-item 1</a></li>
              <li><a href="#">Sous-item 2</a></li>
              <li><a href="#">Sous-item 3</a></li>
             </ul>
          </li>
          <li><a href="#">item 3</a>

            <ul id="menu2">
              <li><a href="#">Sous-item 1 xxxxxxxx</a></li>
              <li><a href="#">Sous-item 2</a></li>
              <li><a href="#">Sous-item 3</a></li>
             </ul>
          </li>
          <li><a href="#">item 4</a>

            <ul id="menu2">
              <li><a href="#">Sous-item 1 xxxxxxxx</a></li>
              <li><a href="#">Sous-item 2</a></li>
              <li><a href="#">Sous-item 3</a></li>
             </ul>
          </li>
          <li width="150px"><a href="#">item 5</a>

            <ul id="menu2">
              <li><a href="#">Sous-item 1 xxxxxxxx</a></li>
              <li><a href="#">Sous-item 2</a></li>
              <li><a href="#">Sous-item 3</a></li>
             </ul>
          </li>
        </ul>

    </div>



</div>

</body>
</html>



Voilà, j'espère que je suis claire, sinon, jpeux essayer de détailler Smiley smile
Merci d'avance pour votre aide !

PS: j'ai tenté de faire une recherche sur ce thème dans le site, mais j'ai un message d'erreur
Modifié par NaWa (14 Sep 2010 - 22:52)
Bonjour,

Faire un menu déroulant de 2 niveaux en full CSS est déjà un énorme risque d'accessibilité (dans ton cas, ce n'est plus un risque mais un problème, puisque tu utilises :hover sur li (non reconnu par IE6)).

Faire un menu déroulant sur 3 niveaux est également un gros risque d'accessibilité et d'ergonomie.

Mélanger les deux, c'est un peu comme préparer un cocktail Molotof... ça risque plus de d'exploser à la tête que de faire des dégâts en face si tu n'est pas expert (et même en l'étant, d'ailleurs).

Le déroulement d'un menu doit, de préférence, être réalisé avec JavaScript !
ah ok...
Niveau ergonomie, suis tout à fait d'accord, mais c'est le brief (je fais ça pour un pote).
Je vais me tourner vers le javascript alors... (jtavoue que je suis un peu déçue, en plus j'ai vraiment bidouillé pendant plusieurs heures avant de poster pour ne pas polluer le forum -> me sens nouille là Smiley langue )
Sujet clos
Aller à