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

(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).






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

Tu devrais repartir du dernier codepen et changer les icones en svg avec ceux que tu veux, regarde ici tu vas trouver tous ce que tu veux:
https://iconmonstr.com/

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

Bonjour Stryk,

merci pour ton aide et tes explications.

En effet, ça fonctionne avec un SVG.

Bonne fin de journée,
Thierry

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