如何在移动视图中隐藏某些导航链接？

问题描述 投票：0回答：1

我从w3schools复制了这个菜单。我编辑了一些东西（向右浮动三个链接，我改变了一些颜色）。

桌面视图：

移动视图：

但是，您可以看到项目链接显示在移动视图中，这不是我想要的。如何禁用该项目链接？我已经尝试过一些类似的东西：在CSS中不是（：first-child）。

这是我的代码：

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>
javascript html css css-selectors
1个回答
1
投票

我不会详细介绍为什么使用float是一种不好的布局做法。您应该研究其他解决方案，例如着名的和使用得非常广泛的flexbox

你可以在这里阅读：MDN flexbox basics或其他网站。

所以，回到你的问题。一个解决方案是将所有.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.