jQuery – 7 – Sidebar Slide In

An der Seite der Website soll fix ein Bereich definiert sein der bei einem Mouseover in die Seite “hereinfährt” und bei Mouseout sich wieder in seinen ursprünglichen Zustand zurück begibt .. hat man sicher auch schon ein paar mal gesehen und ist irgendwie schick 🙂

Ich habe diesen Sidebar Slide In mit Hilfe von jQuery und CSS3 mal gebaut.

Hier erst mal das CSS das die Box dahin bringt wo ich möchte:

#bildergallerie #bildergallerie {
  background-color: #000000;
  border: 0 none;
  box-shadow: 5px 5px 10px #999999;  
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;  
  -webkit-border-bottom-left-radius: 15px;
  -moz-border-radius-bottomleft: 15px;     
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;    
  color: #dddddd;  
  float: right;
  font-size: 10px;
  height: 80px;  
  line-height: 1.5em;  
  margin-right: 0%;  
  opacity: 0.95;
  padding: 15px;
  position: fixed; 
  right: -380px;
  text-align: left;  
  top: 2%;
  width: 450px;
  z-index: 9999;
  }

Wichtig ist hier im Grunde die fixe Position, die Breite von 450 Pixeln und das initital 380 Pixel der Box außerhalb des Viewport liegen .. nur damit lässt sich der Effekt erzielen .. der Rest ist ein bisschen CSS3 und das übliche Styling.

Das jQuery ist da fast einfacher zu verstehen:

$(document).ready(function() {
    $("#bildergallerie").bind("mouseenter",function(){
      $("#bildergallerie").animate({"right": "+=380px"}, "slow");
    }).bind("mouseleave",function(){
      $("#bildergallerie").animate({"right": "-=380px"}, "fast");
    });
  });

Die Methode .bind aktiviert das komplette Element “#bildergallerie” für den Event “mouseenter” und zählt dann die Position “right” langsam um 380 Pixel hoch .. initial hatten wir ja -380 Pixel .. wenn .animate fertig ist haben wir 0 Pixel .. bei “mouseleave” passiert dann einfach das Gegenteil.

Hier nochmal das komplette Slide In Beispiel.

Update 13.06.2011

Besser dieses SlideOut benutzen .. es skaliert und hat weniger DOM Abfragen.

Leave a Reply

Your email address will not be published. Required fields are marked *