Tutoriel - Barre de navigation avec image et texte
Petites images sur le côté gauche du texte, différentes pour chacun des éléments du menu du haut "Barre de navigation".
Le nombre d'éléments maximum au moment de la rédaction de cet article, est de 5.
Exemple ci-dessous du code commenté, vous pouvez créer votre code en utilisant le générateur, voir plus bas
.diz-barre-navigation li:first-child {
background: #codecouleur; /* code couleur du fond si utile */
background: url(https://static.blog4ever.com/2012/06/704535/arrow_up_16.png); /* URL image */
background-repeat: no-repeat; /* supprime la répétition de l'image */
background-position: left center; /* position de l'image à gauche */
padding-left: 20px; /* à régler selon largeur de l'image */
}
/* deuxième élément du menu */
.diz-barre-navigation li:first-child+li {
background: #codecouleur;
background: url(https://static.blog4ever.com/2012/06/704535/arrow_down_16.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
Choisissez la couleur de fond dans une palette ou vous laissez transparent, la couleur de fond des éléments sera celle de la barre.
Indiquez la largeur des images pour que le texte ne les recouvre pas.
Ce générateur permet même de créer le code de plus de 5 éléments, car il n'a pas de limite. Mais la barre de navigation est limitée à 20 liens.
GENERATEUR des règles CSS
Et même le modifier si vous connaissez le CSS.
Les codes générés ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.
Exemple de code collé dans la zone.
Si votre espace de gestion est ouvert, cliquez sur : lien
Si cet article vous a été utile, un petit J'aime me fera plaisir.
N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait.
Pour plus d'explications poster sur le forum
Inscrivez-vous au blog
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 167 autres membres