Langage CSSMenu CSS
Réaliser un menu en CSS
Menu CSS avec effet 3D
Voici le code HTML de l'exemple ci-dessus (à copier dans le body):
<div id="elButton">
<div><a href="http://www.easy-micro.org">Accueil</a></div>
<div><a href="http://www.easy-micro.org">Logiciel</a></div>
<div><a href="http://www.easy-micro.org">Langage</a></div>
<div><a href="http://www.easy-micro.org">Graphisme</a></div>
<div><a href="http://www.easy-micro.org">Technique</a></div>
</div>
<div><a href="http://www.easy-micro.org">Accueil</a></div>
<div><a href="http://www.easy-micro.org">Logiciel</a></div>
<div><a href="http://www.easy-micro.org">Langage</a></div>
<div><a href="http://www.easy-micro.org">Graphisme</a></div>
<div><a href="http://www.easy-micro.org">Technique</a></div>
</div>
|
Et le code CSS (à copier dans le head): <style type="text/css"> #elButton a { color: #000000; font-size:10px; font-family:verdana, sans-serif; font-weight:bold; text-decoration: none; border:4px outset aqua; background-color:#00ffff; display: block; width: 100px; padding: 3px 5px; margin: 1px; } div { display: block; } #elButton a:hover { background-color: #00c0c0; color:#000000; padding-left:4px; border:4px inset aqua;} </style> |
Un format indépendant css (elbutton) a été défini (avec la notation "#") auquel on associe un pseudo-éléments (la balise a). Des pseudo-éléments sont des éléments dans un fichier HTML qui ne se laissent pas décrire par un repère HTML clair et précis comme par exemple un "lien qui n'a pas encore été visité" ou bien la première lettre d'un paragraphe. Le style de la balise a est décrite ci-dessus dans sont état "normal" (vert clair) puis lorsque qu'elle est survolée (vert foncé). Pour un menu horizontal, il faut remplacer les deux lignes "display: block;" par "display: inline;". Voir les exemples d'application de CSS sur Css Zen Garden (Anglais), CSS Play (Anglais) et Self Html (Français). Voir aussi le validateur officiel en ligne de CSS: Jigsaw W3. |
