Когда я изменяю разрешение экрана для пользователя настольного компьютера после разрешения мобильного пользователя Пункт меню навигации не отображается на экране - PullRequest
Новая
       7

Когда я изменяю разрешение экрана для пользователя настольного компьютера после разрешения мобильного пользователя Пункт меню навигации не отображается на экране

0 голосов
/ 11 декабря 2018

Я пытаюсь создать адаптивное меню навигации для мобильных пользователей.Когда разрешение экрана на экране для мобильного пользователя, я нажимаю на Toggle Navigation Box его блок элементов навигации по экрану, и когда я нажимаю снова Toggle Navigation Box, его элементы навигации дисплея нет.Но когда я меняю разрешение экрана для пользователя рабочего стола, меню навигации не отображается. 

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}
body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}
<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Мой код работает, но при отсутствии отображения navLinks мой код не работает на большом разрешении экрана.

1 Ответ

0 голосов
/ 12 декабря 2018

Просто добавьте

Отображение: блок! Важный;

в @ media 

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}
body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block!important;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}
<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>
...