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 id="gross">
<div id="gross1">
<div id="panel1"  class="panel">nummerdd
<div id="xppfeil1" class="xppfeil">
</div></div>

<div id="raus1"></div>
</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:-30%;
  height:100%;
  width:30%;
  background:#7190e0;
  border:1px solid #215DC6;
  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{
   position:absolute;
   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:relative;
    top:-200px;
   width:100%;
   height:200px;
   background:red;
   z-index:4;
   overflow:hidden;
 }
 
 #gross1{
 width:100%;
 
 overflow:hidden;
   
 }
 
  #gross{
 width:100%;
 
 overflow:hidden;
   
 }

JavaScript

$("#clickme").click(function () {
$("#closetop").click(function(){
$("#topraus").css("display","none")
});
$("#topraus").show().animate({"left":"0px"}, 800)
});
 
   
 
 
      
   
   
   
   
   
 
$("#xppfeil1").addClass("xpup")
$("#xppfeil1").click(function(){
  $("#raus1").show().animate({"top":"0px"}, 800)
  if($('#xppfeil1').hasClass('xpdown')) {
    $("#xppfeil1").removeClass("xpdown")
   $("#xppfeil1").addClass("xpup")
  }else{
    $("#raus1").show().animate({"top":"-200px"}, 800)
      $("#xppfeil1").removeClass("xpup")
   $("#xppfeil1").addClass("xpdown")
  }
  });
   
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     /*
      //.css("display","none")
 if($("#xppfeil1").hasClass() ==xpup){
alert()
 $("#xppfeil1").removeClass("xpup").addClass("xpdown") 
 alert("down")
  }else if($("#xppfeil1").hasClass("") =="xpdown"){ 
 $("#xppfeil1").removeClass("xpdown").addClass("xpup")  

 }
c= $("#xppfeil1").hasClass()
alert(c)
  
     // $("#p1").click(function() 
     
     //   $('#p2').addClass("rr")
 
   //http://www.dhtmlgoodies.com/scripts/image-crop/images/bg_pane_right.gif
    
  //$("div").slideDown(3000);   
  
     
 // if ( $( "#topraus" ).is( ":hidden" ) ) {
  
  
  
 if(fs=='true'){
    $("#xppfeil1").addClass("xpup")
   var  fs ='false';
     }else {
    $("#xppfeil1").removeClass("*").addClass("xpdown") 
   var fs='true';
     } 
      alert(fs)  
  
  
  
  
  .hasClass('') === false)
  
  
  
  
  */