Menu du haut
Exemple N°6
Ajout d'une image texture en fond de barre.
Cette image étant plus haute que la barre vous pouvez la positionnée dans la hauteur en utilisant la propriété background-position.
- left pour l'alignement à gauche
- bottom alignement sur le bord bas, la partie inférieure de l'image est prise en compte.
Et répétée horizontalement avec la propriété backkground-repeat.
CSS personnalisé
.diz-barre-navigation{
background-color: #000000;
background-image: url('http://static.blog4ever.com/2012/06/704535/artfichier_704535_3634010_201404112424502.png');
background-repeat: repeat;
background-position:left bottom;
}
.diz-barre-navigation a {
background-color: #B1C4E4;
color: #034984;
padding: 0 3px;
text-align : center;
}
.diz-barre-navigation a:hover {
background-color: #034984;
color: #B1C4E4;
}
.diz-barre-navigation li {
margin: 0 10px 0 10px;
background-image: url('http://static.blog4ever.com/2012/06/704535/paques_006.gif');
background-repeat: no-repeat;
padding-left: 40px;
background-position: left center;
}
Page exemple
Sur cette page externe, les liens dans les menus "Barres de navigation" et "Menu latéral" sont inactifs.