javascript - jQuery-在div上方切换带有内容的幻灯片

我有一个“菜单”和一个“图像”，可以切换菜单。 (仅供引用，我没有使用jQuery Mobile，我已经尝试过了，一切都搞砸了)。为此，我正在创建自己的“滑动菜单”。

唯一真正的问题是它会滑到我的“图像”上，而不滑到我的content-div上。它把它推开了，我似乎无法解决这个问题。我希望我的“菜单”能在所有div上滑动，并且实际上位于一切之上。

的HTML

<div class="menuopties">
    <div id="menu">
        <ul>
            <li>Hello World</li>
            <li>This is me</li>
            <li>Saying hi</li>
            <li>To You</li>
        </ul>
    </div>
    <div id="content">
        <div id="image"></div>
        <div class="innercontent">Some content</div>
    </div>
</div>

的CSS

#image {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}
#menu {
    height: 200px;
    width: 200px;
    background-color: lightblue;
    float: left;
    display: none;
}
.menuopties {
    float: left;
}
#content {
    height: 500px;
    width: 500px;
    background-color: lightgreen;
}
.innercontent {
    background-color: pink;
}

jQuery的

$("#image").click(function () {
    $("#menu").toggle("slide");
});

$("#menu").click(function () {
    $("#menu").toggle("slide");
});

demo

有人可以帮我吗？

最佳答案

将此添加到您的代码position:absolute;left:0;top:0;

$("#image").click(function () {
    $("#menu").toggle("slide");
});

$("#menu").click(function () {
    $("#menu").toggle("slide");
});

#image {
    height: 50px;
    width: 50px;
    background-color: lightgray;
}
#menu {
    height: 200px;
    width: 200px;
    background-color: lightblue;
    display: none;
    position:absolute;
    left:0;
    top:0;
}
.menuopties {
    float: left;
}
#content {
    height: 500px;
    width: 500px;
    background-color: lightgreen;
}
.innercontent {
    background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menuopties">
    <div id="menu">
        <ul>
            <li>Hello World</li>
            <li>This is me</li>
            <li>Saying hi</li>
            <li>To You</li>
        </ul>
    </div>
    <div id="content">
        <div id="image"></div>
        <div class="innercontent">Some content</div>
    </div>
</div>