Astuce - Bulle sur catégorie menu
Pour faire suite à ma précédente astuce sur la façon d'appliquer un style aux noms des catégories du menu vertical... voir cette astuce
Je vous propose de créer une bulle contenant un message, qui s'affiche au survol de la souris. Je pense que cette possibilité de message sera intéressante dans certains cas par exemple :
- éviter l'affichage du nom de la catégorie sur 2 lignes
- donner un complément d'informations sur le contenu de la catégorie
- présciser la mise à jour d'un article dans la catégorie
- etc...
- Code mis en direct avec le nom de la catégorie, 2 solutions.
Exemples
<acronym title="Ici votre message">Nom de la catégorie</acronym>
En utilisant cette balise magique <span> qui permet d'insérer du style.
<span title="Ici votre message">Nom de la catégorie</span>L'avantage de cette balise <span> est que vous pouvez en plus du message...
Spécifier une couleur, qui s'appliquera sur le nom de la catégorie
<font color="green" title="Ici votre message">Nom de la catégorie</font>
- Créer une class en CSS pour pouvoir réduire le code en direct
Une class est une règle pouvant être utilisée plusieurs fois dans une page, donc en prenant l'exemple de l'image "New", l'adresse de l'image étant parfois très longue, vous gagnerai en place et la liste des catégories dans votre gestion sera moins décalée.
Le principe est de créer cette class dans votre feuille de style ou dans les bordures. Pour l'occasion j'ai créé 2 classes, une pour placer l'image à gauche du nom et l'autre à droite ensuite les codes directs seront :
.categorie_new_g
{
background : transparent;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-1212789-0.html);
background-repeat : no-repeat;
padding-left : 33px;
padding-top: 3px;
width: 150px;
display : inline;
}
.categorie_new_d
{
background : transparent;
background-image : url(https://diztest.blog4ever.com/blog/url_artimage-205392-1212789-0.html);
background-repeat : no-repeat;
background-position :right top;
padding-top: 3px;
padding-right: 33px;
width: 140px;
display : inline;
}
Si vous survolez avec la souris du menu vertical gauche de cette page, vous verrez s'afficher sur certaines catégories, des petits messages bulles.
Un peu plus compliqué mais très intéressant, pouvoir mettre en valeur des catégories, en plus d'un message.
Comme mon menu risque de changer j'ai fait une capture partielle, pour montrer d'une part le positionnement des images NEW, à gauche et à droite. Je laisse l'adresse de mon image, pour faire un essai de mon code, mais si vous l'utilisez sur votre blog, téléchargez la sur votre compte. Les valeurs dans mon code seront certainement à modifier selon la taille de votre menu et des textes, également suivant votre image.
Sur cette capture vous voyez 2 catégories misent en valeur, par un encadrement et une image de fond. Déjà sur mon article précédent , il y a le code class "categorie_plus", mais vous trouverez plus bas 2 codes pour différencier les catégories simples et les catégories "mères" ayant des sous-catégories (filles).
Le premier code pour mettre en valeur une catégorie simple et avec une bulle.
<span class="categorie_plus" title="Ici votre message>Nom de la catégorie</span>
.categorie_plus
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/orange/fd_3a.png);
background-repeat: repeat-y;
width :160px;
padding : 3px 10px;
margin:5px auto 5px 10px;
text-align : center;
border: 3px ridge #FFFFFF;
display:inline;
}
Le deuxième code pour mettre en valeur une catégorie "mère" et avec une bulle.
<span class="categorie_mere" title="Ici votre message>Nom de la catégorie</span>
.categorie_mere
{
background-image: url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/or/fd_2.png);
background-repeat: repeat;
width :160px;
padding : 0px 5px;
margin-top : -25px;
margin-left: -2px;
text-align : center;
border: 3px ridge #FFFFFF;
display:block;
}