Почему это работает на Safari и Firefox, но не на Chrome?

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

если вы non't скрыть кнопку с помощью CSS, код работает отлично:

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

http://jsfiddle.net/4towu13r/

лучше, если вы используете -webkit-, -moz, -o- префиксы перехода к.

UPDATE:

объяснение: как-то хром не может активировать <button> внутри <label>, если вы только нажать на <label>флажок проверяется и сделать эту работу. Вот обходной путь JQuery, чтобы сделать работу:

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

рабочий код: http://jsfiddle.net/eapo/4towu13r/3/

Answer 2

Sure!

Это, как я решил проблему:

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