21/12/09

Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover).

Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

  • `suckerfish(sfHover, « LI », « nav »);` pour appliquer `:hover` sur un élément `li` placé dans `#nav`.
  • `suckerfish(sfFocus, « INPUT »);` pour donner le `focus` aux éléments `input`.

Superfish — Menu déroulant avec des morceaux d’accessibilité (délais avant l’ouverture, navigation avec la touche tab). Vous pouvez voir ce menu déroulant en action sur css 4 design.



4 commentaires pour “Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6”

  1. Carine Pedeux dit :

    Bonjour,

    Je suis en train de tester différents menus accessibles. J’ai une question qui me turlupine : Superfish n’affiche pas les sous-menus lorsque le js est désactivé et pourtant vous l’avez choisi, pourquoi ?

    J’aime beaucoup ce menu, y a t’il une solution pour faire apparaitre les sous-menus sans le js ?

    Merci pour votre réponse,

    Cordialement

  2. Raphael Lardy dit :

    Bonjour,

    Je me posais la même question récemment,

    Toujours de belles trouvailles … bravo pour tous ces articles !

  3. Bruno Bichet dit :

    @Carine, @Raphael — Il se trouve que je l’ai justement choisi pour ça ;) Dans le doute, j’ai revérifier sur css4design : le menu déroulant se déroule bien et affiche les sous-menus y compris avec Javascript désactivé.

  4. Carine Pedeux dit :

    Oui ca marche très bien ! Je m’excuse pour ce commentaire écrit trop vite ! (J’avais lu 1 article où il était précisé que ce plugin n’était pas accessible sans js) …après vérification tout marche correctement !

    Merci !

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »

Subscribe without commenting