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
Comme dans un texte, pour expliquer une abréviation.
En utilisant cette balise magique <span> qui permet d'insérer du style.
Spécifier une couleur, qui s'appliquera sur le nom de la catégorie
<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>
Evidemment je pense qu'il ne faut pas trop abuser et de se servir de cette astuce uniquement pour un petit message. Ci-dessous comme dans l'astuce précédente, je vous conseille de créer une class pour limiter le code en direct.
- 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 :
Image à gauche
<span class="categorie_new_g" title="Ici votre message>Nom de la catégorie</span>Image à droite
<span class="categorie_new_d" title="Ici votre message>Nom de la catégorie</span> Le CSS :
.categorie_new_g
{
background : transparent;
background-image : url(http://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(http://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.
Diz àGoGo
Le style direct sera :
<span class="categorie_plus" title="Ici votre message>Nom de la catégorie</span>
<span class="categorie_plus" title="Ici votre message>Nom de la catégorie</span>
Le CSS
.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.
ESPACE ARTICLE
Le style direct sera :
<span class="categorie_mere" title="Ici votre message>Nom de la catégorie</span>
<span class="categorie_mere" title="Ici votre message>Nom de la catégorie</span>
Le CSS
.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;
}
Voilà je termine en vous souhaitant bonne pioche et bon courage... à vos claviers... en cas de besoin venez sur le forum d'aide de Blog4ever catégorie CSS et DIZ PERSO.
Commentaires
site/blog
le 22-04-2010 à 18:50:42
site/blog
22-04-2010 à 19:29:39
Merci pour tes appréciations et ta visite.
Pour le lien celui à la fin de l'article c'est un renvoi sur le forum B4E, pour d'éventuels besoins d'aide, comme je ne fais pas fonctionner celui de DizTest.
Et le lien au début c'est le retour sur la catégorie de cet article.
Mais merci quand même.
A plus amicalement