Easy-Micro

LANGAGE Langage CSS
Menu CSS

Réaliser un menu en CSS

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>

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.

Astuce : Pour forcer la liste à se décaler à gauche, vous devez changer à la fois la valeur du margin et du padding.

CSS Easy-Micro Menu CSS réalisé à partir d'une simple liste à puce HTML


Voici le code HTML de cette liste à puce (à coller dans votre BODY)
<div id="navx">
<ul>
<li><a href="http://www.easy-micro.org/">ACCUEIL</a></li>
<li><a href="http://www.easy-micro.org/">LOGICIEL</a></li>
<li><a href="http://www.easy-micro.org/">LANGAGE</a></li>
<li><a href="http://www.easy-micro.org/">GRAPHISME</a></li>
<li><a href="http://www.easy-micro.org/">TECHNIQUE</a></li>
<li><a href="http://www.easy-micro.org/">DOSSIER</a></li>
</ul></div>

Et le code CSS du menu visible ci-dessus (à coller dans votre HEAD)
<style type="text/css">

/* soit, pour tous li contenu dans un ul contenu dans un div "navx" */
div#navx ul li {
display: inline ;
border: 1px solid gray;
margin-left:-5px;
padding:5px;
}

/* soit, pour tous liens (a) contenu dans un li, contenu dans un ul contenu dans un div "navx" */
div#navx ul li a {
padding:5px;
margin:-5px;
}

/* soit, pour tous liens (a) survolé (hover) contenu dans un li, contenu dans un ul contenu dans un div "navx" */
div#navx ul li a:hover {
padding:5px; margin-left:-5px;
background-color: gray;
color: white;
}
</style>


< Page précédente LANGAGE CSS Page suivante >