Question

我一直在寻找一段时间如何做到这一点但找不到足够好的答案，我发现这个名为Sidr的jQuery插件：here

我想知道的是有一种简单的方法可以创建同样的效果，导航栏从右侧进入，但没有jQuery？

Answer 1

这是一个CSS解决方案。从左侧和右侧（两个）工作。太棒了：

只需使用1行jQuery就可以使用iOS Safari，只需一行。

$('label').click(function() {});

检查出来。

Answer 2

看看css过渡和动画。在this topic，OP要求提供类似的东西。我可以自由地从这个问题的答案中复制jsFiddle。看看它here。

HTML：

<div class="box">
    <a href="#">
        <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg">
    </a>
    <div class="hidden"></div>
</div>

CSS：

.box{
    position: relative;
    overflow: hidden;

}

.box:hover .hidden{

    left: 0px;
}

.box .hidden {    
   background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: -500px;    
    width: 500px;
    opacity: 1;    
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

移动导航栏（没有jquery）

2 个答案: