28172 sujets

CSS et mise en forme, CSS3

PROBLEME menu horizontal déroulant en CSS sans Javascript

Bonjour à tous,
je suis entrain de bosser sur un menu en css.
j'ai 2 rubriques avec des sous menus :

voila pour l'HTML :

<ul id="menuDeroulant">
<li>
  <a href="#">HOME</a></li>
<li>|</li>
<li>
  <a href="#">ABOUT US</a></li>
<li>|</li>
<li>
  <a href="#">PROFESSIONNAL</a>
  <ul class="sousMenu">
   <li><a href="#">long longsous menu 01</a></li>
   <li><a href="#">long sous menu 02</a></li>
   <li><a href="#">sous menu 03</a></li>
  </ul>
</li>
<li>|</li>
<li>
<a href="#">PRIVATE</a>
  <ul class="sousMenu">
   <li><a href="#">sous menu 01</a></li>
   <li><a href="#">sous menu 02</a></li>
   <li><a href="#">sous menu 03</a></li>
  </ul>
</li>
<li>|</li>
<li>
  <a href="#">ACTU</a></li>
<li>|</li>
<li>
  <a href="#">PHOTO</a></li>
<li>|</li>
<li>
  <a href="#">CONTACT</a></li>
</ul>



Le CSS:


body {
 font: 13px verdana, sans-serif;
 margin: 0;
 padding: 0;
}

#menuDeroulant
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	top: 0;
	left: 0;
}
#menuDeroulant li
{
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	padding-left: 4px;
	padding-right: 4px;
}

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;


}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;

}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	margin: 0;
	border: 0;
	text-decoration: none;

}

#menuDeroulant li:hover > .sousMenu { display: block; }




Mon problème est le suivant : J'aimerai éviter le décalage que provoque le survol des 2 rubriques ayant les sous-menus.

merci d'avance pour votre aide. Smiley cligne
salut,

essai celà, ça devrait aller mieux.


body {
 font: 13px verdana, sans-serif;
 margin: 0;
 padding: 0;
}

#menuDeroulant, #menuderoulant ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#menuDeroulant a
{
	display: block;
	text-decoration: none;
}

#menuDeroulant li { float: left;
		    padding: 0;
		  }

#menuDeroulant li ul { position: absolute;
		       left: -999em; /* pour cacher le sous menu */
		       height: auto;
		       margin: 0;
		       list-style-type: none;
		       padding: 0;
		     }

#menuDeroulant li li { float: none; }

#menuDeroulant li:hover ul { left: auto;} /* pour le faire réapparaitre */


attention ce type de menu n'est pas compatible ie6, il faut rajouter du javascript.

++
Modifié par flattazor (25 Mar 2009 - 20:23)
Bonjour perinus,

Juste une question en passant : pourquoi sans Javascript ?
C'est justement son rôle de gérer ce type de comportement, a priori, ce n'est pas celui de css... Smiley hmm
Tu risques, comme te l'a préciser flattazor, de rencontrer de problème de compatibilité pour certains navigateurs, d'accessibilité,...
C'est dommage non ?

Cdt,
Sylvain
6l20 a écrit :
Bonjour perinus,

Juste une question en passant : pourquoi sans Javascript ?
C'est justement son rôle de gérer ce type de comportement, a priori, ce n'est pas celui de css... Smiley hmm
Tu risques, comme te l'a préciser flattazor, de rencontrer de problème de compatibilité pour certains navigateurs, d'accessibilité,...
C'est dommage non ?

Cdt,
Sylvain


flattazor, Sylvain,
merci pour votre aide et commentaires. Je pensais utiliser un menu sans javascript pour une question d'accessibilité justement. Mais alors je dois me tromper Smiley murf

vers quel type de menu dois je me tourner?
avez vous une idée?
je vais essayer de trouver autre chose et je reviendrai surement vers vous.

merci encore
Patidou a écrit :
Regarde le plugin superfish pour jquery Smiley cligne

+1

Javascript et accessibilité ne sont pas forcément incompatibles
A lire ainsi que les liens associés Smiley cligne
En ce qui concerne la compatibilité, pas de contre-indication non plus Smiley cligne
Olivier a écrit :
Conclusion
Vous aurez bien compris que prendre en compte ce genre de points est d'une extrème importance, vous êtes totalement indépendant de la plateforme logicielle et matérielle de l'utilisateur, ainsi que du support du JavaScript chez le client, en effet vous avez créés des scripts qui offrent une surcouche à votre contenu, aucun élément parasite ne se trouve dans le code et tout le contenu est utilisable normalement sans JavaScript.
Si vous n'avez qu'une chose à retenir à propos du JavaScript, c'est qu'il est tout à fait correct s'il est bien utilisé (et aussi bien codé dans la mesure du possible).


Cdt,
Sylvain
Sujet clos
Aller à