Question

我从w3schools复制了此菜单。我已经编辑了一些内容（在右侧浮动了三个链接，并且更改了一些颜色）。

桌面视图：
Here you see the desktop view

移动视图：
And here you can see the mobile view

但是，正如您所看到的那样，项目链接显示在移动视图中，这不是我想要的。如何禁用该项目链接？我已经尝试过CSS中的：not（：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>

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

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

1 个答案: