如何用Javascript制作侧滑菜单类型的东西？

Question

不知道他们叫什么。因为某种原因我记不起来了。但是你知道，在很多主页上，他们都有菜单一样的东西，面板通过展示他们的产品来滑动？我非常需要学习如何做到这一点，虽然我实际上是在做一个面板幻灯片，当你点击一些文本。据我所知，这些想法几乎是一样的，只是这些菜单每隔几秒钟就会自动完成一次。

现在，我非常清楚在Javascript方面应该做什么。我现在遇到的问题是(令人担忧的)基本HTML。这就是我得到的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Dat Sliding Menu Doe</title>
    <link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
    <div id="menu1">
        <h1>This is some text.</h1>
        <p>This is some more text.</p>
    </div>

    <div id="menu2">
        <h3>This text is different.</h3>
        <h1>Very different.</h1>
        <p>So different, in fact, that</p>
        <p>the div is a different height.</p>
    </div>

    <script type="text/javascript">

    </script>
</body>
</html>

CSS：

#menu1 {
    position: absolute;
    display: inline-block;
    background: #d8d808;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 0%;
}

#menu2 {
    position: absolute;
    display: inline-block;
    background: #7feaa8;
    color: white;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    margin-left: 100%;

}

不要在意颜色什么的，这只是练习而已！

它正在做它应该做的一切，除了我在页面底部得到一个滚动条，允许我向右滚动并看到第二个div.这是个问题。我是做了一些根本错误的事情，还是只需要添加一些东西来摆脱这个滚动条？

另外，Javascript上也有一点不确定的地方。我如何得到它，使两个div的左边距完全同时变化？即使是轻微的延迟也会出现，对吧？

只链接到教程可能会更容易。我试着研究这个，但我不知道该查什么(忘了它们叫什么！)

编辑

好吧，所以我采纳了乔舒亚·查万的建议，把身体的溢出物藏起来，这是有效的。然后我用Javascript做了这一切：

var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");

switch1.onclick = move;
switch2.onclick = move;

function move() {
    if (menu1.style.marginLeft == 0) {
        show2();
    }
    else {
        show1();
    }
}

function show2() {
    if (menu1.style.marginLeft > -100) {
        menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
        requestAnimationFrame(show2);
    }
}

当我单击switch1时，menu1移动超过10 on，然后停止移动。不知道为什么。

Answer 1

看看自由旋转木马，它会做你想要的一切，你不必自己写。