Besoin d'aide codes sur le forum Programmation - 08-03-2023 14:11:51

Liste des sujets

Besoin d'aide codes

Touh2020

Niveau 18

08 mars 2023 à 14:11:51

Bonjour.

J'ai trouver un code sur Codepen.io qui m'intéresse. https://codepen.io/0guzhan/pen/YvNmwJ

Mais j'ai un soucis je voudrais remplacer l'action d'ouvrir le menu au click par un hover.

Comment puis je m'y prendre?

Merci d'avance

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Slider</title>
  <style type="text/css">

body{
   font-family: "Roboto";
  text-align: center;
}

#menu {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;
    list-style: none;
    font-size: 200%;
}

.menu-button {
    opacity: 0;
    z-index: -1;
}

.menu-button {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    background-image: url("https://drive.google.com/uc?id=1HGMiUrWKj43E35XxRkDZa--2bIUvdaqj");
    background-size: 100%;
    overflow: hidden;
    text-decoration: none;
  
}


#menu:not(:target)>a:first-of-type,
#menu:target>a:last-of-type {
    opacity: 1;
    z-index: 1;
}

#menu:not(:target)>.icon-plus:before,
#menu:target>.icon-minus:before {
    opacity: 1;
}

.menu-item {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 55%;
    line-height: 5px;
    top: 50%;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    background-color: #cdaed1;
    transform: translate(0px, 0px);
    transition: transform 500ms;
    z-index: -2;
    transition: .5s;
}

.menu-item:hover{
opacity: 0.5;
  box-shadow: 0 5px 10px black; 
}


.menu-item a {
    color: #fff;
    position: relative;
    top: 30%;
    left: 0;
    text-decoration: none;
}

#menu:target>.menu-item:nth-child(6) {
    transform: rotate(60deg) translateY(-150px) rotate(300deg);
    transition-delay: 0s;
}

#menu:target>.menu-item:nth-child(5) {
    transform: rotate(20deg) translateY(-155px) rotate(-20deg);
    transition-delay: 0.1s;
}

#menu:target>.menu-item:nth-child(3) {
    transform: rotate(-20deg) translateY(-155px) rotate(20deg);
    transition-delay: 0.2s;
}

#menu:target>.menu-item:nth-child(4) {
    transform: rotate(-60deg) translateY(-150px) rotate(60deg);
    transition-delay: 0.3s;
}

.content{
  position: absolute;
  text-align: center;
  margin: -10px 0 0 -30px;
  top: 70%;
  left: 50%;
  font-size: 20px;
}
  </style>
</head>
<body>
<div class="container">
     <ul id="menu">
           <!-- open-menu id for click event -->
            <a class="menu-button icon-plus" id="open-menu" href="#menu" title="Liens utiles"></a>
            <a class="menu-button icon-minus" href="#0" title="Fermer"></a>
            <li class="menu-item">
                <a href="#menu">
                    <span class="fa fa-github"></span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#menu">
                    <span class="fa fa-linkedin"></span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#menu">
                    <span class="fa fa-instagram"></span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#menu">
                    <span class="fa fa-twitter"></span>
                </a>
            </li>
        </ul>
</div>
</body>
</html>

fanof_banni

Niveau 13

08 mars 2023 à 20:17:17

1) comprendre le code
ici on clique sur un lien qui pointe vers l'élément avec l'id "menu"

côté css on peut ajouter des conditions sur le fait que le menu soit l'élément ciblé, ce qu'on voit avec tous les #menu:target et on se sert de ça pour déclencher des animations css

on a un second lien qui pointe vers un élément n'existant pas, qui sert seulement à retiré le ciblage sur le menu et donc à retourner à l'état initial

2) comprendre quoi changer
logiquement on a pas envie de lier l'animation au survol, on veut seulement la délencher et qu'elle reste en l'état jusqu'à ce qu'on décide de retourner à l'état initial (pour ça on peut garder le lien de fermeture déjà présent)

du coup le plus simple c'est

d'utiliser un listener côté js
de lier l'animation à la présence d'une classe ajoutée via le listener (je vais appeler cette classe "opened")

3) procéder aux changements
coté HTML :

supprimer le lien d'ouverture (#open-menu) qui ne nous servira plus
ajouter un id "hide-menu" sur le lien de fermeture

côté CSS :

remplacer tous les :target par .opened
diminuer tous les menu-item:nth-child(x) puisqu'on vient de supprimer un élément (note: on pourrait pointer directement vers des id ou des classes, ce serait plus lisible)

côté JS :


window.onload = function() {
    const menu = document.getElementById("menu");

   /** ajout de la classe "opened" quand le curseur survol le menu **/
    menu.addEventListener('mouseenter', (event) => {event.target.classList.add('opened');
  }, false);
  
  /** retrait de la classe et donc retour à l'état initial au clic sur le lien de fermeture **/
  document.getElementById("hide-menu").addEventListener('click', (event) => {
    menu.classList.remove('opened');
  }, false);
};

cybevil

Niveau 27

08 mars 2023 à 20:30:01

Remplace les targets des éléments suivant par des hover :

Au Click :

        #menu:target > .menu-item:nth-child(6) {
            transform: rotate(60deg) translateY(-150px) rotate(300deg);
            transition-delay: 0s;
         }

         #menu:target > .menu-item:nth-child(5) {
            transform: rotate(20deg) translateY(-155px) rotate(-20deg);
            transition-delay: 0.1s;
         }

         #menu:target > .menu-item:nth-child(3) {
            transform: rotate(-20deg) translateY(-155px) rotate(20deg);
            transition-delay: 0.2s;
         }

         #menu:target > .menu-item:nth-child(4) {
            transform: rotate(-60deg) translateY(-150px) rotate(60deg);
            transition-delay: 0.3s;
         }

Au survole de la souris :

        #menu:hover> .menu-item:nth-child(6) {
            transform: rotate(60deg) translateY(-150px) rotate(300deg);
            transition-delay: 0s;
         }

         #menu:hover> .menu-item:nth-child(5) {
            transform: rotate(20deg) translateY(-155px) rotate(-20deg);
            transition-delay: 0.1s;
         }

         #menu:hover> .menu-item:nth-child(3) {
            transform: rotate(-20deg) translateY(-155px) rotate(20deg);
            transition-delay: 0.2s;
         }

         #menu:hover> .menu-item:nth-child(4) {
            transform: rotate(-60deg) translateY(-150px) rotate(60deg);
            transition-delay: 0.3s;
         }

Message édité le 08 mars 2023 à 20:30:31 par cybevil

Touh2020

Niveau 18

09 mars 2023 à 06:23:14

Le 08 mars 2023 à 20:17:17 :
1) comprendre le code
ici on clique sur un lien qui pointe vers l'élément avec l'id "menu"
côté css on peut ajouter des conditions sur le fait que le menu soit l'élément ciblé, ce qu'on voit avec tous les #menu:target et on se sert de ça pour déclencher des animations css
on a un second lien qui pointe vers un élément n'existant pas, qui sert seulement à retiré le ciblage sur le menu et donc à retourner à l'état initial
2) comprendre quoi changer
logiquement on a pas envie de lier l'animation au survol, on veut seulement la délencher et qu'elle reste en l'état jusqu'à ce qu'on décide de retourner à l'état initial (pour ça on peut garder le lien de fermeture déjà présent)
du coup le plus simple c'est
d'utiliser un listener côté js
de lier l'animation à la présence d'une classe ajoutée via le listener (je vais appeler cette classe "opened")
3) procéder aux changements
coté HTML :
supprimer le lien d'ouverture (#open-menu) qui ne nous servira plus
ajouter un id "hide-menu" sur le lien de fermeture
côté CSS :
remplacer tous les :target par .opened
diminuer tous les menu-item:nth-child(x) puisqu'on vient de supprimer un élément (note: on pourrait pointer directement vers des id ou des classes, ce serait plus lisible)
côté JS :
window.onload = function() {
    const menu = document.getElementById("menu");

   /** ajout de la classe "opened" quand le curseur survol le menu **/
    menu.addEventListener('mouseenter', (event) => {event.target.classList.add('opened');
  }, false);
  
  /** retrait de la classe et donc retour à l'état initial au clic sur le lien de fermeture **/
  document.getElementById("hide-menu").addEventListener('click', (event) => {
    menu.classList.remove('opened');
  }, false);
};

Merci beaucoup de ton aide. Tu es un bon pédagogue.

Je comprend a peu près ton code sauf que je souhaiterais qu'il y ai bien un hover sur le menu pour qu'il laisse apparaitre les items. Mais eux par contre je voudrais qu'il reste cliquable.

Comment faire?

Merci d'avance.

fanof_banni

Niveau 13

09 mars 2023 à 08:16:19

Le 09 mars 2023 à 06:23:14 :
Je comprend a peu près ton code sauf que je souhaiterais qu'il y ai bien un hover sur le menu pour qu'il laisse apparaitre les items. Mais eux par contre je voudrais qu'il reste cliquable.

mes modification affectement seulement le déclenchement de l'animation, chaque lien reste cliquable

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News jeu

134 669 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu