Slideout Panel mit JQuery

Auf Basis des Designshack Tutorials habe ich ein Slideout Panel gebaut, welches genutzt werden kann, um z.B. News auf einer Seite anzuzeigen. Mit einem close Button verschwindet das Ganze dann wieder.

In diesem Beispiel ist das Ganze mit einem Window onload implementiert. Dies kann aber durchaus auch auf onlclick Befehle umgebaut werden (Siehe original Tutorial von Designshack).

Um das Ganze zu testen, dann der u.a. Code ganz einfach lokal in ein html file kopiert und ausgeführt werden.

DEMO

<html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("#button").click(function(){
 if ($("#feld").is(":hidden")){
 $("#feld").slideDown("slow");
 }
 else{
 $("#feld").slideUp("slow");
 }
 });
 });
 function close(){
 $("#messageSent").show("slow");
 setTimeout('$("#messageSent").hide();$("#feld").slideUp("slow")', 2000);
 }
 </script>
 <style type="text/css">
 #feldContainer {
 top:-12px; /* Damit das Fenster verschwindet muss der Wert mindestens die Hoehe des Knopfes haben */
 left:700px; /* Position von Links */
 position:absolute;
 float:right;
 }

 #feld {
 height:577px; /* Hoehe des Feldes */
 width:351px; /* Breite des Feldes */
 background: #000000; /* Hintergrundfarbe */
 opacity: .7; /* Transparenz */
 filter: alpha(opacity=70); /* Transparenz */
 -moz-opacity: .7; /* Transparenz */
 display:none;
 font-family: Verdana; /* Schriftart */
 font-size: 13px; /* Schriftgroesse */
 color: #ffffff; /* Textfarbe */
 padding-left: 10px; /* Textabstand vom Rand links */
 padding-right: 10px; /* Textabstand vom Rand rechts */
 padding-top: 125px; /* Textabstand vom Rand oben */
 }

 #button {
 height:12px; /* Hoehe des Buttons */
 width:351px; /* Breite des Bottons */
 padding-left: 10px; /* Textabstand vom Rand links */
 padding-right: 10px; /* Textabstand vom Rand rechts */
 background:#999999; /* Hintergrundfarbe */
 font-family: Verdana; /* Schriftart */
 font-size:9px; /* Schriftgroesse */
 display:block;
 cursor:pointer;
 }
 </style>
 </head>
 <body onload='$("#feld").slideDown("slow");'>
 <div id="feldContainer">
 <div id="feld"><br />
 <h3>Titel:</h3>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aenean commodo ligula eget dolor. Aenean massa. Cum
 sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Donec quam felis, ultricies nec,
 pellentesque eu, pretium quis, sem. Nulla consequat massa
 </div>
 <div id="button">X Schliessen</div>
 </div>
 </body>
</html>

Kommentieren

Kategorien