Ouverture des sous menu au click par ThierryMadar - page 1

Bonjour,

J'ai un menu à 2 boutons.

J'aimerais ouvrir les sous menus non pas au survol, mais à la souris.

Comment faire, en html, css ou js.

Voici mon 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>

Merci pour votre aide

ThierryMadar

20 février 2024 à 20:25:24

ChrisLebure

20 février 2024 à 21:05:40

Bonsoir,

voici une solution :

https://www.w3schools.com/howto/howto_js_dropdown.asp

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

CléretGrégorie

4 mars 2024 à 11:09:06

Yo, pour la même mais avec que du ccs please

<!DOCTYPE html>
<html>
<head>
    <title>PAX_Aceuil</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<div class="1ligne">
    <ul>
        <li class="deroulant"><a href="#">Cours Complets &ensp;</a>
            <ul class="sous">
                <li><a href="#">Cours HTML et CSS</a></li>
                <li><a href="#">Cours JavaScript</a></li>
                <li><a href="#">Cours PHP et MySQL</a></li>
            </ul>
        </li>
        <li class="deroulant"><a href="#">Articles &ensp;</a>
            <ul class="sous">
                <li><a href="#">CSS display</a></li>
                <li><a href="#">CSS position</a></li>
                <li><a href="#">CSS float</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">A propos</a></li>
      </ul>
</div>
<div class="2ligne">

</div>
<div class="img_acceuil"></div>
</nav>
</body>
</html>

body{
    background-color: white;
    text-align: justify;
}

nav{
    background-color: #68AAFE;
    background-image: url(Resource/modele-banniere-pour-journee-paix_23-2148669164.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center;

    height: 300px;
    width: 100%;

    margin: 0 auto;
    position: sticky;
    top: 0px;
}

img{
    height: 200px;
}

*{
    margin: 0px;
    padding: 0px;
    font-family: Avenir, sans-serif;
}

nav ul{
    list-style-type: none;
}

nav ul li{
    float: left;
    width: 25%;
    text-align: center;
    position: relative;
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block;
    text-decoration: none;
    color: white;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
}

nav a:hover{
    color: rgb(62, 0, 161);
    border-bottom: 2px solid white;
}

.sous{
    box-shadow: 0px 1px 2px #CCC;
    background-color: rgb(17, 0, 255);
    position: absolute;
    width: 100%;
    z-index: 1000;
}

nav ul li .sous{
    display: none;
}

nav ul li:target .sous{
    display: block;
}

nav ul li:hover .sous{
    display: block;
}
.sous li{
    float: none;
    width: 100%;
    text-align: left;
}
.sous a{
    padding: 10px;
    border-bottom: none;
}
.sous a:hover{
    border-bottom: none;
    background-color: rgba(78, 255, 246, 0.445);
}
.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}

.conteneur{
  margin: 50px 20px;
  height: 1500px;
}

Ouverture des sous menu au click

Ouverture des sous menu au click

Supprimer

Modérer

Signaler le message aux modérateurs