| Index de l'article |
|---|
| Créer un menu CSS vertical avancé de style web 2.0 |
| Le code CSS |
| Toutes les pages |
Page 1 de 2
Voilà encore un tutoriel à la mode web 2.0! Effectivement, le web 2.0 est à la mode. Partout sur le web on le voit partout et ceux qui ne sont pas prêt à suivre cette tendance devrons se résigner à croupir au bas fond de l'Internet car malheureusement, les lecteurs favorisent en premier lieu, l'affichage au détriment du contenu. C'est pourquoi PcKULT.NET offre régulièrement des tutoriels axés sur le web 2.0. Voici donc les étapes à réaliser afin de recréer ce superbe menu vertical.
Le code HTML :
Ce menu est comme la majorité des menus vertical en CSS, basé sur une liste <ul>.<ul class="nav">
<li><a href="http://www.pckult.net/">Retour à l'accueil</a></li>
</ul>
<h1>Menu CSS vertical avancé</h1>
<ul id="menu">
<li><a href="#">Accueil<span>Description</span></a></li>
<li><a href="#">Astuces<span>Description</span></a></li>
<li><a href="#">Articles<span>Description</span></a></li>
<li><a href="#">Tutoriaux<span>Description</span></a></li>
<li><a href="#">Ressources<span>Description</span></a></li>
</ul>
<li><a href="http://www.pckult.net/">Retour à l'accueil</a></li>
</ul>
<h1>Menu CSS vertical avancé</h1>
<ul id="menu">
<li><a href="#">Accueil<span>Description</span></a></li>
<li><a href="#">Astuces<span>Description</span></a></li>
<li><a href="#">Articles<span>Description</span></a></li>
<li><a href="#">Tutoriaux<span>Description</span></a></li>
<li><a href="#">Ressources<span>Description</span></a></li>
</ul>
Si l'on examine un peu le code ci-haut, on remarque que chaque élément du menu est composé d'un <li>, d'un <span> qui sert pour la mise en forme de la description ainsi que d'un <a> afin de créer le lien sur l'ensemble du bouton.
