28111 sujets

CSS et mise en forme, CSS3

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

Pages :
Bonjour,

en fait, je me demande comment je peux faire pour entourer l'icône et le texte de mon menu d'un cercle oval lors du survol d'un élément du menu.

Je pense qu'il faut passer par les transformations afin de pouvoir dessiner un cercle autour du texte lors du survol sans toucher aux éléments qui se trouvent en-dessous ou au-dessus de ce cercle ?

Quand j'essaie de dessiner le cercle en modifiant les margin ou padding, il touche également à l'image que j'ai mise à côté du texte comme icône.

Voici mon code :


<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Accueil</span></a>
</div>
<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Contact</span></a>
</div>
<div class="menu-item">
  <a href="#" class="icon-home"><span class="menu-item-text">Agenda</span></a>
</div>




.menu-item {
  color: #000;
  height: 35px;
}

.icon-home {
  background: url(img/home-black.png) no-repeat;
  margin: 20px 0 0 30px;
}

.menu-item-text {
  padding: 0 0 0 113px;
  width: 140px;
  display: inline-block;
  position: absolute;
  top: 85px;
  left: -45px;
  color: #000;
}

.menu-item:hover {
  color: rgb(68, 114, 196);
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}

.icon-home:hover
{
  background: url(img/home-blue.png) no-repeat;
  color: rgb(68, 114, 196);
}

.menu-item-text:hover {
  color: rgb(68, 114, 196);
}


Merci d'avance

Sincères salutations,
Thierry
Hello Thierry,

Voici une façon de procéder parmi d'autres, tu peux bien entendu retirer le display: inline-block de la class contain-item si tu veux tes liens les uns en dessous des autres.
Tu retrouve dans le onclick de chaque élément ton lien vers l'ancre comme tes <a>:
https://codepen.io/exemple/pen/QWbVXde
N'hésites pas si tu as des questions
Bonjour Stryk,
merci encore une fois pour votre aide.
En fait, je parviens à entourer le texte lors du survol quand il n'y a que du texte.
Par contre, dans ce cas-ci, j'ai un icône avant mon texte que réagit apparemment comme un élément bloc malgré le fait que la classe "icon-home" se trouve dans un élément de type inline qui est le lien (du moins, je pense).
Votre solution me convient parfaitement mis je me demande juste comment je peux faire afin d'ajouter un petit icône avant le texte du menu ?
Merci d'avance
Bonne soirée
Thierry
Bonjour Stryk,
une fois de plus, merci pour votre disponibilité et votre aide.
Je vais naturellement m'inspirer de votre solution.
Passez une agréable journée,
Thierry
Modérateur
Hello,

Sans vouloir pousser une autre solution, j'aimerais juste attirer votre attention sur 2-3 choses Smiley smile

Il vaut mieux éviter autant que possible d'assigner un width/height à des éléments (si c'est indispensable, alors préférer min-width/min-height, pour être certains que ça puisse s'agrandir).

Pareil, les position relative, ça fonctionne bien mais aujourd'hui on a les outils pour centrer facilement (je garderai position relative pour déplacer un élément sans pour autant voir le centrer à l'oeil).

Dernier truc pour pour les icônes en SVG, c'est plus simple d'utiliser currentcolor qui prendra alors la couleur du texte de son parent dans ce cas-ci

Un petit exemple pour illustrer (même si il y a encore certains d'autres améliorations)

Amusez-vous bien
Bonjour Yordi, Stryk,

merci pour vos conseils.

ça fait toujours plaisir de recevoir des conseils d'expert et de pouvoir compter sur vous pour pouvoir s'améliorer.

Bonne journée
Thierry
Hello Yordi,

Effectivement c'est beaucoup plus simple comme ceci.
Bien vu pour currentcolor, je ne connaissais pas !
Je garde tout ça dans un coin ça va me resservir Smiley biggrin
Bonjour Yordi, Stryk,

merci pour votre aide.

Je pense que c'est presque parfait grâce à vous mais j'ai encore une question à vous poser.

En fait, quand je survole le lien, j'aimerais bien que la couleur du texte change également mais rien ne se passe.

Voici le code :


            <nav class="menu">
                <ul class="main-menu">
                    <li>
                        <div class="contain-item" href="activity.php">
                            <div class="inner-item">
                                <span class="text-item">Activit&eacute;</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a class="contain-item" href="welcome.php">
                            <span class="text-item">Accueil</span>
                        </a>
                    </li>
                    <li>
                        <div class="contain-item" href="notifications.php">
                            <div class="inner-item">
                                <span class="text-item">Mes notifications</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contain-item" href="contacts.php">
                            <div class="inner-item">
                                <span class="text-item">Mes contacts</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contain-item" href="logout.php">
                            <div class="inner-item">
                                <span class="text-item">Déconnexion</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>




.contain-item {
  display: inline-flex;
  align-items: center;
  margin: 5px 0 0 15px;
  padding: 15px;
  border-radius: 25px;
  fill: currentcolor;
  cursor: pointer;
  background-image: url(../public/img/home-black.png);
  background-repeat: no-repeat;
  background-position: 15px 10px;
  transition: all .7s ease;
}

.contain-item:hover {
  background-color: rgb(184, 202, 234);
  background-image: url(../public/img/home-blue.png);
  background-repeat: no-repeat;
  background-position: 15px 10px;
  color: #000!important;
}

.text-item {
  margin: 0 0 0 35px;
  color: #757575;
  font-size: 15px;
  font-weight: bold;
}


Avez-vous une idée ?

Merci d'avance

Bonne journée
Thierry
Bonjour Stryk,
en effet, maintenant ça fonctionne.
En tout cas, je tiens sincèrement à te remercier pour ton aide.
Bonne journée
Thierry
Bonjour Stryk, Yordi,

j'ai une dernière question à vous poser à propos de ce sujet avant de le clôturer. Smiley biggrin

En effet, dans le menu, il y a un élément dynamique qui est l'image de fond représentant l'icône. Cette image peut varier en fonction du menu sur lequel l'utilisateur clique.

Je suppose que ce sujet n'a plus rien à voir avec le CSS mais avec le javascript ?

Je suppose qu'il vaut mieux utiliser du javascript pour changer l'image de fond plutôt que de dupliquer le code CSS autant de fois qu'il n'y a de menu ?

Est-ce que vous résoudriez également ce problème de a même façon que je l'ai expliqué ci-dessus ?

Merci d'avance

Bonne soirée
Thierry
Bonjour Stryk,

naturellement que je serais intéressé par un exemple. Cela m'aidera énormément et je tiens encore une fois à t'en remercier.

En fait, il faut que j'utilise le premier icône au chargement de la page. Puis, quand je survole le lien, je dois remplacer l'icône correspondant à ce lien par le second (via l'event onMouseOver, je suppose).

En fait, dans mon cas, j'utilise la propriété background pour gérer ces icônes comme tu as pu le constater dans mon code source.

Merci pour ton aide.

Bonne fin de soirée et à bientôt,
Thierry
Salut,

Alors du coup je ne vois plus trop ce que tu veux faire.
C'est toujours avec le menu et le cercle au survol ?
Tu as un picto et tu veux qu'au survol ça change le picto ?
Salut Stryk,

en effet, au chargement de la page, j'ai les icônes originales à côté des textes du menu et quand on survole le lien, il remplace cet icône par l'icône correspondant au menu qui est sélectionné. En fait, il s'agit du même icône sauf qu'il est dans une couleur différente.

Par exemple, pour accueil, j'ai une maison noire au chargement de la page. Quand on survole le lien, je remplace cet icône par le même icône qui est bleu cette fois-ci.

La même chose pour contacts par exemple. Au chargement, j'ai un icône représentant un groupe de personnes en noire. Puis, quand on survole le menu, cet icône est remplacé par l'icône représentant un groupe de personne en vert.

Merci d'avance

Bonne journée
Thierry
Modérateur
Hello,

Est-ce que tu aurais un exemple d'icone (normal/hover) ?
Selon le visuel, je ferais peut-être quelque chose de différent, ceci dit :

1 - Si c'est un background, tu peux continuer à utiliser css pour changer ton image sur le hover, tu changes simplement ton background

2 - Si les icones sont complètement différentes, (que ce soit bitmap ou vectoriel), tu peux faire un sprite pour ne pas avoir un flash le temps que ça charge

3 - Si c'est un svg et que la nuance entre les 2 états sont légers (par exemple, une icone de cloche initialement et si tu survoles ça devient la même cloche avec un plus), tu peux très bien changé ton implémentation pour avoir ton SVG dans ton html et uniquement jouer avec une class sur le plus à l'intérieur de ton svg pour l'afficher ou non au survol avec CSS. Tu pourras bénéficier également des transitions dessus Smiley smile 


a svg .plus{
  opacity: 0;
  transition: opacity .3s ease;
}
a:hover svg .plus{opacity: 1;}
Modérateur
Ok, on s'est croisé Smiley smile
Si c'est un simple changement de couleur, alors j'insèrerais l'icone dans l'html (un SVG) et je jouerais simplement sur la propriété "fill" qui permet de changer la couleur de ton svg. Vérifie que fill ne soit pas défini dans ton svg, et gère le avec css, c'est le plus simple.
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)
Pages :
Sujet clos
Aller à