AJAX lenyíló panel jquery-vel (slide panel)

---

Biztos láttatok már olyan lapot ahol a bejelentkező/regisztráció doboz az oldal tetején, egy lenyíló panelen helyezkedik el.
Ilyen található például a Twitteren is. Most ennek az elkészítését mutatom be, nagyon egyszerű lesz.

Demó
Kezdjük most is azzal, hogy szükségünk lesz a JQueryre, ezt a www.jquery.com oldalról letölthetjük.

Illesszük oldalunkba a jquery js-t.

<script src="jquery.js" type="text/javascript"></script>

A HTML-el kezdjük:

<div id="panel"></div>
<p class="slide"><a href="#" class="btn-slide">Nyisd ki</a></p>

A "panel" id-vel elnevezett div maga a panel ami alapból rejtve van.

A btn-slide class-ra keresztelt a elem, vagyis link a gomb melyre kattintva lenyitjuk majd a fenti panelt.

Nézzünk hozzá egy kis CSS-t hozzá:

 
<style type="text/css">
body {
	margin: 0;
}
 
#panel {
	background: #030;
	height: 200px;
	width: 500px;
	margin: 0 auto;
	display: none;
}
 
.btn-slide {
	background: green;
	text-align: center;
	width: 150px;
	height: 30px;
	margin: 0 auto;
	display: block;
	color: #fff;
}
</style>

Először is a body marginját lenullázzuk.
A panelünknek adunk háttérszínt, meghatározzuk a méreteit, középre zárjuk és megmondjuk neki, hogy alapból ne látszódjon (display: none;).
A gombnak szintén adunk valami színt, méretet és szintén középre zárjuk.

Most jöhet a lényeg:

<script type="text/javascript">
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
</script>

Nem hiszem, hogy sok magyarázatra szorulna, a btn-slide class-ra keresztelt gombra kattintva slideToggle() függvényünk lefut a panel id-vel rendelkező div-en, ami innentől el is végzi a kívánt feladatot a.