I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and be displayed on top of everything.
Here is the structure of my 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>
Below is the CSS code:
#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;
}
And here is the jQuery script:
$("#image").click(function () {
$("#menu").toggle("slide");
});
$("#menu").click(function () {
$("#menu").toggle("slide");
});
If you want to see a demo, click here.
Could someone provide assistance with solving this issue?