Le nouveau look du site Apple, comment réaliser le menu en CSS...

[Guest_Sir Morgan_*]

Ainsi que vient de le souligner une des dernières news, le site apple.fr vient d'emboîter le pas du site US.

J'ai pensé que cela pourrait être utile de disposer du menu du site pour, le cas échéant, s'en inspirer.

Je l'ai donc reconstitué pour l'occasion >
Encyclopedia des Corsaires

Enjoy.

[Guest_Sir Morgan_*]

Salut, gilloo35,

Retour de plage... je réponds un peu tardivement, donc.

Il existe plusieurs techniques pour faire des menus (visuellement) dynamiques.

Le rollover est l'une des plus courantes. Généralement, on utilise deux images qui représentent les deux états (normal et survol). Mais que l'on fasse appel au javascript ou au CSS, cette technique présente quelques inconvénients. Entre autres, elle nécessite de déclarer via javascript le préchargement des images pour éviter le temps de latence au survol du lien (même en cas de CSS).

Par ailleurs on sait que javascript, malgré son grand intérêt, nécessite d'être activé et est aussi considéré comme "intrusif". Même si le pb de sa désactivation tend à disparaître peu à peu, il faut quand même le prendre en compte.

Mais cela ne rend pas pour autant le CSS exempt de reproche, en particulier celui des compatibilités selon les navigateurs.

Bref, ce n'est pas moi qui prêcherai une technique contre l'autre, sachant d'autant plus qu'elles sont souvent merveilleusement complémentaires. Je pense donc que ces choix se font selon qu'on se sent plus à l'aise avec l'un que l'autre.

Pour la construction de menus en CSS, une technique est apparue voici quelque temps déjà, désignée selon l'expression imagée "sliding doors"... "portes coulissantes" in french. Sans entrer dans les détails ici, disons qu'il s'agit d'une technique qui combine plusieurs propriétés de CSS : capacité à superposer plusieurs images d'arrière-plan et celle qui consiste à "détourner" les balises de listes non-ordonnées.

Je te laisse le soin de rechercher la littérature à ce sujet.

Dans le cas du menu Apple, il ne s'agit encore d'une autre technique qui, s'inspirant du principe des portes coulissantes, s'approche davantage du rollover. Mais elle est différente du rollover évoqué plus haut car on fait appel, dans ce cas, à une seule et même image, représentant tous les états des boutons. Grâce à la propriété background-position on fait monter ou descendre l'image selon l'action de la souris.

Mais j'ai un tuto en prépa sur tout ça, avec pincée de php à ma façon. On en reparlera.