[Tuto] Créer des menus simples en CSS

Actualitéalsacréations

Publié par le , mis à jour le (58244 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 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 !

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.

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 :)

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

Commentaires clos