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

Question

I have made a responsive navigation bar for Mobile screen but it's not working well.我为移动屏幕制作了一个响应式导航栏，但效果不佳。 It gets shrink when its come to the mobile screen but when I clicked on icon nav bar doesn't expand on the mobile screen.当它来到移动屏幕时它会缩小，但是当我点击图标导航栏时，它不会在移动屏幕上展开。 The click icon button doesn't work on when comes on mobile screen.出现在移动屏幕上时，单击图标按钮不起作用。 My code is here.我的代码在这里。 Please help..请帮忙..

<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

The effect is not as desired because CSS is C ascading and .first a:not(:first-child) selector has more priority then .responsive a one.效果并不理想，因为 CSS 是C级联的，并且 .first .first a:not(:first-child)选择器比.responsive a选择器具有更高的优先级。

So, the quickest way to fix your code is to change last .responsive a selector in this way:因此，修复代码的最快方法是以这种方式更改 last .responsive a选择器：

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

Finally, just a couple of suggestions:最后，只有几个建议：

is better to use nav HTML5 element instead of div : it strengthen code semantics最好使用nav HTML5 元素而不是div ：它加强了代码语义
avoid identical @media screen and (max-width: 600px) { media queries: it weakens readability and maintainability避免相同的@media screen and (max-width: 600px) {媒体查询：它削弱了可读性和可维护性
improve class semantics giving more suitable names (eg: rename responsive in open )改进类语义，提供更合适的名称（例如：在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