Remplacer un hover(CSS) par un click(JS)

Fermé
Noemie - 23 juil. 2022 à 13:47
 Pitet - 24 juil. 2022 à 12:06

Bonjour,

J'ai créé un menu avec sousmenus en HTML/CSS. 

Le submenu se déroule au hover. J'aimerais qu'il fonctionne au clic, donc avec du JS. 

Est-ce que quelqu'un pourrait m'aider à faire ça ? J'essaye depuis 2j mais j'ai vraiment du mal avec le JS..

Voici mon menu dans le html: 

  <nav class="navigation">
      <ul class="mainmenu">

        <li><a href="2022">2022</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>  

        <li><a href="">2021</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>

        <li><a href="">2020</a>
          <ul class="submenu">
            <li><a href="">photo1.jpg</a></li>
            <li><a href="">photo2.jpg</a></li>
            <li><a href="">photo3.jpg</a></li>
          </ul>
        </li>

et le hover dans mon css : 

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;

}  


Macintosh / Chrome 102.0.0.0

1 réponse

Bonjour,

Une solution possible sans js via l'état :focus en css : https://jsfiddle.net/ma0fLpz9/

Une solution avec js : https://jsfiddle.net/ma0fLpz9/1/

0