Partage

Liste déroulante html css sur 2 colonnes

Sujet résolu

9 février 2024 à 12:49:48

Bonjour,

Ceci est mon premier post ici.

Je suis novice en html, css et js, j'ai 62 ans et je suis entrain de monter un site religieux catholique dans lequel il y aura beaucoup d'information , des livres téléchargeable en pdf et epub, ainsi que l'ancien testament, le nouveau testament et les psaumes, et beaucoup d'autre choses.

Pour la bible, il y a beaucoup de catégories, plus d'une trentaine, comme le livre de la genèse, le livre de l'exode etc etc.

Pour chaque catégories, il y a un certain nombre de chapitre. Dans le livre de la genèse, il y en a 50. Voir image:

Je recherche donc un code HTML CSS et éventuellement JS en plus pour faire le genre de menu à 2 colonnes automatique en fonction de la quantité de chapitres à afficher.

Cela fait plus d'une semaine que je recherche, sans succès.

Ce site sera sur wordpress, et avant de rechercher à mettre un menu, j'ai essayé beaucoup de plugins différent, mais toujours sans succès.

Je n'ai pas de lien à vous donner car je ne suis pour le moment que en local avec wamp.

J'avais trouvé un code de chez vous, vieux de 2013 créé pas FrogWeb.

Au niveau look, c'est tout a fait ce que je recherche, mais il faut l'adapter pour que la liste s'affiche sur 2 colonnes, et supprimer 3 des 4 boutons principaux ainsi que les sous menus pour afficher directement les liens des chapitres correspondant à la catégorie affichée, et modifier ce code, et le css, je ne sais pas faire.

Voici le code.

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>menu</title>
    <style>
html,body {
  padding:0;
  margin:0;
  height:100%;
}
#menu, #menu ul {
  padding:0;
  margin:0;
  list-style: none;
  text-align: center;
}

#menu li {
  display:inline-block;
  vertical-align: top;
  position: relative;
}
#menu li li {
  display:inherit;
}
#menu a {
  display:block;
  padding:5px 50px;
  text-decoration: none;
  color:#fff;
  font-family:arial;
}
#menu ul li a {
  padding:5px 8px;
}
#menu ul {
  position: absolute;
  z-index: 1000;
  min-width:100%;
  white-space: nowrap;
  text-align: left;
}
#menu ul ul {
  left:100%;
  top:0;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  transition: 0.3s all;
}
#menu ul li:hover ul {
  max-width: 30em;
}
#menu ul li {
  max-height:0;
  overflow: hidden;
  transition:all 0.8s;
}
#menu li li li {
  max-height: inherit;
}
#menu li:hover li {
  max-height: 15em;
  overflow: visible;
}
/* background des liens menus */

.orange {
background-color: #F6AD1A;
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
.orange li {
    background-color:#9F391A;
}
.orange li:hover {
    background:#F6AD1A
}

#menu li:hover {
    background-image:none;
}
#menu li:hover a, .menu li li:hover a {
    color:#000
}
#menu li:hover li a, #menu li:hover li li a {
    color:#fff
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {
    color:#000
}

    </style>
</head>
<body>
<ul id="menu">
  
<li class="orange"><a href="#">Lien menu 3</a>
    <ul>
      <li><a href="#">Lien sous menu</a>
    <ul>
       <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese/">Livre de la Genèse 1</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-2/">Livre de la Genèse 2</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-3/">Livre de la Genèse 3</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-4/">Livre de la Genèse 4</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-5/">Livre de la Genèse 5</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-6/">Livre de la Genèse 6</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-7/">Livre de la Genèse 7</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-8/">Livre de la Genèse 8</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-9/">Livre de la Genèse 9</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genèse 10</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genèse 11</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genèse 12</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genèse 13</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genèse 14</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genèse 15</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genèse 16</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
      <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genèse 17</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genèse 18</a></li>   
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genèse 19</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genèse 20</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genèse 21</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genèse 22</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-23/">Livre de la Genèse 23</a></li> 
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genèse 24</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genèse 25</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genèse 26</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genèse 27</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genèse 28</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genèse 29</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genèse 30</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genèse 31</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genèse 32</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genèse 33</a></li>
    </ul>
      </li>
      <li><a href="#">Lien sous menu</a>
    <ul>
     <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genèse 34</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genèse 35</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genèse 36</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-23/">Livre de la Genèse 37</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genèse 38</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genèse 39</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genèse 40</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genèse 41</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genèse 42</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genèse 43</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genèse 44</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genèse 45</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genèse 46</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genèse 47</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genèse 48</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genèse 49</a></li>
   <li><a class="dropdown-item" href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genèse 50</a></li>
    </ul>
      </li>
    </ul>
  </li>

</ul>
</body>
</html>

Merci pour votre aide

ChrisLebure

9 février 2024 à 16:22:17

Bonjour,

une solution serait de créer un "mega menu", qui — justement ! — affiche des sous-menus sur plusieurs colonnes.

w3schools propose une solution sans <ul> ni <li>

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

un sympa pur css :

https://codepen.io/mohnaji94/pen/evbWGW

pas mal d'exemples en cherchant "mega menu", le principe est que le sous-menu principal est composé de n div ( = n colonnes ) contenant chacune un sous-menu, ce qui donne une colonne ainsi :

<div>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

ThierryMadar

9 février 2024 à 23:21:00

Bonsoir et merci pour cette réponse chrislebure.

J'ai travaillé sur un des 3 toute la fin d'après midi et jusqu'a 23h pour arriver à ceci.

<!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>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

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

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: ;
  color: white;
  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: transparent;
  width: 33%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
  z-index: 1;
}

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

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

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33%;
  padding: ;
  background-color: #ccc;
  height: ;
}

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

.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: 200px) {
  .column {
    width: 35%;
    height: 25%;
  }
}
</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="header">
      </div>   
      <div class="row">
        <div class="column">

                <a href="http://wordpress/2024/01/23/livre-de-la-genese/">Livre de la Genese 1</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-2/">Livre de la Genese 2</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-3/">Livre de la Genese 3</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-4/">Livre de la Genese 4</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-5/">Livre de la Genese 5</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-6/">Livre de la Genese 6</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-7/">Livre de la Genese 7</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-8/">Livre de la Genese 8</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-9/">Livre de la Genese 9</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genese 10</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genese 11</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genese 12</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genese 13</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genese 14</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genese 15</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genese 16</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genese 17</a>

        </div>
        <div class="column">
          
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genese 18</a>   
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genese 19</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genese 20</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genese 21</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genese 22</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-23/">Livre de la Genese 23</a> 
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genese 24</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genese 25</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genese 26</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genese 27</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genese 28</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genese 29</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genese 30</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genese 31</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genese 32</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genese 33</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genese 34</a>

        </div>
        <div class="column">
          
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genese 35</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genese 36</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-23/">Livre de la Genese 37</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-10/">Livre de la Genese 38</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-11/">Livre de la Genese 39</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-12/">Livre de la Genese 40</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-13/">Livre de la Genese 41</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-14/">Livre de la Genese 42</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-15/">Livre de la Genese 43</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-16/">Livre de la Genese 44</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-17/">Livre de la Genese 45</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-18/">Livre de la Genese 46</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-19/">Livre de la Genese 47</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-20/">Livre de la Genese 48</a>
                <a href="http://wordpress/2024/01/24/livre-de-la-genese-21/">Livre de la Genese 49</a>
                <a href="http://wordpress/2024/01/23/livre-de-la-genese-22/">Livre de la Genese 50</a>

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

</body>
</html>

Maintenant, j'aimerais faire une taille maximum en hauteur pour cette liste, qui , si elle est plus longue, mettrait une barre de défilement sur le coté droit, de manière à mettre maximum 2 colonnes.

J'ai essayé de modifier par moi même pas mal de choses, mais ça, je n'y arrive pas, ou du moins, je n'ai pas suffisamment de connaissance pour savoir le faire.

Voici ce que cela donne.

Merci encore

ChrisLebure

10 février 2024 à 9:30:34

Bonjour,

il faut indiquer une hauteur pour "row", et spécifier qu'en cas de dépassement, une barre de défilement apparaisse, ceci se fait avec overflow:auto

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

on pourrait appliquer le principe aux colonnes plutôt qu'à row, et on aurait une barre de défilement éventuelle pour chaque colonne

.column {
  float: left;
  width: 33%;
  padding: 0;
  background-color: #ccc;
  height: 200px;
  overflow:auto;
}

mais pas très esthétique

-
Edité par ChrisLebure 10 février 2024 à 9:35:41

ThierryMadar

10 février 2024 à 10:03:44

Bonjour ChrisLebure

Merci encore, c'est super et ça marche. J'ai positionné le .row sur la base des 3 colonnes, et ça donne ceci.

Merci 1000 fois, je vais pouvoir avancer...

ChrisLebure

10 février 2024 à 10:09:48

Impec, et bravo pour le projet, très intéressant

AbcAbc6

10 février 2024 à 10:23:56

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e