CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jorrex
Jorrex

Reputation: 1500

jQuery - toggle slide above div with content

I have a "menu" and an "image" which toggles the menu. (FYI, I'm not using jQuery Mobile, I have tried and it messed everything up). Therefor I'm creating my own "sliding menu".

The only real problem is that it slides over my "image", but not over my content-div. It pushes it aside and I cannot seem to fix this. I want my "menu" to slide over all divs and actually be on top of everything.

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

Can someone please help me out here?

Upvotes: 4

Views: 1760

Answers (1)

Akshay
Akshay

Reputation: 14378

Add this to your code 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>

Upvotes: 2

Related Questions