search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[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.

  • Bardzo fajna sprawa – wykorzystuję to do zrobienia ‚slider-a’ z modułem, ale bardziej by mnie satysfakcjonowało gdyby domyślnie był schowany i oczywiście nie mam pojęcia jak to zrobić.
    No nic taki los matoła.
    Dzięki za świetny materiał pozdrawiam.

  • Krzysztof

    Jak ustawić bo po załadowaniu strony panel boczny był ukryty?

  • Piotr Nalepa

    wystarczy w pliku CSS zdefiniować wartości atrybutów CSS wymienione w zdarzeniu click dla przycisku #ukryj