Question

我正在建立一个带有画布菜单的网站，只是通过浏览器堆栈在iphone 3和4上查看它但是当我点击导航触发器图标时菜单没有从右边滑入，或者我应该说主要内容是不向左滑动以显示菜单。它正在4S及以上版本上工作，所以看起来它不适用于iOS 3,4和5但是在6及以上版本

我在Brackets中使用了自动前缀，它添加了webkit前缀，但仍然无效。

我非常感谢任何帮助。

以下是代码：

         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <div class="nav-trigger-container">
        <label class="ion-navicon" for="nav-trigger"></label>
        <a href="" class="ion-ios-email-outline"></a>
    </div>

    <!-- HERO BOX -->
    <div class="site-wrap">
        <header>
        <div class="row">
            <div class="hero-text-box">
                <h1>Creative zest</h1>
                <h2>for print & web.</h2>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper, enim in fermentum facilisis, enim sem sollicitudin leo, ut tincidunt eros dui eget felis.</p></blockquote>
                    <cite>Sheryn Moore&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Implementation Manager&nbsp;&nbsp;&raquo;&nbsp;&nbsp;Wesleyan brand refesh</cite>
            </div>
        </div>     
    </header>

<!-- ABOUT ME -->
    <section class="freelance-graphic-designer-marc-lemmon">
        <div class="row">
            <h2>Senior Creative Design Consultant<br/>
                & UI Developer</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non diam mollis, mollis dui nec, molestie massa. Ut consectetur tempor nunc vitae interdum. Fusce vel diam ac tortor auctor commodo non ut metus. Donec sollicitudin augue pretium, semper nisi vitae, ultrices diam. </p>
        </div>
    </section>

    **CSS**

    /* ----- Moving the nav trigger to the right when it is clicked ----- */
.nav-trigger:checked + label {
    right: 220px;
}

/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .site-wrap {
    right: 200px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

/* ----- Creating the smooth slide action ----- */
.nav-trigger + label, .site-wrap {
    -webkit-transition: right 0.2s;
    transition: right 0.2s;
}

提前致谢。

马克

Answer 1

你动画“右”的过渡属性是否具有'label'和'site-wrap'元素的定义起始值？当您尝试转换右/左属性时，您还需要定义它的默认起始值，否则它将默认为“自动”。

也许这会解决它：

.nav-trigger + label, .site-wrap {
    -webkit-transition: right 0.2s;
    transition: right 0.2s;
    right:0;
}

Offcanvas菜单 - CSS转换不适用于iphone 3＆amp; 4

1 个答案: