11521 sujets

JavaScript, DOM et API Web HTML5

Function Hide/Show Help

Bonjour ! Je cherche a faire une fonction qui toggle un style lorsque " transform: translatex(100%); elle se mets a 0% et sinon elle se mets a 100%. je suis un debutant surtout sur en javascript alors si vous voyez de grosse erreur pas de jugement svp !

voila mon code html :


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title> PurpleRain / IG </title>
    <link rel="icon" href="Favicon/tuxpi-removebg-preview__1_-removebg-preview.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Css Link -->
    <link rel="stylesheet" href="Css/Header.css">
    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation / Header -->
      <nav class="header">
        <div class="name-nav">
          <h1>PurpleRain</h1>
        </div>
        <ul class="link-nav">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Another</a>
          </li>
          <li>
            <a href="#">Linkinbio</a>
          </li>
        </ul>
        <button onclick="HideShow()">
          <div class="burger" id="burger">
              <div class="line1"></div>
              <div class="line2"></div>
              <div class="line3"></div>
          </div>
        </button>
      </nav>
      <script src="Js/Header.js"></script>
  </body>
</html>


Mon code css : 


* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* Header */

nav.header {
  width: 100%;
  min-height: 60px;
  background: linear-gradient(110deg, #212121 60%,#141414 60%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}

.name-nav {
  color: #FCFCFC;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.link-nav {
  justify-content: space-around;
  display: flex;
  width: 30%;
}

.link-nav li {
    list-style: none;
}

.link-nav a {
  color: #FCFCFC;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
}

/* Burger */

.burger div{
  width: 20px;
  height: 2px;
  background-color: #FCFCFC;
  margin: 5px;
}

.burger {
  display: none;
}

/* Responsive */

@media screen and (max-width: 1024px) {
  .link-nav {
    width: 50%;
  }
}

/* Pour Mobile */

@media screen and (max-width: 768px) {

  .name-nav {
    position: absolute;
    left: 3%;
  }

  body {
    overflow-x: hidden;
  }

  .link-nav {
    position: absolute;
    top: 60px;
    height: 91vh;
    right: 0px;
    background: linear-gradient(110deg, #212121 41%,#141414 41%);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    transform: translatex(100%);
  }

  .burger {
    display: block;
    position: absolute;
    right: 3%;
    cursor: pointer;
  }
}


Mon code javascript


function HideShow() = {
  var burger = document.getElementById('burger')
  if (burger.style.transform === ("translatex(100%)") {
    burger.style.transform = "translatex(0%)";
  } else {
    burger.style.transform = "translatex(100%)";
  }
}
Modérateur
bonsoir,

pour un toggle, tu devrais te baser sur une class plutôt que d'injecter directement un ou plusieurs styles.

par exemple :

function hideShow(){
  var burger = document.getElementById('burger')
  if (burger.classList.contains("hide")) {
      burger.classList.remove("hide");
    } else {
      burger.classList.add("hide");
    }

et dans ton CSS 

  .burger {
    display: block;
    position: absolute;
    right: 3%;
    cursor: pointer;
    transform:translatex(0%);
  }
  .burger.hide {
    transform:translatex(100%);
  }


Tu peut alors continuer a embellir ou a adapter tes styles sans avoir a retoucher au JavaScript.

p.s. le =dans ta déclaration de fonction est inutile function hideShow(){ }
gcyrillus a écrit :
bonsoir,

pour un toggle, tu devrais te baser sur une class plutôt que d'injecter directement un ou plusieurs styles.

par exemple :

function hideShow(){
  var burger = document.getElementById('burger')
  if (burger.classList.contains("hide")) {
      burger.classList.remove("hide");
    } else {
      burger.classList.add("hide");
    }

et dans ton CSS 

  .burger {
    display: block;
    position: absolute;
    right: 3%;
    cursor: pointer;
    transform:translatex(0%);
  }
  .burger.hide {
    transform:translatex(100%);
  }


Tu peut alors continuer a embellir ou a adapter tes styles sans avoir a retoucher au JavaScript.

p.s. le =dans ta déclaration de fonction est inutile function hideShow(){ }


Merci beaucoup !!
Sujet clos
Aller à