Partage

Ouvrir un menu déroulant au clic

Sujet résolu

29 février 2016 à 16:12:42

Bonjour !

Je recherche actuellement de l'aide pour rendre mon menu CSS dynamique au clic et non au survol.

Voici le code HTML ( ssm veut dire sous menu )

<!DOCTYPE html>
<html>
    
 <head>
    
     <meta charset="utf-8" />
         <title>LE RETOUR DU DEMON</title>
         <link type="text/css" rel="stylesheet" href="css/style.css" />
         <script type="text/javascript" src="js/jquery.js"></script>
         <script type="text/javascript" src="js/script.js"></script>

</head>



<div id="menu">
    <div class="in">
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Pourquoi ?</a></li>
            <li id="ssm"><a href="#">En savoir plus</a>
                <ul>
                    <li><a href="#">Espèces</a></li>
                    <li><a href="#">Menaces</a></li>
                    <li><a href="#">Cartes des menaces</a></li>
                </ul>
    
            </li>
    
            <li><a href="#">Les actions</a></li>
            <li><a href="#">Actualités</a></li>
            <li><a href="#">Signer la pétition</a></li>
    </ul>
    </div>
</div>

   
    
</html>

Le code CSS

* {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #fff;
 font-size: 14px;
 padding: 0px;
 border: 0px;
 margin: 0px;
 }

body {
 background-color: #15110C;
 }

div {
 position : relative;
 }

.in {
 width: 900px;
 margin: auto;
 }

li {
 list-style-position: inside;
 list-style-type: none;
 }

#menu {
 height: 50px;
 }

#menu li {
 float: left;
 width: 150px;
 height: 50px;
 }



#menu li a {
 display: block;
 background-color: #F90;
 color: #222211;
 text-transform: uppercase;
 text-decoration: none;
 text-align: center;
 line-height: 50px;
 width: 100%;
 height: 100%;
 border-top : 1px solid #ffbb44;
 border-bottom: 1px solid #dd8800;
 }
 
#menu li a:hover {
 background: #ffbb44;
 }

#ssm ul{  
  visibility: hidden;
  }


/* #ssm:hover ul{ 
   visibility: visible;
} */

Et le code javascript ( qui est totalement faux, je dois bien l'avouer haha )

$(document).ready(function() {

    $("#ssm ul").click(function() {
    $("#ssm ul").hasClass("#ssm ul:active");
        visibility: visible;
    });
    
});

Merci d'avance !

Loan.

AxelHuberty

29 février 2016 à 16:28:37

Je ne suis pas sur de comprendre ce que tu veux faire mais essayons :

document.getElementById('ssm').addEventListener('click', function(event){
		var li = event.currentTarget.childNodes[2];
                var display = li.style.display;
		if(display === 'block')
			display = 'none';
		else
			display = 'block';

		li.style.display = display;
	});

Attention avec childNodes[2], cela est directement dépendant de ta structure actuel, je n'ai pas cherché a compliqué les choses ici.

PS : cela n'est pas possible avec un selector css, voici la liste :

http://www.w3schools.com/cssref/css_selectors.asp

-
Edité par AxelHuberty 29 février 2016 à 16:29:14

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

Densha59

29 février 2016 à 16:36:44

Merci AxelHuberty mais malheureusement cela ne résout pas le problème.

Voici l'intitulé exact de mon tp :

" L’affichage du sous-menu au survol est une habitude sur les ordinateurs.

Sur les dispositifs tactiles, l’affichage du sous-menu se fait suite à un clic sur l’élément de menu correspondant.

Ce changement de fonctionnement est réalisé grâce à CSS et JavaScript.

Lors du clic sur un élément de menu, une classe – nommée active – lui est attribuée à cet élément de menu avec JavaScript.

Modifiez le code CSS pour que le sous-menu soit montré quand l’élément de menu correspondant a la classe active. "

Merci.

Loan.

AxelHuberty

29 février 2016 à 16:43:51

Premier détail, si c'est un exercice que l'on te demande, utilise vraiment le javascript et pas JQuery

Avec ce que je t'ai donné, tu peux facilement modifier mon code pour y arriver. Il te suffit de créer une règle CSS pour afficher une élément qui est caché à la base et d'ajouter cette règle au clic. Mon code fait cela sans passer par une classe.

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

Densha59

29 février 2016 à 17:24:49

Je dois t'avouer qu'en temps que néophyte du javascript, je ne comprends absolument rien à ton code.

J'ai dans l'obligation d'utiliser cette sorte de notation :

$("img").click(function() {
$(this).addClass("rouge");
});

Je suppose que c'est du jQuery ?

Mon code Javascript ressemble à ça actuellement :

$(document).ready(function() {

    $("#ssm").click(function() {
        $("#ssm ul").addClass("#la_visiblite");
    });
    
});

Et j'ai rajouté une classe CSS

#la_visibilite{

    visibility: visible;

}

AxelHuberty

29 février 2016 à 20:37:44

Tu étudies où exactement ? On t'apprends à travailler avec JQuery sans connaitre le javascript ?

Ta "classe CSS" est en fait lié a un id. Le dièse (#) est pour préciser un id et non une classe. Ta règle devrait plutôt être

.la_visibilite{
    visibility: visible;
}

Pour ton code JQuery, oui c'est plus facile pour modifier les classes car il a des méthodes pour cela.

Pour ma part, j'ajouterai la classe .active sur ssm pour se faciliter la vie (plutôt que de descendre aux ul). Ainsi, tu as juste a faire :

$(document).ready(function() {
    $("#ssm").click(function() {
        var ssm = $(this);
        if(ssm.hasClass('active'))
             ssm.removeClass("active");
        else
             ssm.addClass("active");
    }); 
});

Pour la css, il suffit de créer une règle pour dire qu'une ul contenu dans l'entité ssm et visible seulement si la classe active est présent :

#ssm.active ul{
  display: block;
}

#ssm ul{
  display: none;
}

-
Edité par AxelHuberty 1 mars 2016 à 9:29:54

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

Densha59

1 mars 2016 à 1:07:56

J'étudie en IUT à Calais.

Oui, c'est notre second TP dans ce langage.

Voici nos deux tp en archive winrar si ça t'interesse : http://www111.zippyshare.com/v/dNExLNvt/file.html

J'ai testé ton code, que ce soit en copier coller ou en effectuant pas mal de bricolage rien y fait. Je désespère un peu. :lol:

AxelHuberty

1 mars 2016 à 9:29:32

Si tu as mis mon code JQuery dans ton script.js, il faut pas oublier que rien n'existe à ce moment là. Et que JQuery ne fait que modifier le DOM, donc il faut inclure ton script en fin de body, body qui n'est pas présent dans ton code.

En effet, il manque deux parenthèses dans mon script, mais rien de bien grave, je vais corriger.

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

Densha59

1 mars 2016 à 15:23:51

Les deux lignes de script dans le <head> ne suffisent pas ?

 <script type="text/javascript" src="js/jquery.js"></script>
         <script type="text/javascript" src="js/script.js"></script>

J'ai intégré un body dans le html.

AxelHuberty

1 mars 2016 à 15:31:23

Autant pour moi, je vosi que tu utilises $(document).ready(function(){...}); Cela attends que la page soit chargé avant d'executer la fonction.

Dans ce cas je ne comprends pas, j'ai fait le test et cela fonctionne très bien chez moi. Si tu n'as pas d'erreur dans la console, je te demanderai de poster tout ton code pour voir ce qui n'est pas correcte.

-
Edité par AxelHuberty 1 mars 2016 à 15:33:07

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

Densha59

1 mars 2016 à 16:12:51

Super, ça fonctionne parfaitement maintenant !

Pour le coup j'avais les scripts dans le <head> et le <body>, j'ai supprimé ceux du body et tout fonctionne !

Merci beaucoup !

Maintenant si je veux faire ça pour tous les autres onglets, je dois créer une " version alternative de " ssm " " pour chaque onglet non ?

HassaneKaba3

1 février 2023 à 9:04:03

Bonjour comment crée un menu deroulant en html et css

Lamecarlate

1 février 2023 à 9:32:12

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

(lire le sujet, qui est résolu, et donne la solution, c'est un plus)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Ouvrir un menu déroulant au clic

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs