Question

我有一个自适应的导航菜单，它的工作原理如下：当您调整窗口大小时，“汉堡包”（三行）会出现一个图标。单击此图标可显示菜单，并通过转换将图标变为“X”图标。单击“X”使菜单消失，图标再次变为三行。

它在Safari和Firefox中完美运行，但它不适用于Chrome。它将三行转换为'X'，反之亦然，但菜单永远不会出现。那是为什么？

以下是代码：

HTML：

    <nav>
        <label for="show-menu" class="show-menu">
            <button class="show-menu button-toggle-navigation">
                <span>Toggle Navigation</span>
            </button>
        </label>
        <input type="checkbox" id="show-menu" role="button">
        <ul>
            <li><a href="about.html">Conóceme</a></li>
            <li><a href="servicios.html">Servicios</a></li>
            <li><a href="port.html">Portfolio</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>

    [...]        

    <script type="text/javascript">
        $('button').on('click', function() {
            $(this).toggleClass('isActive');
        });
    </script>

CSS：

     /*Style 'show menu' label button and hide it by default*/
 .show-menu {
   float: right;
   width: 0;
   height: 0;
   text-align: right;
   display: none;
   margin-right: 15%;
 }

 /*Hide checkbox*/
   input[type=checkbox]{
     display: none;
   }

/*Show menu when invisible checkbox is checked*/
   input[type=checkbox]:checked ~ ul{
      border-top-color: black;
      float: right;
      text-align: center;
      display: block;
      padding-top: 15%;
   }

   .button-toggle-navigation {
       background-color: transparent;
       border: 0;
       border-bottom: 0.25em solid black;
       border-top: 0.25em solid black;
       font-size: 13px;
       cursor: pointer;
       height: 1.5em;
       margin: .75em .375em;
       outline: 0;
       position: relative;
       -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
        transition: border-color 150ms ease-out, transform 150ms ease-out;
       width: 2.25em;
    }

    .button-toggle-navigation::after, .button-toggle-navigation::before {
        border-bottom: 0.25em solid black;
        bottom: .375em;
        content: '';
        height: 0;
        left: 0;
        position: absolute;
        right: 0;
        -webkit-transition: -webkit-transform 200ms ease-out;
          transition: transform 200ms ease-out;
     }

 .button-toggle-navigation span {
    color: transparent;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
  }

  .isActive {
     border-color: transparent;
     -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
   }

   .isActive::after, .isActive::before {
      -webkit-transition: -webkit-transform 200ms ease-out;
      transition: transform 200ms ease-out;
   }

   .isActive::after {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
   }

   .isActive::before {
      -webkit-transform: rotateZ(-45deg);
      transform: rotateZ(-45deg);
   }

非常感谢你的帮助！

P.S：如果你能告诉我一个更好的方法来做这个响应式菜单，我会很感激！谢谢！：）

Answer 1

当然！

这就是我解决问题的方法：

HTML

        <nav>
        <label for="show-menu"xs class="show-menu">
            <button id="pull" class="show-menu button-toggle-navigation"></button>
        </label>
        <ul>
            <li><a href="about.html">Conóceme</a></li>
            <li><a href="servicios.html">Servicios</a></li>
            <li><a href="port.html">Portfolio</a></li>
            <li><a href="contacto.html">Contacto</a></li>
        </ul>
    </nav>

JS

    <script type="text/javascript">
    var menu = $("nav ul");

    $('#pull').on('click', function() {
      $(this).toggleClass('isActive');
      menu.slideToggle(200);
    });
</script>

CSS

/*Style 'show menu' label button and hide it by default*/
 .show-menu {
   margin-top: 7%;
   float: right;
   display: block;
}

 .button-toggle-navigation {
     background-color: transparent;
     border: 0;
     border-bottom: 0.16em solid black;
      border-top: 0.16em solid black;
      font-size: 1em;
     cursor: pointer;
      height: 1.2em;
      margin: .75em .375em;
      outline: 0;
      position: relative;
       -webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
        transition: border-color 150ms ease-out, transform 150ms ease-out;
       width: 2.25em;
      }
       .button-toggle-navigation::after, .button-toggle-navigation::before {
          border-bottom: 0.16em solid black;
          bottom: .375em;
           content: '';
          height: 0;
          left: 0;
          position: absolute;
          right: 0;
          -webkit-transition: -webkit-transform 200ms ease-out;
           transition: transform 200ms ease-out;
         }


         .isActive {
             border-color: transparent;
             -webkit-transform: rotateZ(90deg);
             transform: rotateZ(90deg);
          }
          .isActive::after, .isActive::before {
              -webkit-transition: -webkit-transform 200ms ease-out;
               transition: transform 200ms ease-out;
           }
           .isActive::after {
               -webkit-transform: rotateZ(45deg);
               transform: rotateZ(45deg);
           }
           .isActive::before {
               -webkit-transform: rotateZ(-45deg);
               transform: rotateZ(-45deg);
            }

Answer 2

如果您不使用CSS隐藏按钮，则代码运行正常：

.show-menu {
   float: right;
   text-align: right;
   margin-right: 15%;
 }

http://jsfiddle.net/4towu13r/

如果您使用-webkit-，-moz，-o-过渡前缀，则

会更好。

<强>更新

说明：如果只点击<button> 复选框，Chrome会无法在<label>内激活<label>并完成工作。这是一个jQuery解决方法来完成这项工作：

        checkbox=$('input[role=button]');
        checkbox.prop('checked', !checkbox.prop('checked'));

工作代码：http://jsfiddle.net/eapo/4towu13r/3/

为什么这适用于Safari和Firefox而不适用于Chrome？

2 个答案: