11546 sujets

JavaScript, DOM et API Web HTML5

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)
Prévenir un modérateur
Répondre au sujet
Aller à