C'est la première fois que je pose une question ici, alors n'hésitez pas à me contacter si je fais quelque chose de mal :) J'ai récemment commencé à développer mon premier site Web, localement, et je suis coincé sur un petit problème que je n'arrive pas à comprendre . J'ai donc un bouton dans ma barre de navigation que j'utilise pour un formulaire de connexion et j'essaie de rendre la barre de navigation réactive, mais le bouton ne disparaîtra pas pour que l'icône du menu hamburger puisse être affichée. Pourriez-vous s'il vous plaît m'aider à comprendre ce qui ne va pas? Je viens de commencer à gratter la surface du développement Web, donc si cela semble idiot, je suis désolé ... Merci beaucoup, je l'apprécie vraiment! :)

// Responsive navbar Javascript
function responsivetopnav() {
  var x = document.getElementById("topnav1");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

//Log in Javascript
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
/* Styling the topnav */

.topnav {
  background-color: rgba(16, 10, 16, 0.7);
  overflow: hidden;
  width: 100%;
  height: 40px;
  display: block;
  transition: top 0.3s;
  top: 0;
}

.topnav a {
  float: right;
  color: white;
  text-align: center;
  padding: 7px 17px;
  text-decoration: none;
  font-size: 15px;
  display: block;
  top: 0;
}

.topnav a:hover {
  border-bottom: 3px solid white;
}

.topnav .icon {
  display: none;
}


/* Styling the login interface */

input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: transparent;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.buttonsubmit {
  background-color: blue;
  color: white;
  cursor: pointer;
  width: 50%;
}

button:hover {
  opacity: 0.8;
}

.signupbtn {
  background-color: black;
  color: white;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.cancelbtn {
  width: 48%;
  background-color: #f44336;
}

.containeruser {
  padding: 16px;
  left: 10cm;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  /* Sit on top */
  left: 18cm;
  top: 5cm;
  width: 30%;
  height: 100%;
  overflow: auto;
  padding-top: 40px;
  color: black;
}

.modal2 {
  display: none;
  position: fixed;
  z-index: 5;
  left: 18cm;
  top: 4cm;
  width: 30%;
  height: 100%;
  overflow: auto;
  padding-top: 0px;
  color: black;
}

.modal-content {
  background-color: white;
  margin: 5% auto 15% auto;
  border: 1px solid #888;
  width: 80%;
  border-radius: 10px;
  color: black;
}

.modal2-content2 {
  background-color: white;
  margin: 5% auto 15% auto;
  border: 1px solid #888;
  width: 80%;
  border-radius: 10px;
  color: black;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
<div class="topnav" id="topnav1">
  <!-- The button I'm trying to hide -->
  <a><button onclick="document.getElementById('id01').style.display='block'"><i class="fas fa-sign-in-alt"></i><b>      Login</b></button></a>
  <div id="id01" class="modal">
    <form class="modal-content animate" action="..\EWD Website\PHP\login.php" method="post">
      <div class="containeruser">
        <h2 style="color:black; text-align:center;">Login</h2>
        <label for="email"><b style="color:black">E-mail</b></label></br>
        <input type="text" placeholder="Introduce&#355i e-mail" name="email" style="width: 100%; border: 1px solid grey; color:black;" required></br>
        <label for="psw"><b style="color:black">Parola</b></label>
        <input type="password" placeholder="Introduce&#355i parola" name="psw" style="width: 100%; border: 1px solid grey; color:black;" required>
        <button type="submit" class="buttonsubmit">Login</button>
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Anulare</button></br>
        <label style="color:black"><input type="checkbox" checked="checked" name="remember">&#354ine-m&#259 minte</label>
        <a href="#" style="color:black;">A&#355i uitat parola?</a>
        <h4 style="color:black">Nu ai cont?</h4>
        <button type="button" onclick="document.getElementById('id02').style.display='block';document.getElementById('id01').style.display='none'" class="signupbtn">&#206nscrie-te acum</button>
      </div>
    </form>
  </div>
  <div id="id02" class="modal2">
    <form class="modal2-content2 animate" action="..\EWD Website\PHP\signup.php" method="post">
      <div class="containeruser">
        <h2 style="color:black;text-align:center;">&#206nregistrare</h2>
        <label for="fname"><b style="color:black;">Nume</b</label></br>
        <input type="text" placeholder="Introduce&#355i numele dumneavoastr&#259" name="fname" style="width: 100%; border: 1px solid grey; color:black;" required></br>
        <label for="lname"><b style="color:black;">Prenumele</b></label></br>
        <input type="text" placeholder="Introduce&#355i prenumele dumneavostr&#259" name="fname" style="width: 100%; border: 1px solid grey; color:black;" required></br>
        <label for="email"><b>E-mail</b></label></br>
        <input type="text" placeholder="Introduce&#355i adresa dumneavoastr&#259 de e-mail" name="email" style="width: 100%; border: 1px solid grey; color:black;" required></br>
        <label for="gender"><b>Sex</b></label>
        <div style="padding-left:10px;">
          <input type="radio" id="male" name="gender" value="male">Masculin</input>
          <input type="radio" id="female" name="gender" value="female">Feminin</input>
          <input type="radio" id="other" name="gender" value="other">Altceva</input>
          </br>
          </br>
        </div>
        <label for="age"><b>V&#226rsta</b></label></br>
        <input type="text" placeholder="Introduce&#355i v&#226rsta dumneavoastr&#259" name="age" style="width: 100%; border: 1px solid grey; color:black;" required></br>
        <label for="psw"><b>Parola</b></label>
        <input type="password" placeholder="Introduce&#355i o parol&#259" name="psw" style="width: 100%; border: 1px solid grey; color:black;" required>
        <label for="pswrepeat"><b>Reintroduce&#355i parola</b></label>
        <input type="password" placeholder="Reintroduce&#355i parola de mai sus" name="pswrepeat" style="width: 100%; border: 1px solid grey; color:black;" requiredt>
        <button type="submit" class="buttonsubmit">&#206nregistrare</button>
        <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Anulare</button>
        <h4>Ai deja cont?</h4>
        <button onclick="document.getElementById('id01').style.display='block';document.getElementById('id02').style.display='none'" class="signupbtn">Login</button>
      </div>
    </form>
  </div>
  <script src="..\EWD Website\JavaScript\user.js"></script>
  <a href="#contact"><i class="fas fa-info"></i>       Contact</a>
  <a href="http://www.tfl.gov.uk" target="_blank"><i class="fas fa-link"></i>      Transport for London Website</a>
</div>
1
Milovan 21 avril 2020 à 00:14

2 réponses

Meilleure réponse

Pour ajouter une classe à un élément que vous utiliseriez

someElement.classList.add("someClass")

Pour supprimer une classe

someElement.classList.remove("someClass")

Pour vérifier si un élément a une certaine classe

someElement.classList.contains("someClass")


Essaye ça:

// Responsive navbar Javascript
function responsivetopnav() {
    var x = document.getElementById("topnav1");
    if (x.classList.contains("topnav")) {
        x.classList.add("responsive");
    } else {
        x.classList.add("topnav");
    }
}
0
Ivan86 20 avril 2020 à 22:55

A: hover {background-color: # ddff00; }

Voici un code de mon cours, donc quand la souris ça passe, change la couleur, bien sûr, que vous pouvez changer la couleur

Fais moi savoir si ça marche

-1
Raluca Adina Avram 20 avril 2020 à 21:26