Afficher menu et sous menu avec hover

**Philcmoi** · 04/06/2024, 18h27

Bonjour.
voila mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<aside>
    <br><br>
    <a><span id="changer"></span></a>
 
    <br><br>
    <br><br>
 
 
      <div id="menuDeroulant">
 
        <div class="sousMenueDeroulant">
 
          <button class="choixParmis">
          <img class="fleche" src="images/blocsInverse.png">
          <img class="fleche2" src="images/blocs.png">
          <div class="generalite"><h1>Généralités</h1></div>
          </button>
          <ul class="listeChoix">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
        </div>
 
        <br>
        <br>
 
        <div class="sousMenueDeroulant">
 
          <button class="choixParmis">
            <img class="fleche" src="images/blocsInverse.png">
            <img class="fleche2" src="images/blocs.png">
            <div class="generalite"><h1>Généralités</h1></div>
          </button>
          <ul class="listeChoix">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
        </div>
 
        <br>
        <br>
 
        <div class="sousMenueDeroulant">
 
          <button class="choixParmis">
            <img class="fleche" src="images/blocsInverse.png">
            <img class="fleche2" src="images/blocs.png">
            <div class="generalite"><h1>Généralités</h1></div>
          </button>
          <ul class="listeChoix">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          </ul>
        </div>
 
      </div>
 
   </aside>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a><span id="changer"></span></a>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#changer::after{
  content:"DEPLIER" ;
    }
 
#changer:hover::after {
  content:"REPLIER";
  #menuDeroulant {display:block ;}; 
  .sousMenueDeroulant {display: block;};
  .listeChoix {display: block;};
}

Le déploiement se fait uniquement sur hover du menue et sous menue et non en survolant de #changer.
Je cherche depuis 2 jours Merci de votre coup de main.

**NoSmoking** · 05/06/2024, 09h54

Bonjour,
est ce que tu as simplement conscience de ce que tu écris en utilisant cette règle imbriquée ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#changer:hover::after {
  content:"REPLIER";
 
  #menuDeroulant {display:block ;}; 
  .sousMenueDeroulant {display: block;};
  .listeChoix {display: block;};
}

et ce compte tenu de la complexité inutile du HTML !

**Philcmoi** · 08/06/2024, 14h58

Merci ce que je demande est imposible à faire sans java script.
Donc hors sujet.

**NoSmoking** · 10/06/2024, 10h41

Merci ce que je demande est imposible à faire sans java script.

sauf que difficile à voir ce que tu veux faire compte tenu du HTML, très exotique, que tu fournis !!!!

**Philcmoi** · 28/06/2024, 13h29

Bon comme je n'ai plus à déplier les informations.
La autre probleme est d'afficher une div gride area caché.
Le survol est bien détecter (couleure verte à sous ligné rouge mais je ne peux pas afficher .cours

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 .entete2 .barreHorizontal2 .coursTemplate:hover {
    text-align: center;
    height: 3em;
    border: #ffffff;
    background-color:green;
    border-bottom:#ff0000 solid;
    .cours {visibility: visible;} 
  }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cours {
    grid-area: cours;
    grid-column: 2/5;
    grid-row: 3/6;
    text-align: left;
    background-color: #F8F9FA;
    z-index: 2;
}
 
.coursTemplate li {
    background-color: #0080ff;
    .cours {visibility: visible;};
}
.cours {visibility: hidden;}

Merci pour vos aides je suis perdue.

**NoSmoking** · 28/06/2024, 16h29

Si tu veux une aide pertinente il faut nous fournir la structure HTML que tu utilises et qui correspond

**Philcmoi** · 28/06/2024, 18h27

Deja merci de m'accordais ton aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
  <div class="container">
    <nav class="entete">
      <ul class="barreHorizontal">
        <li><img src="images/logoCnam.png"><br>Paris</li>
        <li><a href="#" style="text-decoration:none">Accueil</a></li>
        <li><a href="#" style="text-decoration:none">Tableau de bord</a></li>
        <li><a href="#" style="text-decoration:none">Mes cours</a></li>
        <li class="accesDirect"><a href="#" style="text-decoration:none">Accès direct</a>
          <ul class="sousMenu">
            <li><a href="#" style="text-decoration:none">Portail ENF</a></li>
            <li><a href="#" style="text-decoration:none">Site national du Cnam</a></li>
          </ul>  
        </li>
      </ul>
    </nav>
 
    <div class="titre"> <h3>- Présentiel : Architecture et langages Web<br>
                      (2023 - 2024 Semestre 2)</h3>
    </div>
 
  <div class="entete2">
    <ul class="barreHorizontal2">
      <li><a class="coursTemplate" href="#" style="text-decoration:none">Cours</a></li>
      <li><a href="#" style="text-decoration:none">Participants</a></li>
      <li><a class="Notes" href="#" style="text-decoration:none">Notes</a></li>
      <li><a href="#" style="text-decoration:none">Compétences</a></li>
    </ul>
  </div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="cours">
      <div>
        <h2><img src="images/blocs.png">Généralités</h2>
      </div>
      <p>
      <ul>
        <li>
        <a href="#">Description de l'UElangages Web</a>
        </li>
        <li>
        <a href="#">Les séances  auront lieu le jeudi de 18h00 à 21h00 en salle 31.1.03 PC</a>
        </li>
        <li>
        <a href="#">La première séance aura lieu le jeudi 29 février.</a>
        </li>
      </ul>
      </p>
        <p> Précision : Ce cours fait partie de la nouvelle version du certificat Développeur web junior. 
          Dans cette nouvelle version</p>
          <img src="images/messages.png">
    </div>

**NoSmoking** · 28/06/2024, 19h30

Tel que tu t'y prends il aurait fallu que la <div class="cours"> soit enfant direct de l'élément <a class="coursTemplate"> ce qui n'est pas le cas, ils n'ont pas non plus le même parent ce qui aurait permis de cibler avec les sélecteurs + ou ~.

Néanmoins la pseudo-classe :has() peut te sauver en écrivant ce code par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body:has(.coursTemplate:hover) .cours {
  background-color: yellow;
  visibility: visible;
}

Ressource :

La pseudo-classe :has(), je te laisse découvrir
Combinateur de voisins directs, pour info
Combinateur de voisins suivants, pour info

Nota : attention au inter-actions avec les éléments apparaissant qui ne seront pas possible !

**Philcmoi** · 29/06/2024, 13h33

J'ai essayer de metre SPAN cours pour qu'il soit un enfant direct de coursTemplate, comme tu la suggérer.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="entete2">
    <ul class="barreHorizontal2">
      <li><a class="coursTemplate" href="#" style="text-decoration:none">Cours</a></li>
      <li><a href="#" style="text-decoration:none">Participants</a></li>
      <li><a class="Notes" href="#" style="text-decoration:none">Notes</a></li>
      <li><a href="#" style="text-decoration:none">Compétences</a></li>
    </ul>
    <span class=cours>
      <div>
        <h2><img src="images/blocs.png">Généralités</h2>
      </div>
      <p>
      <ul>
        <li>
        <a href="#">Description de l'UE NFA040 Architecture et langages Web</a>
        </li>
        <li>
        <a href="#">Les séances de NFP040 auront lieu le jeudi de 18h00 à 21h00 en salle 31.1.03 PC (au 2 rue Conté).</a>
        </li>
        <li>
        <a href="#">La première séance aura lieu le jeudi 29 février.</a>
        </li>
      </ul>
      </p>
        <p> Précision : Ce cours fait partie de la nouvelle version du certificat Développeur web junior. 
          Dans cette nouvelle version, les modules NFA016 (développement web côté client) 
          et NFA031 (programmation avec java) sont remplacés par NFA040 : Architecture et langages Web 
          et NFA041 : Programmation Javascript</p>
          <img src="images/messages.png">
    </span>
</div>

Mais le problemme reste le même ???

**Philcmoi** · 29/06/2024, 19h01

Voila ce que j'ai fait.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="entete2">
    <ul class="barreHorizontal2">
      <li><a class="coursTemplate" href="#" style="text-decoration:none">Cours
      <span class="cours">
      <div>
        <h2><img src="images/blocs.png">Généralités</h2>
      </div>
      <p>
      <ul>
        <li>
        <a href="#">Description de l'UE NFA040 Architecture et langages Web</a>
        </li>
        <li>
        <a href="#">Les séances de NFP040 auront lieu le jeudi de 18h00 à 21h00 en salle 31.1.03 PC (au 2 rue Conté).</a>
        </li>
        <li>
        <a href="#">La première séance aura lieu le jeudi 29 février.</a>
        </li>
      </ul>
      </p>
        <p> Précision : Ce cours fait partie de la nouvelle version du certificat Développeur web junior. 
          Dans cette nouvelle version, les modules NFA016 (développement web côté client) 
          et NFA031 (programmation avec java) sont remplacés par NFA040 : Architecture et langages Web 
          et NFA041 : Programmation Javascript</p>
          <img src="images/messages.png">
      </span>
 
      </a></li> ect ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.cours{ 
    grid-area : cours;
    grid-column: 2/5;
    grid-row: 4/7;
    text-align: left;
    background-color: #047df6;
    z-index: 2;
    /* display:none; */
}
 
.cours span {display:none}
 
a.coursTemplate:hover span{
 
    .cours {
    display:block;
    width: 80px;
    height: 80px}
}

Probleme le texte reste figer sur l'écran. ???

**Philcmoi** · 30/06/2024, 10h55

Il sufit de faire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<li class="coursTemplate"><a  href="#" style="text-decoration:none">Cours
<div class="cours">
ect ...
<div>

**NoSmoking** · 01/07/2024, 16h37

J'ai essayer de metre SPAN cours pour qu'il soit un enfant direct de coursTemplate, comme tu la suggérer.

Oui mais non car j'ai aussi palé de structure très exotique et celle là l'est encore plus.
Une fois que le parseur HTML à fait son boulot ta structure ne ressemble plus à cela, elle ressemblera plutôt à :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="entete2">
    <ul class="barreHorizontal2">
      <li><a class="coursTemplate" href="#" style="text-decoration:none">Cours...
      <span class="cours">
      <div>
        <h2><img src="images/blocs.png">Généralités</h2>
      </div>
      <p>
      </p></span></a><ul><a class="coursTemplate" href="#" style="text-decoration:none">
        </a><li><a class="coursTemplate" href="#" style="text-decoration:none">
        </a><a href="#">Description de l'UE NFA040 Architecture et langages Web</a>
        </li>
        <li>
        <a href="#">Les séances de NFP040 auront lieu le jeudi de 18h00 à 21h00 en salle 31.1.03 PC (au 2 rue Conté).</a>
        </li>
        <li>
        <a href="#">La première séance aura lieu le jeudi 29 février.</a>
        </li>
      </ul>
      <p></p>
        <p> Précision : Ce cours fait partie de la nouvelle version du certificat Développeur web junior.
          Dans cette nouvelle version, les modules NFA016 (développement web côté client)
          et NFA031 (programmation avec java) sont remplacés par NFA040 : Architecture et langages Web
          et NFA041 : Programmation Javascript</p>
          <img src="images/messages.png">
 
 
      </li> ect ...
  </ul></div>

et là patraque c'est la catastrophe certains éléments sont déplacés.

Il faut toujours vérifier son code HTML, que cela fonctionne ou pas !

Afficher menu et sous menu avec hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager