28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu : entourer d'un cercle lors du survol ...

Pages :
(reprise du message précédent)

Bonjour Stryk et Yordi,

merci à vous pour votre aide.

En fait, ce sont de simples icônes représentant le thème du menu.

Voici 4 icônes représentant 2 thème différents (accueil et contacts).

upload/1585126503-74296-contacts-black.png
upload/1585126077-74296-contacts-blue.png
upload/1585126126-74296-home-black.png
upload/1585126143-74296-home-blue.png

Je tiens encore à vous remercier pour votre aide et vous souhaite de passer une agréable journée.

Thierry
Modifié par THIRT05 (25 Mar 2020 - 09:55)
Bonjour Stryk,

j'avais déjà essayé mais l'icône ne change pas de couleur, il reste dans sa couleur d'origine.

Voici mon code :


            <nav class="menu">
                <ul class="main-menu">
                    <li>
                        <a class="contain-menu-item" href="#">
                            <span class="text-menu-item">Accueil</span>
                        </a>
                    </li>
                    <li>
                        <a class="contain-menu-item" href="#">
                            <span class="text-menu-item">Mes contacts</span>
                        </a>
                    </li>
                    <li>
                        <a class="contain-menu-item" href="#">
                            <span class="text-menu-item">Mon agenda</span>
                        </a>
                    </li>
                    <li>
                        <a class="contain-menu-item" href="#">
                            <span class="text-menu-item">Déconnexion</span>
                        </a>
                    </li>
                </ul>
            </nav>




.contain-menu-item {
  display: inline-flex;
  align-items: center;
  margin: 5px -10px 0 33px;
  padding: 11px;
  border-radius: 25px;
  fill: rgb(68, 114, 196);
  cursor: pointer;
  color: #000;
  background-image: url(../public/img/home-black.png);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  background-size: 23px;
  transition: all .2s ease;
}

.text-menu-item {
  margin: 0px 10px 0 42px;
  padding: 2px 0 0 0;
  font-size: 16px;
  font-weight: bold;
}

.contain-menu-item:hover {
  background-color: rgb(229, 235, 247);
  background-image: url(../public/img/home-blue.png);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  color: rgb(68, 114, 196);
}

.active-menu-item {
  background-image: url(../public/img/home-blue.png);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  color: rgb(68, 114, 196);
}


Merci d'avance

Bonne journée
Thierry
Bonjour Stryk, Yordi,

voici mon code CSS sans substituer l'icône lors du survol du lien du menu :


.contain-menu-item {
  display: inline-flex;
  align-items: center;
  margin: 5px -10px 0 33px;
  padding: 11px;
  border-radius: 25px;
  fill: var(--color-spotitime);
  cursor: pointer;
  color: #000;
  background-image: url(https://spotitime.com/public/img/home-black.png);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  background-size: 23px;
  transition: all .2s ease;
}

.text-menu-item {
  margin: 0px 10px 0 42px;
  padding: 2px 0 0 0;
  font-size: 16px;
  font-weight: bold;
}

.contain-menu-item:hover {
  background-color: rgb(229, 235, 247);
}

.active-menu-item {
  background-image: url(https://spotitime.com/public/img/home-blue.png);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  color: var(--color-spotitime);
}


Apparemment, ça ne semble pas fonctionner avec la propriété fill. La couleur de l'icône et du texte du menu ne changent pas.

Merci d'avance

Bonne journée
Thierry
Modifié par THIRT05 (25 Mar 2020 - 10:41)
Modérateur
Est-ce que tu peux partager le code SVG de ton icône stp ? Toujours intéressant, pas beaucoup de monde regarde à l'intérieur alors que c'est généralement très facilement compréhensible. Ce serait intéressant de partager la dessus Smiley smile
Bonjour Yordi,

aucun problème pour partage le code SVG de l'icône mais, dans mon cas, il s'agit d'une image au format png.

En fait, la tâche dans mon cas est certainement plus compliquée car j'utilise des images au format png plutôt que d'utiliser des svg.

Est-ce qu'il y a quelque chose que je peux partager à ce moment-là ?

Merci d'avance

Bonne journée
Thierry
Thierry,

sur ce code: https://codepen.io/Yordi/pen/mdJzrOZ
Tout fonctionne bien !?

Remplace juste les SVG du code par d'autres qui te plaisent, pour celà tu vas sur ce site ( par exemple) : https://iconmonstr.com/
Ensuite si tu veux un picto "home", tu cherche "home" et tu chisis par exemple celui-ci qui ressemble à ton png:
https://iconmonstr.com/home-3-svg/
Tu clique sur <embed> et ça te donne le code SVG suivant:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 14.828v9.172h18v-9.172l-9-8.375-9 8.375zm11 7.172h-4v-6h4v6zm10-9.852l-1.361 1.465-10.639-9.883-10.639 9.868-1.361-1.465 12-11.133 12 11.148z"/></svg>


T'as juste à remplacer dans le code, c'est tout, et tu fais pareil pour les autres Smiley biggrin
Bonjour Stryk,

merci pour ton aide et tes explications.

En effet, ça fonctionne avec un SVG.

Bonne fin de journée,
Thierry
Merci à Stryk et à Yordi pour leur aide.

Ce sujet peut donc être clôturé grâce à leur collaboration.

Encore merci à eux.

Bonne journée
Thierry
Modérateur
Juste en addition si tu veux vraiment garder le png (même le mieux serait de demander le svg au graphiste). Si pour X raisons, tu n'as que le png, alors tu peux soit :

- garder le fonctionnement que tu avais avant avec le background CSS pour afficher l'image et au survol, tu changes d'image pour afficher l'icon bleu
a span{
  background: url('icon.png') no-repeat center;
}
a:hover{
  background-image: url('icon-active.png');
}


En séparant les images comme ici, tu vas avoir un effet de flash (qui sera lié au chargement de l'image).

Soit tu peux créér un sprite (ça ne se fait plus vraiment aujourd'hui mais cette technique fonctionne depuis des années). Un sprite va simplement consister à crééer une seule image qui reprend tes deux icônes comme ceci :

  ——
|  x  |    <-- ici ton icône classique
  ——
|  y  |    <-- ici ton icône active
  ——


Ensuite pourra simplement jouer sur la position du background comme ceci :
a span{
  background: url('icon.png') no-repeat top center;
}
a:hover{
  background-position: bottom center;
}

Modifié par Yordi (26 Mar 2020 - 10:57)
Bonjour Yordi,

merci pour vos conseils.

Finalement, j'ai suivi vos conseils en utilisant les SVG.

Donc, ce problème est clôturé de mon côté grâce à votre aide ainsi que celle de Stryk.

Encore merci à vous pour votre aide et vos conseils.

Bonne journée
Thierry
Pages :
Sujet clos
Aller à