30 techniques CSS pour constuire un système de navigation plus fluide…

C’est triste à dire mais je me souviens d’un entretien d’embauche assez tendu durant lequel j’avais été amené à m’exprimer sur les CSS. Je vantais complètement leur mérite alors même que le type en face de moi ne jurait que par le JavaScript et semblait bien décidé à descendre en flèche nos pauvres feuilles de style. Dommage parce que si j’étais tombé sur ces 30 techniques à l’époque, quelque chose me dit que le débat aurait été plus… euh… intéressant.

Stu Nicholls : un menu très visuel

3point7designs : un menu tout en blur

Mais c’est ainsi, le fait est que de nombreux développeurs n’hésitent pas à dénigrer les CSS au profit de l’AJAX et de tous ces trucs super branchés qui sont bien à la mode. Notez au passage que je n’ai rien contre le JavaScript, hein, il m’arrive même de l’utiliser lorsque je ne peux pas faire autrement ou lorsqu’un projet l’exige (ou en dernier recours). Je suis peut-être idiot (je sens que je vais me faire aligner sévèrement sur ce coup), mais je persiste à penser qu’un site ou un service doit être le plus fluide et le plus léger possible, dans la mesure où tout le monde ne dispose pas nécessairement d’une bête de course pour surfer sur le web.

Janko : un menu inspiré de Vimeo

Bref, je suis complètement en train de divaguer, comme à mon habitude. Cette introduction pesante ne vise qu’à vous présenter la dernière sélection de Six Revisions. Cette dernière ne recense pas moins de 30 techniques CSS pour construire des systèmes de navigation originaux et élaborés. Evidemment, dans le lot, vous avez un peu de tout et certaines techniques m’ont moins convaincu que d’autres, mais il s’y cache tout-de-même quelques perles qui ne manqueront sans doute pas de vous inspirer.

En ce qui me concerne, je dois avouer que j’ai particulièrement apprécié le menu de Stu Nicholls, celui de 3point7designs (sympathique effet de blur) ou encore celui de Janko (fortement inspiré de Vimeo).

Via Six Revisions

15 réflexions au sujet de “30 techniques CSS pour constuire un système de navigation plus fluide…”

  1. “Je suis peut-être idiot” :mrgreen: :lol:

    Le menu “menu” est bien sympa quand on en trouve l’utilité au bon moment!

    Blur menu : il fallait y penser!

    Advanced CSS Menu : c’est mignon! :roll:

    CSS-Only Accordion Effect : ca marche mieux verticalement!

    Voilà!

    Répondre
  2. Ton avis sur la fluidité n’a rien d’idiot. Je continue à penser de même : l’ajax c’est bien beau, mais je trouve plus sympa de réaliser en CSS ce qui peut l’être. Et aujourd’hui, on peut faire beaucoup de choses avec (pour peu que les navigateurs suivent).

    Je suis tombé accro en lisant des bouquins de Eric Meyer ou Jeffrey Zeldman et les sites comme zengarden (le bouquin aussi) me confortent dans ce choix.

    Une seule règle à retenir :

    CSS > * :wink:

    Répondre
  3. @Luc: Merde, je suis déçu, je pensais que c’est Morgan qui allait relever en premier. Mais en fait, tu es nettement plus rapide que lui… Félicitations :mrgreen:

    @nekomata: Non mais le truc, c’est qu’aujourd’hui on ne te demande plus de faire un site, on te demande de faire un site en ajax. Alors bon, des fois, c’est bien pratique, c’est vrai, quand tu veux un diaporama fluide ou des trucs du genre, un peu de JavaScript ne fait de mal à personne. Mais quand tu veux juste vendre tes légumes en ligne, faut quand même pas pousser.

    Perso, ce que j’aime, avec les CSS, c’est l’ensemble de leur structure. Je les trouve pratiques, bien pensées, rigoureuses et on peut quand même faire de chouettes trucs avec.

    Répondre
  4. Et bah non Morgan n’allait pas faire de remarques désobligeantes parce qu’il partage à 100% cette bêtise/avis, si c’en est une…
    Quelle mauvaise langue ce Fred…

    Répondre
  5. Heeuu… ok… cependant ce genre de caractéristiques c’est pas ta meilleure carte de visite! :twisted: Enfin, tant que ça me concerne pas, ça me fera bien marrer ^^

    Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.