Menu de navigation léger en CSS (2)

Publié le par PêUR

Mise à jour le 21/01/2006 21:36

Cet article propose de nouveau menu en CSS à intégrer dans vos blog.

Exemple 3 (Horizontal)

Voici un menu horizontal qui peut être intégré sous une bannière dans l'entête de votre blog:

 

Le pavé CSS est à intégrer dans votre CSS, le pavé HTML est à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article

CSS

#menu3 a, #menu3 a:visited {
  font-family: verdana;
  text-decoration:none;
  text-align:center;
  background-color:#CCCCCC;
  color:#FFFFFF;
  display:inline; 
  border-top:2px solid #FFFFFF;
  border-left:2px solid #BCE1EA;
  border-right:2px solid #999999;
  border-bottom:2px solid #666666;
  padding:0.5em;
  margin:0em auto;
  }
#menu3 a:hover {
  color:#000000;
  border-bottom:2px solid #FFFFFF;
  border-right:2px solid #BCE1EA;
  border-left:2px solid #666666;
  border-top:2px solid #999999;
  }

 

HTML

<div align=center id="menu3">
  <a href="URL">Lien 1</a>
  <a href="URL">Lien 2</a>
  <a href="URL">Lien 3</a>
  <a href="URL">Lien texte long 4</a>
  <a href="URL">Lien 5</a>
</div>

Quelques précisions:

  • Ces boutons s'ajustent à ce que vous y écrivez.
  • Pour aligner vos boutons à gauche, au centre ou à droite de votre blog, dans le code HTML, choisisez votre alignement en modifiant dans la balise <DIV> l'attribut align. Mettre left pour gauche, right pour droite et center pour centré. J'ai mis en gras cette valeur dans le code HTML.
  • Pour changer la couleur de fond du bouton, modifiez dans le CSS: l'attribut background-color
  • Pour modifier la couleur de la police, modifiez dans le CSS l'attribut color de #menu3 a et au passage de la souris, modifiez l'attribut color de #menu3 a:hover
  • Pour modifier l'effet de bouton appuyé ou relaché, modifiez dans le CSS la couleur des border-bottom, border-top, border-left et border-right. Pour cela sachez que le bouton relaché doit avoir les bordures du bas et de la droite très foncées et les bordures du haut et de gauche claires. Pour le bouton appuyé, les bordures sont inversées: haut et gauche foncées, droite et bas claire. 

Exemple 4 (Vertical)

Voici un menu Horizontal qui peut être intégré dans un module "texte libre" ou bien à côté d'une banière via un tableau:

Le pavé CSS est à intégrer dans votre CSS, le pavé HTML est à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article

CSS

#menu4 a, #menu4 a:visited {
  text-decoration:none;
  font-family: verdana;
  background-color:#FFFFFF;
  color:#000000;
  display:block;
  width:10em;
  height:1em;
  border-bottom:1px solid #FFFFFF; 
  border-right:1px solid #000000;
  padding:0.1em;
  }
#menu4 a:hover {
  border-bottom:1px solid #000000;
  text-align:right;
  }

 

HTML

<div id="menu4">
  <a href="URL">Lien 1</a>
  <a href="URL">Lien 2</a>
  <a href="URL">Lien 3</a>
  <a href="URL">Lien 4</a>
  <a href="URL">Lien 5</a>
</div> 
 

 Quelques précisions

  • L'astuce de ce menu est de décaler le texte de gauche à droite en modifiant l'attribut de text-align au passage de la souris.
  • Pour changer la couleur du fond, modifiez dans le CSS l'attribut background-color, vous pouvez aussi rajouter cet attribut dans #menu4 a:hover afin de changer la couleur de fond au passage de la souris.
  • Pour changer la couleur de la police, modifiez dans le CSS l'attribut color, vous pouvez aussi rajouter cet attribut dans #menu4 a:hover afin de changer la couleur de police au passage de la souris.
  • Pour changer la largeur ou la hauter du menu, modifiez respectivement dans le CSS l'attribut width ou height

Ils utilisent un de ces modèles...

 

Publié dans CSS

Commenter cet article

anis 07/09/2007 15:43

hello how are you today

anis 07/09/2007 15:14

hello how are y

anis 07/09/2007 06:10

salut

anis 07/09/2007 05:08

salut tt le monde

anis 07/09/2007 00:22

salut im good