javascript - 尝试使用 vanilla javascript 使我的导航栏移动友好

Question

我正在使用 JavaScript，因此用户可以单击切换按钮(汉堡包)，这样导航栏就可以像引导导航栏一样在移动 View 中下拉。像这样:

但是，当我的导航栏在移动 View 中时，导航栏 Logo 会消失，但当您单击切换(汉堡包)按钮时它会出现。

我的 HTML:

<!-- Top navigation -->
<div class="topnav" id="myTopnav">
  <a href="#center"class="active">Navbar Logo</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  <!-- Centered link -->
  <div class="topnav-centered">
    <a href="#center">center</a>
  </div>

  <!-- Left-aligned links (default) -->
  <a href="#news">News</a>
  <a href="#contact">Contact</a>

  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

我的 CSS:

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

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

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav .topnav-centered > a,
  .topnav .topnav-right > a,
  .topnav > a{
    display: none;
    }

  .nav-logo{
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

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

我的JS:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

我的 codepen 的链接是 https://codepen.io/anon/pen/OvKjvK

Answer 1

是您的 CSS 隐藏了 Logo - 特别是这个 block ；

@media screen and (max-width: 600px) {
  .topnav .topnav-centered > a,
  .topnav .topnav-right > a,
  .topnav > a{
    display: none;
    }

  .nav-logo{
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

这条规则:

.topnav > a{
   display: none;
}

您的 Logo 是 <a>在 .topnav 内因此在小于 600px 时被隐藏宽。

您需要更具体地使用 CSS 规则来解决此问题。