Question

当您点击菜单按钮时，我的导航会从我网站的右侧滑出。我的导航转换问题在iPhone上无法正常工作。 以下是我设置的方式：

HTML：

<nav id="main_nav">
    <ul class="nav">
        <li class="services"><a href="#services" class="anchor-animate"><span>services</span></a></li>
        <li class="portfolio"><a href="#portfolio" class="anchor-animate"><span>portfolio</span></a></li>
        <li class="contact"><a href="#contact" class="anchor-animate"><span>contact</span></a></li>
    </ul>
    <div class="social_wrapper">
        <ul class="social">
            <li class="linkedin"><a href="http://linkedin.com/in/jaredtomeck" target="_blank">Let's Connect on Linkedin</a></li>
            <li class="twitter"><a href="http://twitter.com/jaredtomeck" target="_blank">Follow me on Twitter</a></li>
            <li class="dribbble"><a href="http://dribbble.com/jaredtomeck" target="_blank">View my shots on Dribbble</a></li>
        </ul>
    </div>
</nav>

<!-- start #wrapper -->
<div id="wrapper">
    <!-- start Header -->
<header id="main_header">
    <h1 id="logo"><a href="#home" class="anchor-animate">jtwebfolio</a></h1>
    <a href="#main_nav" class="menu-link"></a>
        <a href="#" class="close-menu"></a>
</header>
    <!-- end Header -->
</div>
<!-- end #wrapper -->

jQuery：

// Add class that determines whether navigation hides or shows when menu-link is clicked
$('.menu-link').click(function(event){
    event.preventDefault();
if($('#main_nav').hasClass('open')){
    $('#main_nav').removeClass('open');
}else{
    $('#main_nav').addClass('open');
}
});

CSS：

#main_nav {
    background: #3B3B3B;
    height: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 7px;
    z-index: 99;
    -webkit-transition: width 0.4s ease;
    -moz-transition: width 0.4s ease;
    transition: width 0.4s ease;
}

#main_nav .nav {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#main_nav .nav li {
    height: 33.333333333%;
    padding: 0 7px 0 10px;
    text-align: center;
}

#main_nav .nav li a {
    color: white;
    font-family: "Panefresco400wtRegular", sans-serif, sans-serif;
    font-weight: normal;
    display: block;
    font-size: .875em;
    height: 100%;
    letter-spacing: 3px;
    margin: 0 auto;
    position: relative;
    text-decoration: none;
    width: 90%;
}

#main_nav .nav li a span {
    display: block;
    position: absolute;
    top: 52%;
    width: 100%;
}

#main_nav .nav li.services {
    background: #ff8772;
    text-shadow: 0 1px 0 #ba5f4f;
}

#main_nav .nav li.services a {
      background: url(../img/navicon_services.svg) no-repeat center 41%;
}

#main_nav .nav li.portfolio {
    background: #009491;
    text-shadow: 0 1px 0 #005a58;
}

#main_nav .nav li.portfolio a {
    background: url(../img/navicon_portfolio.svg) no-repeat center 40%;
}

#main_nav .nav li.contact {
    background: #ffc845;
    text-shadow: 0 1px 0 #a7832c;
}

#main_nav .nav li.contact a {
    background: url(../img/navicon_contact.svg) no-repeat center 43%;
}

#main_nav.open {
    width: 50%;
}

#main_nav.open + #wrapper {
    width: 100%;
}

#main_nav.open + #wrapper #main_header {
    width: 70%;
}

所以基本上，当你点击菜单按钮时，jQuery会在名为＆＃34; open，＆＃34;的菜单中添加一个类。如果已经点击了菜单，则删除该课程。 CSS设置了单击时显示导航的样式，但也包含css3过渡。

愚蠢的过渡并不适用于iPhone。不过，它适用于朋友的Nexus 7。任何人都可以帮助我了解为什么菜单转换不适用于iPhone？我已经尝试了很多东西来让它发挥作用，但是对它有新的眼光会很高兴。

提前致谢！

Answer 1

也许您可以使用-webkit-transform: translate3d(0, 0, 0);功能来代替？

以下是jsfiddle中的示例。它有它的缺点，但它似乎在iPhone上工作。

CSS

#main_nav {
    background: #3B3B3B;
    height: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    z-index: 99;
    -webkit-transition:all 0.5s ease;
    transition:all 0.5s ease;
    -webkit-transform: translate3d(193px, 0, 0);
    -moz-transform: translate3d(193px, 0, 0);
}

#main_nav.open {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

iPhone上的jQuery / CSS导航故障

1 个答案: