javascript - 移动导航栏（无 jquery）

Question

我一直在寻找如何做到这一点，但找不到足够好的答案，我找到了这个名为 Sidr 的 jQuery 插件：这里

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

Answer 1

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

http://jsfiddle.net/nicooprat/Aahqh/

只需使用 1 行 jQuery 即可与 iOS Safari 一起使用，仅此而已。

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

看看这个。

Answer 2

看看 css 过渡和动画。在本主题中，OP 要求类似的东西。我可以随意从这个问题的答案中复制 jsFiddle。看这里。

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;
}