[Tuto] Créer des menus simples en CSS

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (56705 lectures)

L'un des premiers tutoriels d'Alsacréations concernait la création de menus de navigation en CSS. Il avait été supprimé depuis la publication du livre CSS2 et pour des raisons de droits de l'éditeur, puisque les deux contenus étaient trop semblables.

Aujourd'hui, grâce à Thomas Dedericks (Thomas D. ex-Sopo sur le forum), ce tutoriel a été complètement revu et remis au goût du jour.

La nouvelle mouture du tutoriel sur la création de menus en CSS est plus complète et va plus loin que l'ancienne version.

A présent, les différentes techniques de réalisation de menus verticaux et horizontaux (listes en ligne ou flottantes), mais aussi les menus graphiques avec changement d'image au survol, sont expliquées en détail.

Voici le plan du tutoriel :

  • Le code XHTML
  • Un menu vertical
  • Un menu horizontal (mode de rendu en-ligne, items flottants)
  • Un menu graphique avec rollover, sans Javascript (la méthode des portes coulissantes)
  • Le "tout image"

L'article ne traite que des menus "simples", à savoir les menus non déroulants, sans arborescence... un tutoriel sur les menus déroulants est d'ailleurs en chantier pour remplacer l'ancien devenu obsolète.

Merci à Thomas D. pour ce tutoriel qui devient la nouvelle référence de base à suivre sur Alsacréations pour la conception de menus.

Commentaires

Thanh a dit le

Merci Sopo :)
Merci Alsa!
Merci Steve Jobs!

Olivier a dit le

Thanh est un grand malade :)
...

c'est ça qu'est bon ^^

Un petit rappel sur le fait que chacun est invité à proposer son aide à la refonte des tutoriels Alsa ou à en créer de nouveaux !

Stéphane a dit le

Je me souviens que lorsque je débutais en CSS, le tuto de Raphaël m'avait été bien utile. Bravo Sopo, je suis certain que ton travail va servir à des centaines de webmasters.

Sopo a dit le

Merci Stéphane, j'espère que ce sera utile!

Thanh > j'ai oublié de préciser, mais si quelqu'un veut me remercier en m'offrant un iPhone, je me ferai un plaisir de lui communiquer mon adresse par mail :)

Hum a dit le

Je ne l'ai pas encore lu.

Mais merci d'avance, enfin, merci tout court.

Francescu a dit le

Simple, rapide, et vraiment pratique.

Merci beaucoup!

;-) a dit le

Ce que j'appelle un menu formidable
www.cssplay.co.uk/menus/p...

Le Caphar a dit le

Cool. J'envisageais depuis longtemps d'écrire un tuto de ce genre, mais c'est fait. Et bien fait.
Bon boulot !

Sylvie a dit le

Super! merci pour ce tuto, je suis justement entrain d'apprendre ce monde de l'arrière du web(css, bande passante etc..)

Bonne continuation