5569 sujets

Sémantique web et HTML

Menu déroulant en cliquant

Bonjour tout le monde,

Je suis professeur de maths et je me suis mis en tête de faire mon site internet pour y mettre les documents que je propose à mes élèves : www.maths-cheval.com

Ma difficulté se situe dans mon menu déroulant :
Mon but est que l'utilisateur clique pour ouvrir au fur et à mesure les sous-menus de mon menu.

Le problème est que si j'ouvre un sous-menu le menu parent se ferme.


<ul>

    <!-- TERMINALE STMG -->
    <li class = "classes">
        <strong>Terminale STMG :</strong>
        <a href="#TermSTMG">&#9668;</a>                    
    </li>

    <ol id = "TermSTMG" >
        <li class="themes"> Les taux d'évolution</li>

        <!-- TMG - B - LES SUITES -->
        <li class="themes"> 
            <strong>Les suites</strong>
            <a href="#TermSTMG-B_Les_Suites">&#9668;</a>     
        </li>
                        
        <ol id = "TermSTMG-B_Les_Suites">
            <li class="competences">Nature, raison, 1er termes</li>
            <ul>
                <li class="pages">Méthode et exemples</li>
                <li class="pages">Exercices, STMG, 2018</li>
            </ul>
                               
            <li class="competences">Formule explicite, calcul d'un terme</li>
        </ol>   


        <li class="themes"> Les fonctions</li>
        <li class="themes"> Les probabilités</li>    
            
    </ol>

</ul>



#TermSTMG, #TermSTMG-B_Les_Suites
{
	height: 0;
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition:transform 1s ease;
}

#TermSTMG-B_Les_Suites:target, #TermSTMG:target
{
	transform: scaleY(1);
	height : auto;
}

Modifié par CHEVAL (10 Jun 2019 - 11:08)
Bonjour. Si vous tenez absolument à faire votre menu vous-même, avant de vous lancer dans des codes que vous maîtrisez mal je vous conseille de vous pencher sur les éléments html <details> et <summary> (cf. les spécifications MDN).

Si vraiment vous voulez vous embêter je vous donne un exemple tiré de l'un de mes scripts :
- l'exemple :
.accordion-js
- le script (en jQuery) : Github, Menu accordéon
Modifié par Olivier C (10 Jun 2019 - 20:48)
Merci beaucoup pour ta réponse rapide.
Je teste de suite ce que tu me proposes et je te dis quoi.
Administrateur
Bonjour,

je recommande chaudement les scripts accessibles (aux personnes handicapées et aux autres, donc fonctionnant à la souris, au clavier, avec des technologies d'assistance genre lecteurs d'écran et synthèse vocale et/ou plage Braille) du sieur Nicolas : https://van11y.net/fr/
On y trouve un accordéon (ici ce sera imbriqué, plus dur mais on peut déjà l'utiliser sur 1 niveau et montrer les niveaux 2 et 3 à la fois.

Attention avec height: auto et transition : a priori ça va pas fonctionner (un jour ça devrait).
Sujet clos
Aller à