[jQuery] Wysuwający się z boku ekranu panel

W tym artykule przedstawię Tobie sposób na efektownie wysuwające się z krawędzi ekranu menu (może, to być też zupełnie co innego, jakiś div z informacjami lub formularz logowania). Jest on zbudowany na bazie jQuery, HTML oraz CSS.

Zaczynamy od kodu HTML:

<div id="box-lewy">
        <div id="panel">
            <h2>Wysuwający się panel</h2>
            <ul>
                <li>coś</li>
                <li>coś</li>
                <li>coś</li>
                <li>coś</li>
            </ul>
            <form>
                <input type="text" />
                <input type="submit" value="Przycisk"/>
            </form>
        <div id="ukryj">
            <a href="#">&laquo; Ukryj panel</a></div>
        </div>
    </div>
    <div id="pokaz">
    	<span>&raquo;</span>
    </div>
    <div id="tresc">
         Któż by chybiano względy dla tylu, tak i smuci, i w ciąg powieści, pytań wykrzykników i objął gospodarstwo. przyrzekł na pamiątkę, że nas reformować cywilizować będzie i cap! - tak Skwarów w pustki prowadzić. Po cóż te łupy zdobyte. Tuż myśliwców herbowe klejnoty wyryte i nigdy nie policzę. Opuszczali rodziców i sukienka biała, świeżo polewane. Tuż myśliwców herbowe klejnoty wyryte i czuł choroby zaród. Krzyczano na wzmiankę Warszawy rzekł, podniósłszy głowę: Pan świata wie, jak w okolicy. i grabiska suwane po kryjomu. Chłopiec, co jasnej bronisz Częstochowy i pijąc obie kłóciły się dowie kto cię trzeba cenić, ten zamek na.
     </div>

Jak widać, jest to nieskomplikowany kod.
Teraz czas na CSS. który wygląda następująco:

#box-lewy { 
	width: 250px; 
	margin-top: 10px; 
	float: left; 
	overflow: hidden; 
	background: #333;
	color: #FFFFFF;
}
#box-lewy h2 {
	text-align: center;
}
#pokaz { 
	position: inherit; 
	z-index: 2; 
	left: 0; 
	float: left; 
	padding-top: 40px; 
	display: none; 
	width: 0px; 
	height: 100px; 
	cursor: pointer;
}
#pokaz span {
	display: block; 
	font-size: 24px; 
	height: 30px; 
	margin-top: 20px; 
	padding: 10px 0 10px 10px; 
	width: 20px; 
	background: #333;
}
#tresc { 
	padding-top:10px; 
	color:#1c1c1c; 
	margin-left:200px; 
}

A teraz czas na najważniejszy kod w tej poradzie, mianowicie kod obsługujący zdarzenia w jQuery. Dzięki niemu mamy fajny efekt wysuwającego się boxa.

jQuery(document).ready(function(){
 $("#ukryj").click(function(){
 $("#panel").animate({marginLeft:"-250px"}, 500 );
 $("#box-lewy").animate({width:"0px", opacity:0}, 400 );
 $("#pokaz").show("normal").animate({width:"28px", opacity:1}, 200);
 $("#tresc").animate({marginLeft:"50px"}, 500);
 });
 
 $("#pokaz").click(function(){
 $("#tresc").animate({marginLeft:"200px"}, 200);
 $("#panel").animate({marginLeft:"0px"}, 400 );
 $("#box-lewy").animate({width:"250px", opacity:1}, 400 );
 $("#pokaz").animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});

Ten kod w JS proponuję zapisać do osobnego pliku, a potem go załączyć z sekcji HEAD strony, podobnie jak bibliotekę jQuery.
Dla przypomnienia, to wygląda następująco:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mojkod.js"></script>

To będzie wszystko jeżeli chodzi o kod do wysuwanego panelu. Taki panel moze mieć mnóstwo różnych zastosowań i to tylko od Ciebie będzie zależało czy i jak go wykorzystasz.
Demo z tego artykułu jest dostępne --> TUTAJ.