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

【问题标题】：Trying to make my navbar mobile friendly using vanilla javascript尝试使用 vanilla javascript 使我的导航栏移动友好
【发布时间】：2018-04-16 12:54:24
【问题描述】：

我正在使用 JavaScript，因此用户可以单击切换按钮（汉堡包），以便导航栏可以像引导导航栏一样在移动视图中下拉。像这样：

但是，当我的导航栏在移动视图中时，导航栏徽标会消失，但当您单击切换（汉堡）按钮时会出现。

我的 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

【问题讨论】：

一个快速的、无关的 JS 提示：如果您曾经为 myTopnav 添加/更改 css 类，它就会停止工作。尽量防止这种依赖。您的函数可以替换为：function myFunction() { var x = document.getElementById("myTopnav"); x.classList.toggle('responsive'); }

标签： javascript jquery html css

【解决方案1】：

这是您的 CSS 隐藏徽标 - 特别是这个块；

@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;
}

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

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

【讨论】：