Ça fait quelques années que je ne m'amuse plus à faire des sites web et je ne me souviens pas de grand chose (j'ai arrêté à cause d'une maladie neurologique dégénérative et ma dose de médicaments affecte ma mémoire).
Bref, à cause de cette maladie, il faut que je vende toutes mes BD en bloc. J'ai cherché sur le web un modèle de menu. J'en ai trouvé un qui me convenait, mais je me suis rendu compte que sur mon macBook ou mon iPad, quand il y a beaucoup d'éléments, je ne peux pas faire défiler jusqu'en bas (la colonne A-C ou ExDé par exemple) Quelqu'un aurait une solution?
ps oui, je sais, mes images sont trop grosses, mais dans le courriel que j'enverrai à des librairies spécialisées, je leur dirai qu'il y a un délai de chargement - faut que ce soit assez gros pour qu'ils regardent en détail l'état des BD). Je vais regarder sur internet pour voir si le chargement peut s'accélérer.
robinlavoie.com

Voici le code pour le menu:
<nav>
            <ul>
               <li class="menu-deroulant">
                  <a href="#">A-C</a>
                  <ul class="sous-menu">
                     <li><a href="#marini">Aigles de Rome (Les)</a></li>
                     <li><a href="#leo">Aldebaran</a></li>
                     <li><a href="#alpha">Alpha</a></li>
                 </ul>
               </li>
               <li class="menu-deroulant">
                  <a href="#">D-G</a>
                  <ul class="sous-menu">
                     <li><a href="#dallas_barr">Dallas Barr</a></li>
                     <li><a href="#dan_cooper">Dan Cooper</a></li>
                     <li><a href="#dantes">Dantes</a></li>
               </ul>
               </li>
         </nav>


et la CSS qui va avec:

/*Menu déroulant*/

:root{
  --hauteur-menu: 60px;
}
* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}
nav {
  width: 100%;
  font-size: 17px;
  position: sticky;
  top: 0;
  z-index:2000;
}

nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}
 
nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: white;
  position: relative;
  height: 100%;
  flex: 1;
}

nav > ul > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li a {
  text-decoration: none;
  color: black;
}

.menu-deroulant > a:after{
  content: '?';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}
.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 290%;
  text-align: left;
  background-color: white;
  border-radius: 2px;
  overflow: hidden;
  max-height: 0;
}

.sous-menu > li > a {
  height: 19px;
  padding-left: 20px;
  width: 100%;
  align-items: center;
  display: flex;
}

nav > ul > li:hover > a{
  color: #2169EC;
}

.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li:hover > a {
  color: white;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(90deg);
  }
}

.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}

Modifié par largowin (16 Feb 2023 - 00:56)
À peu près toutes les erreurs étaient causées par &middot;&middot; (j'avais oublié le dernier point virgule alors que le message me laissait croire qu'il s'agissait d'une programmation non conforme) et des </p> que j'avais oubliés à plusieurs endroits (puisque j'ai recopié une même erreur plusieurs fois).

Mais bon, c'est corrigé. Eh oui, je sais que ça ne valide pas encore, mais bon, si tout était parfait, je ne serais pas ici à demander de l'aide à moins que tu me dises qu'une de mes 3 erreurs est la cause de mon problème de menu évidemment.
Modifié par largowin (16 Feb 2023 - 05:29)