[Résolu] Menu responsive qui dépasse overflow-y

Question

edgard03

22 May 2025 à 17:10

Bonjour à tous.
j'ai créé un menu respnsive qui dépasse .
du coup j'ésaye la propriété overflow avec scroll sur la balise ul et rien ne se passe.
voici le code

<!doctype html>               
<html lang="fr">       
<head> 
<meta charset="utf-8">                                  
<meta name="Description" content="site personnel d'edgard devaux , photos ,vidéos diaporama" />
<meta name="Keywords" content="photos vidéos diaporama" />
<meta name="robots" content="index,follow,all" />
<meta name="revisit-after" content="1 day" />
<meta name="identifier-url" content="http://www.edgard-devaux.org/" />
<meta name="verify-v1" content="BG85pVqGICDHKO00bW6dl5V5ToAIOdr91FDfeGE/DRE=" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>edgard devaux-site perso</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/monicone.ico" />
<link rel="icon" type="image/png" href="/monicone.png" />
</head>
<body>
<div class="page">
<p>&nbsp;</p>
<p align="center">
<img src="jacquemart.jpg"
          srcset="edgard-small.gif 300w,
                  edgard.gif 500w,
                  edgard-large.gif 1000w"           
                  sizes="(min-width: 300px) and (max-width: 500px ) 300px,(min-width: 501px) and (max-width: 1299px) 500px,
                  (min-width: 1300px) 1000px, 100vw"
                  alt="logo site perso d'edgard devaux"/>
                  </p>
<p>&nbsp;</p>
<div class="btn">
<div class="hamburger"></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<nav class="menu">
<ul class="scroll">
<li><a class="active" href="http://www.edgard-devaux.org">accueil</a></li>
<li class="titre">VIDEOS</li>
 <li><a href="http://www.edgard-devaux.org/videos/sjs.html">stevens-johnson</a></li>
<li><a href="http://www.edgard-devaux.org/videos/11-septembre.html">11 septembre</a></li>
<li class="titre">PHOTOS</li>
<li class="sous-titre">Autriche</li>
<li><a href="http://www.edgard-devaux.org/photos/autriche/vienne/vienne.html">vienne</a></li>
<li><a href="http://www.edgard-devaux.org/photos/autriche/linz/linz.html">linz</a></li>
<li class="sous-titre">Pologne</li>
<li><a href="http://www.edgard-devaux.org/photos/pologne/varsovie/varsovie.html">varsovie</a></li>
<li><a href="http://www.edgard-devaux.org/photos/pologne/bialystok/bialystok.html">bialystok</a></li>
<li class="sous-titre">Espagne</li>
<li><a href="http://www.edgard-devaux.org/photos/espagne/madrid/madrid.html">madrid</a></li>
<li><a href="http://www.edgard-devaux.org/photos/espagne/aranjuez/aranjuez.html">aranjuez</a></li>
<li class="sous-titre">France</li>
<li><a href="http://www.edgard-devaux.org/photos/france/lourdes/lourdes.html">lourdes</a></li>
<li class="titre">CLIMAT</li>
<li><a href="http://www.edgard-devaux.org/climat/solutions.html">solution</a></li>
<li><a href="http://www.edgard-devaux.org/climat/energie-libre.html">Energie libre</a></li>
<li class="titre">MEDICAMENTS</li>
<li><a href="http://www.edgard-devaux.org/medicaments/syndrome-lyell.html">syndrome de lyell</a></li>
 <li><a href="http://www.edgard-devaux.org/medicaments/big-pharma.html">Big-pharma</a></li>
 <li><a href="http://www.edgard-devaux.org/medicaments/shoah-pharmaceutique.html">shoah-pharma</a></li>
 </ul>
 </nav>
 <script src="script.js"></script>
<div class="conteneur">
<p>&nbsp;</p>
<h1>&laquo;Observer,analyser,synthétiser,s'adapter,agir et réagir&raquo;
<br />telle est ma devise.</h1>
<p>&nbsp;</p>
<p align="center">
<img src="jacquemart.jpg"
          srcset="jacquemart-small.jpg 300w,
                  jacquemart.jpg 500w,
                  jacquemart-large.jpg 1000w"           
                  sizes="(min-width: 300px) and (max-width: 500px ) 300px,(min-width: 501px) and (max-width: 1299px) 500px,
                  (min-width: 1300px) 1000px, 100vw"
                  alt="jacquemart-moulins03"/>
                  </p>
<p>&nbsp;</p>
<h2>&laquo;Avec de la publicité un journal n'est pas vraiment libre&raquo;<br />
(moi même <img src="smiley_1273.gif" width="32" height="32" alt="rires"/> )</h2>
<p>&nbsp;</p>
<p class="style2">Sur mon site perso je vous propose de partager mes passions :
<br />voyages ,informatique,photos.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><img src="mail.gif" alt="e mail" width="141" height="85" /></p>
<p>&nbsp;</p>
<p class="style2" />edgard.devaux@gmx.fr</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
  <p align="center"><img src="index.jpeg" width="70" height="45" alt="logo html5" /></p>
<p>&nbsp;</p> 
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(93416581, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/93416581" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --> 
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

ensuite la css

body {
 background-color: #FFFFFF;
 margin: 0;
}
p {
 margin-top: 0;
 margin-bottom: 0;
}
@media screen and (max-width: 999px) {
.page {
 background-color: #CECECE;
 min-width: 300px;
 border: 5px solid orange;
}
.conteneur {
  background-color: #FFFFFF;
  border-top:10px solid orange;
}
.style2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 text-align: center;
}
h1, h2, h3, h4, h5, h6 {
 font-family : Arial, Helvetica, sans-serif;
 font-size : 20px;
 text-align : center;
 margin-left : 5px;
 margin-right : 5px;
}
.btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        cursor: pointer;
        transition: 0.5s ease-in-out;
        position: relative;
        background-color: orange;
        border: 1px solid black;
        border-radius: 10px;
        margin-left: 15px;
        } 
.hamburger  {
        width: 80px;
        height: 7px;
        background-color: black;
        transition: 0.25s ease-in-out;
        border-radius: 10px;
        }
 .hamburger::before,
 .hamburger::after  {
        content: "";
        position: absolute;
        width: 80px;
        height: 7px;
        background-color: black;
        transition: 0.5s ease-in-out;
        border-radius: 10px;
        }
 .hamburger::before {
        transform: translateY(-20px);
        }
 .hamburger::after {
         transform: translateY(20px);
        }
.open .hamburger {
      background-color: transparent; 
     }
.open .hamburger::before {
       transform: rotate(-135deg);
       }
.open .hamburger::after {
       transform: rotate(135deg);
       }
.menu {
        background-color: #CECECE;
        border: 3px solid black;
        border-radius: 10px;
        width: 150px;
        position: fixed;
        display : flex;
        opacity: 0;
        transition: 0.3s ease-in-out;
        transform: translateX(-150px);
        pointer-events: none; 
        }
 .menu ul .scroll {
         position: absolute;
         display: flex;
         overflow-y: scroll;
         }
.menu ul {
       margin: 0;
       padding: 0;
       font: bold 1em Arial, Helvetica, sans-serif;
       list-style: none;
       width:150px;
}
.menu a {
        display:block;
        margin: 5px 0;
        color: black;
        text-decoration: none;
        line-height: 20px;
        width: 150px;
        text-align:center;
        background: #FFFFFF;
        border-top:1px solid black;
        border-bottom:1px solid black;
}
.menu a:hover {
        background-color: orange;
        border:none;
}
.menu a.active {
       background-color: orange;
 }
.sous-titre {
       text-align:center;
       display:block;
       margin: 5px 0;
       color: black;
       text-decoration: none;
       line-height: 18px;
       width: 150px;
       background: #FFD700;
       border-top:1px solid black;
       border-bottom:1px solid black;
}
.titre {
      text-align:center;
      display:block;
      margin: 5px 0;
      color: black;
      text-decoration: none;
      line-height: 26px;
      width: 150px;
      background: #FFFF00;
       border-top: 2px solid black;
       border-bottom: 2px solid black;
}
.menu-open {
        opacity:1;
        transition: 0.3s;
        transform: translateX(10px); 
        pointer-events: all; 
        }
}
@media screen and (min-width: 1000px) {
.style7 {
 font-family : Arial, Helvetica, sans serif;
 font-size : 20px;
 text-align : justify;
 margin-left : 5%;
 margin-right : 5%;
}
.menu {
 float: left;
 width: 150px;
 position: relative;
 background: #CECECE;
}
.menu ul {
 margin: 0;
 padding: 0;
 font: bold 1em Arial, Helvetica, sans-serif;
 list-style: none;
 width:150px;
}
.menu ul{
 position:relative;
}
.menu a {
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 20px;
 width: 150px;
 text-align:center;
 background: #FFFFFF;
 border-top:1px solid black;
 border-bottom:1px solid black;
}
.menu a:hover {
 background: orange;
 border:none;
 color:#0066FF;
}
.menu a.active {
 background-color: orange;
}
.style1 {
 font: bold 1em Arial, Helvetica, sans serif;
 text-align:left;
 margin-left:10px;
}
.style2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 text-align: center;
}
.style3 {
 font-family: Arial, Helvetica, sans serif;
 font-size: 20px;
 color: #0066FF;
 text-align: center;
}
h1, h2, h3, h4, h5, h6 {
 font-family : Arial, Helvetica, sans-serif;
 font-size : 20px;
 text-align : center;
 margin-left : 5px;
 margin-right : 5px;
}
.page {
 background-color: #CECECE;
 max-width: 1600px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 margin-bottom: 15px;
 border:10px solid orange;
  border-radius: 30px;
}
.annonce { 
 margin-left:10px;
 margin-right:10px;
 border:3px solid red;
 background:black;
 position: relative;
}
.conteneur {
 background-color: #FFFFFF;
 margin-left: 150px;
 border-left: 10px solid orange;
 border-top:10px solid orange;
 position: relative;
}
.conteneur img{
 border: none;
}
.sous-titre {
 text-align:center;
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 18px;
 width: 150px;
 background: #FFD700;
 border-top:1px solid black;
 border-bottom:1px solid black;
}
.titre {
 text-align:center;
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 26px;
 width: 150px;
 background: #FFFF00;
 border-top: 2px solid black;
 border-bottom: 2px solid black;
}
}
@viewport { 
    width: device-width; 
    zoom: 1; 
}

et le javascript


 let isMenuOpen = false;
 
 const  menuButton = document.querySelector(".btn");
 const  menu = document.querySelector(".menu");
 
 menuButton.addEventListener("click", () => {
       isMenuOpen = !isMenuOpen;
       
       if(isMenuOpen){
           menuButton.classList.add("open");
           menu.classList.add("menu-open");
           } else {
             menuButton.classList.remove("open");
             menu.classList.remove("menu-open");
             }
           });

merci d'avanc epour vos idées

gcyrillus

Modérateur

22 May 2025 à 18:47

Bonjour,

Pour créer les structures visuelles d'une page, il est depuis plusieurs années devenu inutile et déconseillé d'utiliser float , qui a à l'origine un autre usage.

2 systeme de grille trés efficace existent: le grid layout et le flex layout. grid est souvent plus adapté à la mise en page principale.

Voir ces tutoriels par exemple :
https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.html

https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

Pour te donner un aperçu de ce que tu peut faire avec ton HTML , tu peut ajouter, à la fin de ta dernière feuille de styles chargée, ces quelques règles :


.page {
  display:grid;
  grid-template-columns:170px 1fr;
}
@media (max-width:999px) {
.page {
  grid-template-columns:0 1fr;
}  
  nav.menu {
    position:static;
    min-width:170px;
    margin:10px  0 0 -10px;
    border:none;
    min-height: calc(100% - 10px);
    border-radius:0;
  }
}
header {
  grid-column:1/-1;
  padding:1em;
  text-align:center;
}
.btn {
  grid-column:1/-1;
}
.menu {
  grid-column:1;
  height:0;
  min-height:100%;
  overflow:auto;
  width:auto;
  max-width:100%;
}
.conteneur {
  margin:0;
  grid-column:2;
}

Je ne sais pas quel éditeur tu utilises, mais il y a beaucoup d'attributs et balises vides qui sont, soit obsolètes depuis des décennies soit inutile .
par exemple:

    <p>&nbsp;</p><!-- oups , pollution du code à remplacer par des marges internes ou externe dans la feuille de style -->
    <p align="center"><!-- codage année 90 , en css c'est : text-align:center et valide -->

cordialement

codepen exemple https://codepen.io/gc-nomade/pen/ByNBmYP
Modifié par gcyrillus (23 May 2025 - 10:18)

edgard03

22 May 2025 à 19:18

merci pour tous ces conseils .
bonne soirée
Modifié par edgard03 (23 May 2025 - 05:25)

Prévenir un modérateur

Répondre au sujet