Afficher menu et sous menu avec hover

Version imprimable

Bonjour.
voila mon code:

Code:

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:

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

Code:

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. :ptdr:

05/06/2024, 09h54
NoSmoking
Bonjour,
est ce que tu as simplement conscience de ce que tu écris en utilisant cette règle imbriquée ?
Code:

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 !
08/06/2024, 14h58
Philcmoi

Merci ce que je demande est imposible à faire sans java script.
Donc hors sujet.
10/06/2024, 10h41
NoSmoking

Citation:

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 !!!!

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:

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:

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.

28/06/2024, 16h29
NoSmoking

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

Deja merci de m'accordais ton aide.

Code:

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:

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>

28/06/2024, 19h30
NoSmoking
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:

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 !

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

Code:

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 ??? ;)

Voila ce que j'ai fait.

Code:

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:

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. ???

Il sufit de faire

Code:

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

Citation:

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:

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 !