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.
1. 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...
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première