28172 sujets

CSS et mise en forme, CSS3

Superfish et css

Bonjour,
Su mon site j'utilise le plugIn superfish pour mon menu afin de le rendre accessible au clavier. Malheureusement je n'arrive pas à le faire fonctionner correctement.

Je lue pas mal la doc sur le site dédier, ce que j'en comprend c'est que ce serait un problème de sélecteur css. Il faut donc que je trouve où dans mon css il y un problème, mais je n'y arrive pas.

Alors je sollicite votre aide afin de rendre mon menu accessible une bonne foi pour toute.

Mon site
La doc

Mon code css du menu:
#menu{
	height:1.25em;
	position:relative; /*pour placer le menu au-dessus*/
	z-index: 1000;
	cursor:pointer;
	font-weight: bold;
	font-variant: small-caps;
	clear: both;
	background: url(../interface/menu-background.png) repeat-x top; /*iE*/
	background-size: 100% 100%;
	background: -moz-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Firefox*/
	background-image: -o-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*opera 11*/
	background: -webkit-linear-gradient(top, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Chrome+Safari*/
	background: linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*future*/
	background-color: #d66f00;
	color: #000;
	min-width: 890px;
}
	
#menu ul{
	width: 870px;
	margin: 0 auto;
	line-height: 1.1;
}
	#IE8 #menu ul{width: 870px;}
	#IE6 #menu ul{ width: 880px;}
#menu ul li{
	position: relative;
	display: inline;
	line-height: 1.54;
	font-size: 0.8em;
	padding: 2px 15px 2px 10px;
	border-right: solid 1px rgba(255,255,255, 0.2);
	border-left: solid 1px rgba(82,70,58, 0.1);
	list-style: none;
	margin: 0;
}
#menu ul li img{
	margin-bottom: 2px;
	vertical-align: middle;
}
#menu ul > li{background: url(../interface/images/arrow-menu.gif) 95% 0% no-repeat;}
#menu ul li.accueil{background: url(../interface/images/arrow-menu.gif) 90% 0% no-repeat;}
#menu ul li.galerie,  #menu ul li.contact{
	margin-right: -6px;
	padding: 2px 10px;
}
#menu ul li a {
	display: inline-block;
	text-decoration: none;
	color: #000;
}

#menu ul ul{
	display:none;
	background-color: #d66f00;
	position: absolute;
	left: 0px;
	top: 20px;
	padding-bottom: 3px;
}
	#IE8 #menu ul ul{top: 19px;}
#menu ul ul li{
	min-width: 91px;
	line-height: 1.2;
	font-size: 0.9em;
	padding: 0;
	margin:0;
	border: none;
	text-align: left;
}
	#IE6 #menu ul ul li{
		line-height: 0;
		font-size: 0.8em;
		padding-top: 5px
	}
#menu ul.niveau2 li, #menu ul li.galerie,  #menu ul li.contact{ background: none;}
#menu ul ul li a{
	padding: 5px 8px;
	text-align: left;
	display: block;
}
#menu ul ul ul{
	top: -12px;
	margin-left: 0px;
}
	#IE7 #menu ul ul ul, #IE8 #menu ul ul ul{ top: 10px;}
	#IE9 #menu ul ul ul{ top: 12px;}
#menu ul ul ul li {font-size: 1em;}
	#IE6 #menu ul ul ul li{font-size: 1em;}

	/* accueil */
#menu ul ul#accueil{width:135px;}

	/* cameras */
#menu ul ul#cameras{width:205px;}
	#menu ul#accessoires{
		width:197px;
		left: 205px;
	}
	#IE6 #menu ul ul#cameras{width:185px;}
		#IE6 #menu ul#accessoires{
			width:177px;
			left: 185px;
		}

	/* produits */
#menu ul ul#produits{width:185px;}
	#IE9 #menu ul ul#produits{width:195px;}
	#IE6 #menu ul ul#produits{width:175px;}

	/* points de ventes */
#menu ul ul#distributeurs{width:144px;}
	#menu ul#detaillants{
		width: 100px;
		left: 144px;
	}
	#IE9 #menu ul#detaillants{top: 11px;}
		
	/* partenaires */
#menu ul ul#partner{width:114px;}

	/* support technique */
#menu ul ul#support{width:175px;}

#menu ul > li:hover, #menu ul > li:focus, #menu ul > li.sfHover{
	background-position:95% 100%;
	color: #FFF;
}
#menu ul li.accueil:hover, #menu ul li.accueil:focus, #menu ul li.accueil.sfHover{background-position:90% 100%;}

#menu ul.niveau2 li:hover, #menu ul.niveau2 li.sfHover,
#menu ul li.galerie:hover, #menu ul li.galerie.sfHover
#menu ul li.contact:hover, #menu ul li.contact.sfHover{ background: none;}

#menu ul li a:hover, #menu ul ul li a:hover,
#menu ul li a.sfHover, #menu ul ul li a.sfHover,
#menu ul li a:focus, #menu ul ul li a:focus{color: #FFF;}

#menu ul.niveau1 li:hover ul.niveau2, #menu ul.niveau1 li.sfHover ul.niveau2,
#menu ul.niveau2 li:hover ul.niveau3, #menu ul.niveau2 li.sfHover ul.niveau3,
#menu ul.niveau1 li a:focus ul.niveau2, #menu ul.niveau2 li a:focus ul.niveau3{
	display:block;
	z-index: 2000;
}

.arrow{background: url(../interface/images/arrowsNext02.gif) 97% 0% no-repeat;}
.arrow:hover{background-position: 97% 100%;}
Salut Julie,

Quel est le plus de ce plugin par rapport à de simples accesskeys sur les liens du menu ?
Modifié par jmlapam (16 Sep 2011 - 00:38)
jmlapam a écrit :
Salut Julie,

Quel est le plus de ce plugin par rapport à de simples accesskeys sur les liens du menu ?


Superfish sert à faire des menus déroulants utilisables au clavier.
Modifié par jb_gfx (16 Sep 2011 - 01:06)
Tout a été dit oui!
Les acceskeys, c'est peut-être bien pour les menu simple, mais pour un menu comme le mien à 3 niveau ce n'est pas se qui convient.

C'est bien beau tout ça... mais ça ne répond pas à ma question! Smiley langue
Désolé Julie mais parfois on se prend la tête pour rien, je voulais juste voir si l'accesskey suffirait mais apparemment pas. Smiley confus
Sujet clos
Aller à