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

<div id="raus1">guzg<br>tftzguh<br>zfguz<br></div>
</div> 
  
  
  
 
<div id="gross2" class="gross1">
<div id="panel2"  class="panel">nummer2
<div id="xppfeil2" class="xppfeil">
</div></div>

<div id="raus2" class="raus">guzg<br>tftzguh<br>zfguz<br></div>
</div> 
  
  
  
  
  
  
  
</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:relative;
   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:auto;
   background:red;
   z-index:4;
   overflow:hidden;
 }
 
 
  #raus2{
   position:relative;
    top:-200px;
   width:100%;
   height:100px;
   background:red;
 
   overflow:hidden;
 }
 
 
 
 
 
 .gross1{
   position:absolute;

 width:100%;
 overflow:hidden;
   
 }
 #gross1{
   top:10px;
 }
 #gross2{
   top:40px;
 }

JavaScript

$("#clickme").click(function () {
$("#closetop").click(function(){
$("#topraus").css("display","none")
});
$("#topraus").show().animate({"left":"0px"}, 800)
});
 
   
 
 
      
   
   
   
   
   
 
$("#xppfeil1").addClass("xpdown")
$("#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")
  }
  });
   
     
     
     
     $("#xppfeil2").addClass("xpdown")
$("#xppfeil2").click(function(){
  $("#raus2").show().animate({"top":"0px"}, 800)
  if($('#xppfeil2').hasClass('xpdown')) {
    $("#xppfeil2").removeClass("xpdown")
   $("#xppfeil2").addClass("xpup")
  }else{
    $("#raus2").show().animate({"top":"-200px"}, 800)
      $("#xppfeil2").removeClass("xpup")
   $("#xppfeil2").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)
  
  
  
  
  */