Bonjour à tous, 

Je n'arrive à provoquer le replis d'un menu déroulant après un clip sur l'un des items du menu lorsque celui ci est déroulé. 

Voici le code associé: 

HTML:

                        <ul id="menu-accordeonJ">
                            <li>
                                <a href="#!page-accueil" class="page-link-active">accueil</a>
                                <ul>
                                    <li>
                                        <a href="#page1">page1</a>
                                    </li>
                                    <li>
                                        <a href="#!page2" class="">page2</a>
                                    </li>
                                    <li>
                                        <a href="#!page3" class="">page3</a>
                                    </li>
                                    <li>
                                        <a href="#!page4" class="">page4</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>

CSS

/menu-accordeon Jaune/

#menu-accordeonJ {
padding: 0;
margin: 0;
list-style: none;
/text-align: center;/
text-align: left;
/width: 142px;/
width: 180px;
}

#menu-accordeonJ ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}

#menu-accordeonJ li {
background-color: #565656ff;
}

#menu-accordeonJ li li {
max-height: 0;
overflow: hidden;
transition: all .5s;
border-radius: 0;
background: #444;
box-shadow: none;
border: none;
margin: 0
}

#menu-accordeonJ a {
display: block;
text-decoration: none;
color: #fff;
padding: 8px 0;
font-family: verdana;
font-size: 1.2em
}

#menu-accordeonJ ul li a,
#menu-accordeonJ li:hover li a {
font-size: 1em
}

#menu-accordeonJ li:hover {
background: #ffcc00
}

#menu-accordeonJ li li:hover {
background: #ffcc00;
}

#menu-accordeonJ ul li:last-child {
border: none;
}

#menu-accordeonJ li:hover li {
max-height: 15em;
}

Par avance merci pour votre aide. 

Rom

-
Edité par RomRom5 8 décembre 2017 à 11:40:43

Bonjour,

1) Ton problème au click

Si tu veux que quelque chose se passe lorsque tu cliques, il va falloir utiliser du JavaScript.

Tu peux y arriver assez simplement en ajoutant un attribut dans ton html sur les éléments qui t'interessent.

pour exemple, voilà ce que j'ai ajouté dans ton code ;

<ul>
//Devient :
<ul id="sous-menu" onclick="style.display = 'none'">
/* J'ajoute un ID à l'élément (utile plus tard)
Au clic sut l'élément, je change la valeur display à "none",
ce qui va cacher l'élément.
*/

//Ensuite je modifie la ligne précédente :
<a href="#!page-accueil" class="page-link-active">accueil</a>
//Qui devient :
<a href="#!page-accueil" onmouseover="document.getElementById('sous-menu').style.display = 'block'" class="page-link-active">accueil</a>
/* Au passage de la souris, je vais chercher l'élément avec l'ID que j'ai ajouté.
A cet élément je vais remodifier le display pour qu'il passe à "block"
*/

2)Commentaires CSS

Une simple remarque en plus, j'ai vu que dans ton CSS tu utilisais tes commentaires comme ceci:

/ commentaire /

Je ne sais pas si tu n'aura pas des problèmes avec cette notation que je ne connais pas. A toi de voir mais pour ma part je te dirais de les écrires plutot comme ceci :

/* commentaire */

Ou encore mieux, puisque c'est pour commenter une seule ligne :

// commentaire

Voilà, j'espère avoir pu t'aider.

Biensur il y a beaucoup d'autres façons de faire le JS (tu peux meme faire tout l'accordéon en JS ou jQuery et y ajouter des effets de lenteur au moment de l'ouverture/fermeture si tu veux)

Je te laisse chercher ce qui te convient le mieux.

-
Edité par Anakinyo 9 décembre 2017 à 1:44:30

Bonjour Anakino, 

Merci pour ta réponse, un élément m'échappe, car les informations qui se trouvent entre les balises <span> apparaissent comme du texte dans la page web. 

Y a t'il d'autre éléments à insérer dans le code? 

au sujet des commentaires, je n'avais pas prêté attention à cela en copiant le code, mais il y a bien /* dans mon code, merci pour ton attention. 

Bonjour,

juste un truc :

Ou encore mieux, puisque c'est pour commenter une seule ligne : // commentaire

Si on est en CSS, c'est faux. C'est accepté par la plupart des préprocesseurs de CSS, mais sinon, de base, ce n'est pas un commentaire valide.

Bonjour,

Merci pour la correction dans ce cas Lamecarlate.

RomRom5 a écrit:

Merci pour ta réponse, un élément m'échappe, car les informations qui se trouvent entre les balises <span> apparaissent comme du texte dans la page web.

Oups, ne prete pas attention à la balise span, elle n'est pas sensée être là. J'avais essayé de mettre en couleur les bouts de code que j'avais ajouté pour les faire ressortir mais ça ne fonctionne pas quand on le fait dans du code. J'avais remarqué mais ai oublié d'en retirer une apparemment. Toutes mes excuses.

En dehors de ça ton problème est résolu ?

effectivement ca fonctionne mieux sans la balise <span>, le menu se ferme bien mais ne se redéploie  plus si on repasse la souris...

Y aurait il une solution à cela?

par avance merci pour ta réponse.

Rom25

après dans le css je vois aussi un autres problème.

#menu-accordeonJ li li:hover {

}

Quand on veut atteindre un enfant il faut le parent complet comme ceci :

#menu-accordeonJ ul li ul li:hover {

}

Il faut être très précis car un li ne peut pas se trouver dans un autre li sans un ul sinon y a une grosse erreur de construction

Je te conseille je site d'un des membre @Frog qui est très explicite pour faire une bonne structure de menu déroulant :

FrogWeb

Bonne chance

> Quand on veut atteindre un enfant il faut le parent complet comme ceci :

C'est faux.

> Il faut être très précis car un li ne peut pas se trouver dans un autre li sans un ul sinon y a une grosse erreur de construction

Ça, c'est techniquement vrai, mais le CSS n'a pas besoin de ça. Inutile d'écrire toute la hiérarchie du HTML dans le CSS.

Tu t'imagines si on devait tout écrire depuis html > body > section#main > nav > #menu etc ?

RomRom5 a écrit:

effectivement ca fonctionne mieux sans la balise <span>, le menu se ferme bien mais ne se redéploie  plus si on repasse la souris...

Si ça doit fonctionner, j'avais prévu ça normalement dans le code que je t'ai donné. Relis bien le commentaire que j'ai écrit (ligne 13/14).

Tu dois donner un ID à ton <ul> (ligne 3), puis sur le lien qui apparait constamment, tu ajoute un attribut "onmouseover" (ligne 12), c'est ici qu'au passage de la souris le menu doit se redéployer.

-
Edité par Anakinyo 12 décembre 2017 à 6:18:58

Oh ben j'avais pas bien lu les précédents messages.

On n'a pas du tout besoin de JS pour faire un menu déroulant Là, il faut se poser la question de pourquoi les href des liens contiennent "#!page1". C'est un site en une page et on va vers des ancres ?

Est-ce qu'on peut avoir une page en ligne pour comprendre ?

(parce que même si le code proposé par Anakinyo fonctionne, ce n'est pas très bien de mettre un onmouseover, on préfère externaliser le JS et utiliser des écouteurs, dans un souci de séparation du fond du comportement)

Voici le site en cours de développement: 

http://82.226.170.156/BFC/index.html