Journal Menus déroulant HTML full CSS sur tous les navigateurs

Posté par .
Tags : aucun
0
6
fév.
2005
Je suis tombé sur cet article de Pompage Magazine :
http://www.pompage.net/pompe/deroulants/(...)

qui explique comment faire de beaux menus déroulant en HTML + CSS, avec un poil de javascript pour implémenter le hover sous MSIE (par défaut, :hover ne marche qu'avec les liens sous IE)

en gros il y a cette bidouille javascript pour "patcher" IE, et une astuce pour contourner un problème sous Opera

résultat, dans le HTML, le menu est une imbrication de listes simples (balises ul et li), ce qui est la manière la plus claire de le représenter.

l'exemple final : http://www.htmldog.com/articles/suckerfish/dropdowns/example/(...)

l'article est ancien (presque un an) mais ça peut peut-être en intéresser quelques uns ici
  • # tiens un voilà un bien aussi

    Posté par . Évalué à 1.

    tiens, celui est tres sympas (du même ordre), je l'utilise depuis plusieurs mois.
    http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html(...)
    (page generale : http://dosimple.ch/articles/Menus-dynamiques/(...))

    tres clean, marche avec tous broteur,
    avec un petit temps de latence (reglable en plus) qui fait qu'il reste quelques milisecondes quand la souris quitte un sous menu... a essayer.
    • [^] # Re: tiens un voilà un bien aussi

      Posté par . Évalué à 3.

      ha, et j'ai oublié de dire : les explications sont claires, en francais, l'exemple est joli à l'oeuil et c'est LGPL....

      alors.. mangez-en !
    • [^] # Re: tiens un voilà un bien aussi

      Posté par . Évalué à 5.

      celui est tres sympas (du même ordre)
      Cet exemple-là du javascript et non des CSS.

      tres clean, marche avec tous broteur
      Il ne marche pas bien sous konqueror (les sous-menu s'ouvrent un cran trop bas).
      • [^] # Re: tiens un voilà un bien aussi

        Posté par . Évalué à 3.

        >celui est tres sympas (du même ordre)
        >Cet exemple-là du javascript et non des CSS.

        les deux ont du JS, et utilisent du CSS, mais celui que je donne à plus de JS tout simplement pour les feature tel que "retarder la fermeture des menu".. navigation au clavier (que je n'utilise pas et qui se netoye assez facilement, il suffit de ejter un ptit coups d'oeuil au source).
        Et par rapport a konqueror, j'avais pas testé c'est vrai. ca doit se corriger facilement dans le fichier CSS a mon avis...

        structurellement, le systeme que je vous liste, fonctionne sur la même idée, et c'est pas le javascript qui fait ouvrir les sous menu... c'est bien du CSS (perso, je l'ai un peu nettoyé a ce propos d'ailleur)

        Je voulais juste partager un source interressant.
        • [^] # Re: tiens un voilà un bien aussi

          Posté par . Évalué à 3.

          merci pour ton lien :)
        • [^] # Re: tiens un voilà un bien aussi

          Posté par . Évalué à 3.

          les deux ont du JS, et utilisent du CSS, mais celui que je donne à plus de JS tout simplement pour les feature tel que "retarder la fermeture des menu".. navigation au clavier (que je n'utilise pas et qui se netoye assez facilement, il suffit de ejter un ptit coups d'oeuil au source).
          Si on désactive le javscript, le menu est affiché comme des listes imbriquées classiques, vierges de décorations.
  • # Pure CSS menu

    Posté par . Évalué à 2.

    En voici un autre qui est 100% CSS
    http://dean.edwards.name/IE7/compatibility/Pure%20CSS%20Menus.html(...)
    fonctionne avec mozilla et konqueror (bien qu'il y aie un léger décalage dans le menu haut/gauche avec ce fernier), le menu de droite est vraiment superbe.
    Pour le faire fonctionner avec ie, voyez http://dean.edwards.name/IE7/(...)
    • [^] # Re: Pure CSS menu

      Posté par . Évalué à 1.

      oui enfin.. bon,.. le coups du "IE7"...
      soyont clair, c'est un travail enorme, chapeaux, bravo...
      mais je prefere utiliser un brouteur directement compatible... parceque bon... c'est plein de gros hack, de js... (le zip fait 380Ko quand même)

      Donc, oui le menu de edward dean, est 100% CSS mais n'est pas "tout brouteur" (et je ne parle pas d'un brouteur utilisé par 0.3% de la populace hein...)
      Ou alors il n'est pus du tout 100% CSS : c'est l'un soit l'autre.
      • [^] # Re: Pure CSS menu

        Posté par . Évalué à 2.

        mais je prefere utiliser un brouteur directement compatible... parceque bon... c'est plein de gros hack, de js... (le zip fait 380Ko quand même)

        Dans ce cas, la question n'est pas veux-tu utiliser un brouteur compatible, mais plutôt veux-tu exiger de tous les visiteurs de ton site d'utiliser un brouteur compatible.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.