我的响应式导航栏无法正常运行

Question

我为移动屏幕制作了一个响应式导航栏，但效果不佳。 当它来到移动屏幕时它会缩小，但是当我点击图标导航栏时，它不会在移动屏幕上展开。 出现在移动屏幕上时，单击图标按钮不起作用。 我的代码在这里。 请帮忙..

<body>

        <div class="first" id="myfirst">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
      </body>

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

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

    .first  .icon {
      display: none;
    }

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

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

    }

Answer 1

效果并不理想，因为 CSS 是C级联的，并且 .first .first a:not(:first-child)选择器比.responsive a选择器具有更高的优先级。

因此，修复代码的最快方法是以这种方式更改 last .responsive a选择器：

.responsive a:first-child,
.responsive a:not(:first-child) {
  float: none;
  display: block;
  text-align: left;
}

最后，只有几个建议：

最好使用nav HTML5 元素而不是div ：它加强了代码语义
避免相同的@media screen and (max-width: 600px) {媒体查询：它削弱了可读性和可维护性
改进类语义，提供更合适的名称（例如：在open重命名responsive ）

我的响应式导航栏无法正常运行

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-10-02 10:36:02

我的响应式导航栏无法正常运行

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-10-02 10:36:02

解决方案1
2 已采纳 2017-10-02 10:36:02