Magazine
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.
S'abonner à Connect
- Accédez à tous les contenus de Connect en illimité
- Découvrez chaque semaine un nouvel article premium
- Consultez les nouveaux articles en avant-première
Déjà abonné ? Connectez-vous
