Menu de navigation léger en CSS (3)

Vendredi 21 octobre 5 21 /10 /Oct 00:00

Menu de navigation léger en CSS (3)

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

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

Exemple 5:

Lien 1 Lien 2 Lien 3

Exemple 6:

Lien 1 Lien 2 Lien 3

Exemple 7:

Lien 1 Lien 2 Lien 3 Lien 4 Lien 5

Exemple 5 (Horizontal)

Lien 1 Lien 2 Lien 3

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

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)

Lien 1 Lien 2 Lien 3

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

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)

Lien 1 Lien 2 Lien 3 Lien 4 Lien 5

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

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

Plus
- Email
- Lien
- Imprimer

Voir les 0 commentaires Publié dans : CSS

Précédent : Menu de navigation léger en CSS (2) Retour à l'accueil Suivant : Syndication "simple" et...