Menu de navigation léger en CSS (3)

Publié le par PêUR

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

Cet article propose 3 nouveaux menu en CSS à intégrer dans vos blog.

Exemple 5:

 

Exemple 6:

 

Exemple 7:

Exemple 5 (Horizontal)

Ci-dessous le code à intégrer dans votre CSS (vous pouvez le placer au niveau du code gérant l'apparence de l'entête):

CSS

 #menu5 a {
  display:inline;
  font: bold 10px/12px verdana;
  color:#fff;
  text-align:center;
  text-decoration:none;
  background:#000;
  padding:0.8em 3em;
  margin:0;
  border-bottom:5px solid #fff;
  }

#menu5 a:hover {
  border-bottom:5px solid orange;
  color: orange
  }

Ci-dessous, explication ligne à ligne pour effectuer vos modifications de style dans le CSS:

Par défaut (#menu5 a):

  • display:inline; Ne pas toucher (affichage des "boutons" côte à côte)
  • font:verdana small bold; police "verdana", taille "small" et en gras gràce à "bold"
  • color:#fff; Couleur de la police (blanche)
  • text-align:center; alignement du texte (centré)
  • text-decoration:none; Pas de souligné
  • Background:#000; Couleur de fond des "boutons" (noir)
  • padding:0.8em 3em; Espacement supérieur / inférieur par rapport au texte (0.8em) et espacement gauche / droit par rapport au texte (3em). Ce sont ces valeurs qu'il faut modifier pour agrandir ou rétrécir la taille des "boutons"
  • margin:0; Ne pas toucher (marge)
  • border-bottom:5px solid #fff; bordure inférieure des "boutons", largeur (5px) style (trait plein) et couleur (blanche). Elle doît être de la même couleur que celle du fond de votre blog.

Au passage de la souris (#menu5 a:hover)

  • border-bottom:5px solid orange; bordure inférieure des "boutons", largeur (5px) style (trait plein) et couleur (Orange).
  • color: orange; Couleur de la police (Orange)

 

Ci-dessous, le code HTML à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article:

HTML

<DIV id=menu5 align=center>
<A href="#nogo">Lien 1</A>
<A href="#nogo">Lien 2</A>
<A href="#nogo">Lien 3</A>
<A href="#nogo">Lien 4</A>
<A href="#nogo">Lien 5</A>
</DIV>

Ci dessous, les modifications possibles du HTML:

  • Dans la balise DIV, align= : pemet d'aligner la "barre de boutons" (left = à gauche, right = à droite et center = centré)
  • Dans les balises A, href= : mettre l'URL de vos liens à la place de "#nogo"
  • Dans les balises A, target="_blank" : permet d'ouvrir les liens dans une fenêtre différentes.
  • Dans les balises A, title="votre texte" : permet d'afficher "votre texte" dans une infobulle au survole de la souris

 

Exemple 6 (Horizontal)

Ci-dessous le code à intégrer dans votre CSS (vous pouvez le placer au niveau du code gérant l'apparence de l'entête):

CSS

 #menu6 a {
  display:inline;
  font: bold 10px/12px verdana;
  color:#fff;
  text-align:center;
  text-decoration:none;
  background:#000;
  padding:0.8em 3em;
  margin:0;
  }

#menu6 a:hover {
  background:orange;
  color: black
  }

Ci-dessous, explication ligne à ligne pour effectuer vos modifications de style dans le CSS:

Par défaut (#menu6 a):

  • display:inline; Ne pas toucher (affichage des "boutons" côte à côte)
  • font:verdana small bold; police "verdana", taille "small" et en gras gràce à "bold"
  • color:#fff; Couleur de la police (blanche)
  • text-align:center; alignement du texte (centré)
  • text-decoration:none; Pas de souligné
  • Background:#000; Couleur de fond des "boutons" (noir)
  • padding:0.8em 3em; Espacement supérieur / inférieur par rapport au texte (0.8em) et espacement gauche / droit par rapport au texte (3em). Ce sont ces valeurs qu'il faut modifier pour agrandir ou rétrécir la taille des "boutons"
  • margin:0; Ne pas toucher (marge)

Au passage de la souris (#menu6 a:hover)

  • background: orange; Couleur de fond des "boutons" (Orange).
  • color: black; Couleur de la police (Noir)

  

Ci-dessous, le code HTML à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article:

HTML

<DIV id=menu6 align=center>
<A href="#nogo">Lien 1</A>
<A href="#nogo">Lien 2</A>
<A href="#nogo">Lien 3</A>
<A href="#nogo">Lien 4</A>
<A href="#nogo">Lien 5</A>
</DIV>

 Ci dessous, les modifications possibles du HTML:

  • Dans la balise DIV, align= : pemet d'aligner la "barre de boutons" (left = à gauche, right = à droite et center = centré)
  • Dans les balisesA, href= : mettre l'URL de vos liens à la place de "#nogo"
  • Dans les balisesA, target="_blank" : permet d'ouvrir les liens dans une fenêtre différentes.
  • Dans les balisesA, title="votre texte" : permet d'afficher "votre texte" dans une infobulle au survole de la souris

  

Exemple 7 (Vertical)

ATTENTION: sous Internet Explorer, la première lettre du lien n'est pas mise en valeur. Sous Firefox, vous obtenez cela:

 

Le code; CSS est à intégrer dans votre feuille de style:

CSS

 #menu7 a {
  display:block; 
  font: bold 10px/12px verdana;
  color:#fff;
  text-align:left;
  text-decoration:none;
  background:#000;
  width:15.5em;
  padding:0.1em 0.6em;
  }

#menu7 a:first-letter{
  color:orange;
  }

#menu7 a:hover {
  color: orange;
  letter-spacing:0.5em;
  }

Ci-dessous, explication ligne à ligne pour effectuer vos modifications de style dans le CSS:

Par défaut (#menu7 a):

  • display:block; Ne pas toucher (affichage des "boutons" l'un sur l'autre)
  • font:verdana small bold; police "verdana", taille "small" et en gras gràce à "bold"
  • color:#fff; Couleur de la police (blanche)
  • text-align:left; alignement du texte (gauche)
  • text-decoration:none; Pas de souligné
  • Background:#000; Couleur de fond des "boutons" (noir)
  • width:15.5em; lageur des "boutons" C'est cette valeurs qu'il faut modifier pour élargir les "boutons"
  • padding:0.1em 0.6em; Espacement supérieur / inférieur par rapport au texte (0.1em) et espacement gauche / droit par rapport au texte (0.6em).

Première lettre des liens (#menu7 a:first-letter)

  • color:orange; Couleur de la première lettre des liens avant passage de la souris (UNIQUEMENT sous Firefox et Mozilla)

Au passage de la souris (#menu7 a:hover)

  • color: orange; Couleur de la police (Orange)
  • letter-spacing:0.5em; Espacement des lettres. Cette propriété permet de donner un effet elastique au texte du lien survolé.

   

Le code HTML à intégrer en mode source de votre entête, pied de page, module "texte libre", message d'accueil ou article

HTML

<DIV id=menu7 align=center>
<A href="#nogo">Lien 1</A>
<A href="#nogo">Lien 2</A>
<A href="#nogo">Lien 3</A>
<A href="#nogo">Lien 4</A>
<A href="#nogo">Lien 5</A>
</DIV>

 Ci dessous, les modifications possibles du HTML:

  • Dans la balise DIV, align= : pemet d'aligner la "barre de boutons" (left = à gauche, right = à droite et center = centré)
  • Dans les balises A, href= : mettre l'URL de vos liens à la place de "#nogo"
  • Dans les balises A, target="_blank" : permet d'ouvrir les liens dans une fenêtre différentes.
  • Dans les balises A, title="votre texte" : permet d'afficher "votre texte" dans une infobulle au survole de la souris

 

Publié dans CSS

Commenter cet article

Va* 25/08/2007 23:42

Tout marche sauf la barre orange du dessous :/

Bref

Va* 25/08/2007 23:31

Maintenant le orange de fond fonctionne mais pas le reste ... Faut-il un peu de temps pour que tout fonctionne normalement ?

Va* 25/08/2007 23:28

Bon ça marche pas, je sais pas quoi faire :s

MBr 02/07/2007 14:13

je suis surement trés nul au vu des comm precedent, mais lorsque j'importe le menu 6, rien ne se passe, je ne comprend pas ce que je fais mal, merci de m'aider .... Boulet ke je suis

PêUR 08/07/2007 21:37

Que fais-tu quand tu dis que tu "importes" le menu? Actuellement est-il encore installé car je n'en vois trace dans ton html et ton css.

ephciba 27/06/2007 20:10

Bonjour Peur,

je souhaite passer en version 2 sur over the blog mais je ne sais pas comment faire peux-tu m'aider ?

PêUR 08/07/2007 21:29

Moi aussi... il faut attendre.