menü was von oben koomt streifen die durchs bild fliegen

by basti1012

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.min.js"></script>
<br><br><br><div id="clickme">
  Click here
</div>
<div id="topraus"><div id="closetop">
Close
</div><br><br><br> 
<div style="width:100%;display:flex;overflow:hidden;">

<div id="panel1"  class="panel">
nummer1<div id="xppfeil1" class="xppfeil">
</div></div>

<div id="raus1">

</div>
</div>
Dieser text kommt immer wieder wefrtzuj rztrert4z5u 6i75u64z5t 43raus wenn man drauf kklicken tut  
</div> 





<div id="p1">Klick</div><div id="p2">Hallo</div>

CSS

#topraus{
  position:absolute;
  top:0px;
  left:-20%;
  height:100%;
  width:20%;
  background:blue;
  border:1px solid black;
      display: none;
   
 


}
 
#closetop{
    position:absolute;
  top:0px;
  right:0px;
  height:20px;
  width:auto;
  background:grey;
  border:1px solid black;
   cursor:pointer;
    float: left;
    padding:2px;
}





 .xppfeil{
     position:relative;
     left:0px;
   width:18px;
   height:18px;
   border-radius:50%;
   cursor:pointer;
 }
 .xpup{
   background-image:url(http://www.dhtmlgoodies.com/scripts/image-crop/images/arrow_down.gif);
 }
  .xpdown{
   background-image:url(http://www.dhtmlgoodies.com/scripts/image-crop/images/arrow_up.gif);
 }
 
 .panel{
   left:0px;
   width:100%;
z-index:5;
   background-image:url(http://www.dhtmlgoodies.com/scripts/image-crop/images/bg_pane_right.gif);

      align:center;
  display:flex;
justify-content:center;
 
 }
 #raus1{
   position:absolute;
    top:-100px;
   width:100%;
   height:200px;
   background:red;
   z-index:4;
   overflow:hidden;
 }

JavaScript

$("#clickme").click(function () {
    h=$("#topraus").width()
   
 // if ( $( "#topraus" ).is( ":hidden" ) ) {
 $("#topraus").show().animate({"left":"0px"}, 800)
  
  });
 
     $("#xppfeil1").addClass("xpup")  
     $("#xppfeil1").click(function () {
     // s=$("#raus1").offsetWidth()
     
     $("#raus1").show().animate({"top":"100px"}, 800)
      });
      
      
      
      
      
      
      
 f='true';   
  
  $("#xppfeil1").click(function(){
  alert(f)
 if(f=='true'){
     $("#xppfeil1").removeClass("*").addClass("xpup")
     var f = false;
     }else if(f=='false'){
      $("#xppfeil1").removeClass("*").addClass("xpdown") 
     var f=true;
     }
     });
      
      //.css("display","none")
 
  
     // $("#p1").click(function() 
     
     //   $('#p2').addClass("rr")
 
   //http://www.dhtmlgoodies.com/scripts/image-crop/images/bg_pane_right.gif
    
  //$("div").slideDown(3000);