0

当您单击菜单按钮时，我有一个从我的网站右侧滑出的导航。我遇到了导航转换在 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 会在菜单中添加一个名为“open”的类，如果菜单已经被单击，则删除该类。CSS 集是当您单击它时将显示导航的样式，但也包含 css3 过渡。

愚蠢的过渡不适用于 iPhone。不过，它适用于朋友的 Nexus 7。谁能帮我弄清楚为什么菜单的过渡在 iPhone 上不起作用？我已经尝试了很多东西来让它工作，但如果能有新的眼光就好了。

提前致谢！

4

1 回答 1

0

也许您可以-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);
}
于 2013-06-26T10:28:51.653 回答