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

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

0 голосов
/ 26 февраля 2019

Я скопировал это меню из w3schools .Я отредактировал некоторые вещи (плавающие три ссылки справа, и я изменил некоторые цвета).

Рабочий стол:
Here you see the desktop view

Мобильный просмотр:
And here you can see the mobile view

Но, как вы можете видеть, ссылки на проекты отображаются в мобильном представлении, это не то, что я хотел.Как я могу отключить эту ссылку проектов?Я уже пробовал некоторые вещи, такие как:: not (: first-child) в CSS.

Вот мой код: 

function jsnav() {
  var x = document.getElementById("js-nav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: "helvetica neue", sans-serif;
}

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  color: white;
}

.active {
  background-color: dodgerblue;
  color: white;
}

nav .icon {
  display: none;
}

.float-right {
  float: right;
}

@media screen and (max-width: 600px) {
  nav a:not(:first-child) {display: none;}
  nav a.icon {
    float: right;
    display: block;
    padding-top: 10px;
  }
  .float-right {
    float: left;
  }
}

@media screen and (max-width: 600px) {
  nav.responsive {position: relative;}
  nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

main {
  padding: 40px 40px 20px 80px;
}

@media only screen and (max-width: 800px){
  main {
    padding-left: 40px;
    padding-right: 40px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CSS -->
  <link rel="stylesheet" href="css/style.css">
  <title>CSS Nav HTML &amp; CSS JS</title>
</head>
<body>


  <nav id="js-nav">
    <a href="#" class="active">Home</a>
    <div class="float-right">
      <a href="#">Projects</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
    <a href="javascript:void(0);" class="icon" onclick="jsnav()">
      &#9776;
    </a>
  </nav>

<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>

<script src="js/navigation.js"></script>

</body>
</html>

1 Ответ

0 голосов
/ 26 февраля 2019

Я не буду вдаваться во все подробности о том, почему использование float является плохой практикой для верстки.Вы должны посмотреть на другие решения, такие как известные и очень широко используемые flexbox

. Вы можете прочитать об этом здесь: Основы MDN flexbox или на других сайтах.

ТакВернемся к вашей проблеме.Решением было бы скрыть их все .float-right a { display: none }, а затем показать их снова, когда они вам понадобятся.Как я понимаю, nav будет иметь класс responsive, поэтому добавьте показывать ссылки, когда навигация имеет этот класс nav.responsive .float-right a { display: none }

function jsnav() {
  var x = document.getElementById("js-nav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: "helvetica neue", sans-serif;
}

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  color: white;
}

.active {
  background-color: dodgerblue;
  color: white;
}

nav .icon {
  display: none;
}

.float-right {
  float: right;
}

@media screen and (max-width: 600px) {
  .float-right a{
    display: none;
  }
  nav a.icon {
    float: right;
    display: block;
    padding-top: 10px;
  }
  .float-right {
    float: left;
  }
}

@media screen and (max-width: 600px) {
  nav.responsive {
    position: relative;
  }
  nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  nav.responsive .float-right a{
    display: block;
  }
}

main {
  padding: 40px 40px 20px 80px;
}

@media only screen and (max-width: 800px) {
  main {
    padding-left: 40px;
    padding-right: 40px;
  }
}
<nav id="js-nav">
  <a href="#" class="active">Home</a>
  <div class="float-right">
    <a href="#">Projects</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="jsnav()">
      &#9776;
    </a>
</nav>

<main>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...