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.

CSS 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>


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 23 février 2019 - Semaine 08 - Saint Lazare (Demain: Saint Modeste)
Aujourd'hui, c'est l'anniversaire de Louis Bertignac (1954-65 ans), musicien français (guitariste du groupe de rock français Téléphone). Autre 23 février: 1468 - Mort de Gutenberg, inventeur de l'imprimerie.
Haut de page Easy-Micro