Des pop-up 100% CSS

Magazine
Marque
Linux Pratique
Numéro
54
Mois de parution
juillet 2009


Résumé
Nous allons créer ici des pop-up entièrement à l'aide de CSS, ce qui signifie aucune trace de Javascript ici, ni de PHP. Ces pop-up vont venir s'intégrer dans le menu principal d'un site Web. Ils contiendront le descriptif de chaque item du menu (texte statique contenu dans le code de la page) et n'apparaîtront qu'au passage de la souris de l'utilisateur.


L'astuce : rendre les pop-up invisibles par défaut

Exemple testé avec le navigateur Firefox 3.0.

Notre menu est, comme dans bien des cas, une simple liste de liens. Nous obtenons donc le code qui suit :

<body>

 <div id="menu">

  <a href="#">Accueil</a>

  <a href="#">Services</a>

  ...

 </div>

 <div id="contenu"> ...</div>

</body>

Le texte des pop-up est contenu entre des balises <span> incluses dans ces liens. À titre d'exemple, voici le code correspondant à l'un des items du menu :

<a href="#">Services<span>Nous proposons divers services à nos clients. Cette page vous permettra de...

Cet article est réservé aux abonnés. Il vous reste 90% à découvrir.
à partir de 21,65€ HT/mois/lecteur pour un accès 5 lecteurs à toute la plateforme
J'en profite