不適用於Android的菜單Chrome Chrome

我爲我的個人投資組合創建了全屏覆蓋菜單。它在桌面上的Chrome/FF/IE以及我的Galaxy S4上的常規Android瀏覽器上工作得非常好。但是，我無法使其適用於Android版Chrome。就好像jQuery沒有在瀏覽器中被切換一樣。不適用於Android的菜單Chrome Chrome

下面的代碼。 JSFiddle here。現場示例here。

HTML：

<div class="button-container" id="toggle"> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 
    </div> 
    <div class="overlay" id="overlay"> 
    <nav class="overlay-menu"> 
     <ul> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="about.php">About</a></li> 
     <li><a href="portfolio.php">Portfolio</a></li> 
     <li><a href="resume.php">Resume</a></li> 
     <li><a href="contact.php">Contact</a></li> 
     </ul> 
    </nav> 
    </div>

JS：

$(document).ready(function(){ 
    $("#toggle").on('click touchstart', function(event) { 
    event.preventdefault(); 
    $("#overlay").toggleClass("open") 
    }); 
});

CSS：

.overlay { 
    position: fixed; 
    background: #FF5252;; 
    top: 0; 
    left: 0; 
    width: 0%; 
    height: 100%; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity .35s, visibility .35s, width .35s ease-in-out; 
      transition: opacity .35s, visibility .35s, width .35s ease-in-out; 
    overflow: hidden; 
    z-index: 100; 
} 

.overlay.open { 
    opacity: .9; 
    visibility: visible; 
    width: 100%; 
} 

.overlay nav { 
    position: relative; 
    height: 60%; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
     -ms-transform: translateY(-50%); 
      transform: translateY(-50%); 
    font-size: 32px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400; 
    text-align: center; 
} 

.overlay nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    display: inline-block; 
    position: relative; 
    height: 100%; 
} 

.overlay nav ul li { 
    display: block; 
    height: 20%; 
    height: -webkit-calc(100%/5); 
    height: calc(100%/5); 
    min-height: 32px; 
    position: relative; 
    opacity: 0; 
} 

.overlay.open nav ul li { 
    -webkit-animation: menuFade .5s ease forwards; 
    animation: menuFade .5s ease forwards; 
    -webkit-animation-delay: .35s; 
    animation-delay: .35s; 
} 

.overlay.open nav ul li:nth-of-type(2) { 
    -webkit-animation-delay: .4s; 
    animation-delay: .4s; 
} 

.overlay.open nav ul li:nth-of-type(3) { 
    -webkit-animation-delay: .45s; 
    animation-delay: .45s; 
} 

.overlay.open nav ul li:nth-of-type(4) { 
    -webkit-animation-delay: .5s; 
    animation-delay: .5s; 
} 

.overlay.open nav ul li:nth-of-type(5) { 
    -webkit-animation-delay: .55s; 
    animation-delay: .55s; 
} 

@-webkit-keyframes menuFade { 
    0% { 
     opacity: 0; 
     left: -25%; 
    } 
    100% { 
     opacity: 1; 
     left: 0; 
    } 
} 

@keyframes menuFade { 
    0% { 
     opacity: 0; 
     left: -25%; 
    } 
    100% { 
     opacity: 1; 
     left: 0; 
    } 
} 

.overlay nav ul li a { 
    display: block; 
    position: relative; 
    color: #FFF; 
    overflow: hidden; 
} 

.overlay nav ul li a:hover { 
    text-decoration: none; 
} 

.overlay nav ul li a:after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0%; 
    -webkit-transform: translateX(-105%); 
    -ms-transform: translateX(-105%); 
     transform: translateX(-105%); 
    height: 3px; 
    width: 100%; 
    background: #FFF; 
    -webkit-transition: .35s ease; 
      transition: .35s ease; 
} 

.overlay nav ul li a:hover:after { 
    -webkit-transform: translateX(0%); 
    -ms-transform: translateX(0%); 
     transform: translateX(0%); 
}

來源

2015-03-02 PaulVO

問題解決了。我的手機緩存了舊版本的JS文件，該文件與新菜單無關。清除緩存解決了所有問題。

來源

2015-03-03 23:08:39 PaulVO

不適用於Android的菜單Chrome Chrome

回答

相關問題