Boutons du menu qui s'ouvrent au click

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Boutons du menu qui s'ouvrent au click

Message par xmfrance Mar 20 Fév 2024 - 20:04

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum :  

Description du problème

Bonjour, je suis nouveau ici et novice en langage html, css et php.

Je suis entrain de faire une page ou il y a un menu en haut avec 2 boutons, et je suis entrain de développer en local sur wamp.
Aujourd'hui, les sous menu s'ouvrent au passage de la souris, mais j'aimerais qu'ils s'ouvrent au click, et je ne sais pas comment faire.

Je vous met mon code pour vous donner une idée.
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
<script>
            jQuery(function(){
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200 ) {
                            $('#scrollUp').css('right','10px');
                        } else {
                            $('#scrollUp').removeAttr( 'style' );
                        }
 
                    });
                });
            });
</script>
<style>



HR {
  background: ;
  padding: 0 0px;
  position: center;
}

 {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #ff7643;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: left;
  padding: 14px 12px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: ;
}

.dropdown .dropbtn {
  font-size: 12px;  
  border: 2px;
  outline: none;
  color: #f9f9f9;
  padding: 14px 12px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: ;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ccc;
  width: 500px;
  left: ;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

.dropdown-content .header {
  background: ;
  padding: ;
  color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */

.row {
    height: 300px;
    overflow:auto;
}

.column {
  float: left;
  width: 150px;
  padding: ;
  background-color: #ccc;
  height: ;
}

.column a {
  float: none;
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 33%;
    height: 50%;
  }
}

/* 2eme bouton*/

.dropdown2 {
  float: center;
  overflow: ;
}

.dropdown2 .dropbtn2 {
  font-size: 12px;  
  border: 2px;
  outline: none;
  color: #f9f9f9;
  padding: 14px 12px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown2:hover .dropbtn2 {
  background-color: ;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #ccc;
  width: 700px;
  left: ;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

.dropdown-content2 .header {
  background: ;
  padding: ;
  color: #ddd;
}

.dropdown2:hover .dropdown-content2 {
  display: block;
}

/* Create three equal columns that floats next to each other */

.row2 {
    height: 300px;
    overflow:auto;
}

.column2 {
  float: left;
  width: 220px;
  padding: ;
  background-color: #ccc;
  height: ;
}

.column2 a {
  float: none;
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.column2 a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row2:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 250px) {
  .column2 {
    width: 50%;
    height: ;
  }
}


</style>
</head>
<body style="background-color:white;">

<div class="navbar">
  
  <div class="dropdown">
    <button class="dropbtn">Chapitres
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        
      <div class="row">
        <div class="column">
          

                <a href="http://wordpress/Livre-de-jeremie-1/">Livre de Jérémie 1</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-2/">Livre de Jérémie 2</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-3/">Livre de Jérémie 3</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-4/">Livre de Jérémie 4</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-5/">Livre de Jérémie 5</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-6/">Livre de Jérémie 6</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-7/">Livre de Jérémie 7</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-8/">Livre de Jérémie 8</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-9/">Livre de Jérémie 9</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-10/">Livre de Jérémie 10</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-11/">Livre de Jérémie 11</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-12/">Livre de Jérémie 12</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-13/">Livre de Jérémie 13</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-14/">Livre de Jérémie 14</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-15/">Livre de Jérémie 15</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-16/">Livre de Jérémie 16</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-17/">Livre de Jérémie 17</a><HR ALIGN=CENTER WIDTH="140">

              
        </div>
        <div class="column">
          
                <a href="http://wordpress/Livre-de-jeremie-18/">Livre de Jérémie 18</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-19/">Livre de Jérémie 19</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-20/">Livre de Jérémie 20</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-21/">Livre de Jérémie 21</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-22/">Livre de Jérémie 22</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-23/">Livre de Jérémie 23</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-24/">Livre de Jérémie 24</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-25/">Livre de Jérémie 25</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-26/">Livre de Jérémie 26</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-27/">Livre de Jérémie 27</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-28/">Livre de Jérémie 28</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-29/">Livre de Jérémie 29</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-30/">Livre de Jérémie 30</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-31/">Livre de Jérémie 31</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-32/">Livre de Jérémie 32</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-33/">Livre de Jérémie 33</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-34/">Livre de Jérémie 34</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-35/">Livre de Jérémie 35</a><HR ALIGN=CENTER WIDTH="140">
                


        </div>
        <div class="column">
          
                <a href="http://wordpress/Livre-de-jeremie-36/">Livre de Jérémie 36</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-37/">Livre de Jérémie 37</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-38/">Livre de Jérémie 38</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-39/">Livre de Jérémie 39</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-40/">Livre de Jérémie 40</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-41/">Livre de Jérémie 41</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-42/">Livre de Jérémie 42</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-43/">Livre de Jérémie 43</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-44/">Livre de Jérémie 44</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-45/">Livre de Jérémie 45</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-46/">Livre de Jérémie 46</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-47/">Livre de Jérémie 47</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-48/">Livre de Jérémie 48</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-49/">Livre de Jérémie 49</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-50/">Livre de Jérémie 50</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-51/">Livre de Jérémie 51</a><HR ALIGN=CENTER WIDTH="140">
                <a href="http://wordpress/Livre-de-jeremie-52/">Livre de Jérémie 52</a><HR ALIGN=CENTER WIDTH="140">
        </div>
      </div>
    </div>
  </div>

  <div class="dropdown2">
    <button class="dropbtn2">Catégories
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content2">
                        <h2><center>Listes des Catégories</h2></center>

      <div class="row2">
        <div class="column2">

                <a href="#">Livre de la Genèse</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de l'Éxode</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre du Lévitique</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre des Nombres</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre du Deutéronome</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Josué</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre des Juges</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Ruth</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Premier Livre de Samuel</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Deuxième Livre de Samuel</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Premier Livre des Rois</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Deuxième Livre des Rois</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Premier Livre des Chroniques</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Deuxième Livre des Chroniques</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Esdras</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Néhémie</a><HR ALIGN=CENTER WIDTH="200">



        </div>
        <div class="column2">
          
                <a href="#">Livre de Tobie</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Judith</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Esther</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Premier Livre des Martyrs d'Israël</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Deuxième Livre des Martyrs d'Israël</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Job</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre des Proverbes</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">L'ecclésiaste</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Cantique des cantiques</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de la Sagesse</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Ben Sira le Sage</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Isaïe</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Jérémie</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre des lamentations de Jérémie</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Baruch</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Lettre de Jérémie</a><HR ALIGN=CENTER WIDTH="200">


        </div>
        <div class="column2">
          
          
                <a href="#">Livre d'Ezekiel</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Daniel</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Osée</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Osée</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Amos</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Abdias</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Jonas</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Michée</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Nahum</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Habaquc</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Sophonie</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre d'Aggée</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Zacharie</a><HR ALIGN=CENTER WIDTH="200">
                <a href="#">Livre de Malachie</a><HR ALIGN=CENTER WIDTH="200">


        </div>
      </div>
    </div>
  </div>
</div>

<div id="scrollUp">
<a href="#top"><img src="http://wordpress/wp-content/uploads/2024/01/haut-e1707818845630.png"/></a>
</div>

</body>
</html>

Je vous remercie pour votre aide


Dernière édition par xmfrance le Lun 26 Fév 2024 - 11:46, édité 1 fois
xmfrance

xmfrance
Nouveau membre

Messages : 3
Inscrit(e) le : 20/02/2024

xmfrance a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons du menu qui s'ouvrent au click

Message par Mig Mer 21 Fév 2024 - 10:27

Je ne sais pas trop mais peut-être remplacer les "hover" par "active"
Mig

Mig
**

Messages : 59
Inscrit(e) le : 15/09/2011

http://forum-moins.forumactif.com/
Mig a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons du menu qui s'ouvrent au click

Message par Chacha Lun 26 Fév 2024 - 9:07

Boutons du menu qui s'ouvrent au click 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Boutons du menu qui s'ouvrent au click UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69444
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons du menu qui s'ouvrent au click

Message par xmfrance Lun 26 Fév 2024 - 11:41

Bonjour et désolé pour cette semaine hors ligne, j’étais en vacances à l'étranger.
j'ai essayé mais ça ne marche pas!
Merci
xmfrance

xmfrance
Nouveau membre

Messages : 3
Inscrit(e) le : 20/02/2024

xmfrance a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons du menu qui s'ouvrent au click

Message par xmfrance Lun 26 Fév 2024 - 11:43

en fait, j'ai ajouté en CSS des temps de réponses et maintenant, le menu ne s'ouvre pas instantanément.
Merci
xmfrance

xmfrance
Nouveau membre

Messages : 3
Inscrit(e) le : 20/02/2024

xmfrance a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum