Как сделать кнопку, чтобы реагировать в навигационной панели? - PullRequest
Новая
       6

Как сделать кнопку, чтобы реагировать в навигационной панели?

1 голос
/ 21 апреля 2020

Я впервые задаю вопрос здесь, поэтому, пожалуйста, напишите мне, если я делаю что-то не так :) Я недавно начал разрабатывать свой первый веб-сайт локально, и я застрял на небольшой проблеме, которая мне не кажется выяснить. Итак, у меня есть кнопка в моей панели навигации, которую я использую для формы входа, и я пытаюсь сделать панель навигации отзывчивой, но кнопка не исчезнет go, чтобы можно было показать значок меню гамбургера. Не могли бы вы помочь мне выяснить, что не так? Я только начал царапать поверхность веб-разработки, так что, если это кажется глупым, извините ... Большое спасибо, я действительно ценю это! :) 

// 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>

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Чтобы добавить класс к элементу, вы должны использовать 

someElement.classList.add("someClass")

Чтобы удалить класс 

someElement.classList.remove("someClass")

Чтобы проверить, есть ли у элемента определенный класс 

someElement.classList.contains("someClass")

Попробуйте это: 

// 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 голосов
/ 21 апреля 2020

а: зависать {цвет фона: # ddff00; }

вот код из моего курса, поэтому, когда мышь переходит, меняет цвет, конечно, что вы можете изменить цвет

, дайте мне знать, если он работает

...