jQuery - переключить слайд над div с контентом

Question

У меня есть «меню» и «изображение», которое переключает меню. (FYI, я не использую jQuery Mobile, я пробовал, и он все испортил). Поэтому я создаю свое «скользящее меню».

Единственная реальная проблема заключается в том, что она скользит по моему «изображению», но не по моему содержимому-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

Может кто-нибудь, пожалуйста, помогите мне здесь?

Answer 1

Добавьте это в ваш код 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>