11547 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Menu rideau et icone hamburger /marche à moitié

Bonjour à tous.
l'icone hamburger marche bien , mais le menu rideau ne coulisse pas de gauche à droite .
je mes le code css html et javascript.
Merci de votre aide.
<!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">
<link rel="stylesheet" media="screen and (max-width: 999px)" href="smallscreen.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="edgard.gif" alt="edgard devaux" width="500" height="100" /></p>
<p>&nbsp;</p>
<div class="menu-btn">
<div class="hamburger"></div>
</div><script src="script.js"></script>
<div class="menu">
<ul>
<li><a>mon menu</a></li>
<li><a>rideau</a></li>
</ul>
</div>
<script src="script.js"></script>
<p>&nbsp;</p>
<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> 
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

la css

	
.menu-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: red;
        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);
       }
.page {
        background-color: yellow;
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
        }
.menu {
        background-color: red;
        width: 150px;
        position: fixed;
        display : flex;
        opacity: 1;
        transition: 0.3s ease-in-out;
        transform: translateX(-150px);
        pointer-events: none;   
        }
 .menu-open {
        transition: 0.3s;
        transform: translateX(0px); 
        pointer-events: all; 
        }

et le javascript
 let isMenuOpen = false;
 
 const  menuButton = document.querySelector(".menu-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");
             }
           });

Modifié par edgard03 (20 May 2025 - 05:39)
oui éffectivement en visitant la page ça marche.
pour que ça marche chez moi en local j'ai du supprimer une ligne vers le javascript et garder que la ligne après le menu (dans le code html) comme ceci
<div class="btn">
<div class="hamburger"></div>
</div>
<nav class="menu">
<ul>
<li><a>mon menu</a></li>
<li class="titre"><a>rideau</a></li>
</ul>
</nav>
<script src="script.js"></script>

merci au forum
Prévenir un modérateur
Répondre au sujet
Aller à