JQuery - switch slide over div with content
I have a "menu" and an "image" that toggles the menu. (FYI, I am not using jQuery Mobile, I tried and it messed things up). Therefore, I create my own "sliding menu".
The only real problem is that it slides over my "image" but not my content-div. He pushes him aside and I can't fix it. 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");
});
Can anyone help me here?
+3
source to share
1 answer
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>
+1
source to share