W tym tutorialu pokażę Ci jak zrobić płynnie wysuwany panel z menu strony. Użyjemy do tego minimum xHTML i klika linijek Javascriptu. Dla uproszczenia sprawy użyjemy mojej ulubionej biblioteki jQuery. Panel dla lepszej użyteczności będzie przyklejony z lewej strony okna przeglądarki i nawet przy przewijaniu treści pozostanie w tym samym miejscu. Dodatkowo menu będzie widoczne dla użytkowników z wyłączonym Javascriptem.
Co będzie potrzebne?
Podstawy XHTML, średnia znajomość CSS i jeden plik graficzny widoczny poniżej oraz jakaś podstawowa wiedza co to jest jQuery.
![]()
Na pierwszy rzut oka to tutorial wygląda dość skomplikowanie, ale starałem się wyjaśnić wszystko dokładnie i stąd tyle treści.
Do roboty
Pracę zaczynamy od podstaw czyli pustego szablonu w xHTML. Dodajemy link do najnowszej wersji jQuery (zdalny plik z ajax.googleapis.com) , arkusza stylów CSS. Żeby było prościej nasz kod Javascript umieścimy w znacznikach <script> . Jednak w swoim prawdziwym projekcie lepiej pisać go w osobnym pliku np. skrypt.js .
Na samym końcu <head> dodałem mój ulubiony “rozwiązywacz problemów” dla Internet Explorera, ale o tym kiedy indziej. Na ten moment wystarczy, że tam jest i robi swoje.
Czyli mamy coś takiego:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" /> <title>Wysuwany panel menu w jQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <link rel="stylesheet" href="panel.css" type="text/css" /> <script type="text/javascript"> <!-- skrypt jQuery --> </script> <!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]--> </head> <body> <!-- treść strony --> </body> </html>
Teraz zróbmy nasz panel. Będzie to <div> z listą <ul> jako menu i przyciskiem do otwierania i zamykania. Do body wklejamy kod:
<div id="panel"> <ul id="main_menu"> <li><a href="#">Strona główna</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Kontakt</a></li> </ul> <a href="#" class="slide_button" >Menu</a> </div>
Wygląda to tak:

To tyle jak chodzi o kod xHTML przechodzimy do arkusza styli CSS.
Tło panelu zrobimy niebieskoszare (#223344), do tego białe linki menu z podkreśleniem po najechaniu (:hover). A lista <ul> bez tych “świetnych” kropek.
Pozycje panelu względem strony ustawiłem na fixed(czyli, że nawet przy przewijaniu strony zawsze jest w tym samym miejscu). Panel znajduje się na 50% wysokości okna po lewej.
#panel { background: #223344; padding: 10px; width: 200px; position: fixed; margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px; top: 50%; } ul#main_menu { list-style: none; } #main_menu a { color: #ffffff; text-decoration: none; } #main_menu a:hover { text-decoration: underline; }

Przycisk do otwierania zrobimy tym samym sposobem, który opisałem w Obrazek z efektem hover (rollover) w CSS. Z tą różnicą, że podmiana obrazka nie nastąpi po najechaniu tylko po kliknięciu. Używając position-absolute wystawiam go poza nasz panel. Dodatkowa klasa zamknij przesunie tło po kliknięciu i przycisk będzie oznaczać zamknięcie panelu.
.slide_button { background: url(przycisk.gif); display: block; height: 60px; text-indent: -9999px; width: 20px; position: absolute; right: -20px; top: 0px; } .zamknij { background-position: -20px 0px; } a:focus { outline:none; //usuwanie niebieskiej obwódki w FF }

Teraz przejdźmy do animowania panelu czyli Javascriptu i jQuery. W sekcji <head> w miejscu na skrypt wpisujemy:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ $("#panel").css("left","-220px"); $(".slide_button").toggle(function(){ $("#panel").animate({left: "0px"}, 500 ); $(this).addClass("zamknij"); return false; }, function(){ $("#panel").animate({left: "-220px"}, 500 ); $(this).removeClass("zamknij"); return false; }); }); |
Skrypt działa tak:
Linia1: Początek jQuery
Linia3: Chowamy panel jest to potrzebne, gdyż menu mają widzieć także użytkownicy z wyłączonym Javascriptem. Dlatego nie możemy zrobić tego w CSS.
Linia5: Dla przycisku z klasą slide_button ustawiamy funkcję toggle. Jest to funkcja, która uruchamia po kliknięciu raz funkcje otwierania drugi raz zamykania.
Linia7: Po kliknięciu animujemy wysunięcie panelu. 500 oznacza szybkość wysuwania w milisekundach.
Linia8: Dodajemy przyciskowi klasę zamknij. Zmienia ona wygląd przycisku na “zamykający”
Linia9: Oznacza że nie ma przechodzić pod adres z href w klikanym linku
Linia12: Chowamy panel
Linia13: Usuwamy klasę zamknij, żeby przycisk wyglądał jak na początku
No i gotowe demo panelu. Mam nadzieję, że wszytko jest jasne. Działanie testowałem w Operze, FF, Safari i IE7.
Pytania i problemy z działeniem umieszaj w komentarzach do tego wpisu w miarę możliwości postaram się pomóc.
Edit:
—-
Jeśli chcesz, żeby panel wysuwał się po najechaniu (rollover, hover) wystraczy zamienić linię:
$(".slide_button").toggle(function(){
na:
$("#panel").hover(function(){
oraz jedno i drugie “500″ na:
{queue:false,duration:500}
zapobiegnie to dziwnemu zachowaniu z hover, o którym pisało już kilka osób.

A ja mam taki problem. Przerobiłem ten skrypt tak żeby wysuwał się spod innego diva. W tym celu poprzestawiałem w stylach odległości tak, że panel znalazł się na pożądanej przeze mnie pozycji. Ustawiłem z-index, wygląda dobrze. Jednak po najechaniu na zakładkę robi mi się dyskoteka, panel mruga, ale przestaje gdy tylko zjadę z zakładki. Czym to może być spowodowane ?
Już sobie poradziłem.
Witam, co zrobic zeby panel byl domyslnie wysuniety??
dziekuje i pozdrawiam
Pozmieniaj trochę w skrypcie js. Wywal linię 3, natomiast 7 i 8 zamień miejscami z 12 i 13.
Świetne ;). Naprawdę się przydało. No cóż… Dla nie to najlepszy tutorial.
Dzięki, polecam się na przyszłość i pozdrawiam.
A dlaczego nie chce się wysuwać ??
Bardzo łatwe do instalacji , przydatne i można z tego zrobić coś fajnego porostu miodzio tutorial ;)
Dzięki :)
Piękna sprawa, powiedz mi tylko Kolego jak zmienić miejsce położenia tego panelu na stronie, np., żeby przylegał do środkowego diva gdzie jest wyświetlana stronka??:).
Musisz podziałać z position: absolute i relative zamiast fixed oraz użyć z-index.
Nie wiem co kombinujesz, ale pamiętaj że musisz przewidzieć miejsce na rozwinięcie tego panelu, żeby nie wyjechał “za” przeglądarkę, bo różnych rozdzielczości i wielkości okien ludzie używają.
Witam
A jak zrobić żeby panel był po prawej a nie po lewej stronie?
Zmień w CSS:
właściwość w #panel “left” zmień na “right”
właściwość w .slide_button “right” zmień na “left”
W skrypcie jQuery jest 3 razy “left” więc zmień to na “right”.
Witam,
Świetny tutorial.
Mam jednak problem. Na jednej stronce panel śmiga bez problemu, jednak przy próbie zaimplementowania go w sklepie opartym na sote5 wyświetla się na stałe i nie można go schować.
Spotkałeś się z tym może?
Strzelam, że to jakiś konflikt bibliotek. Poczytaj o jQuery.noConflict() na 99% to załatwi sprawę.
Rzeczywiście jQuery.noConflict() załatwiło sprawę, chociaż trochę czasu mi zeszło, bo manual sklepu sote5 swoje, a życie swoje :)
Najważniejsze, że już działa :)
Pozdrawiam.
Super tutorial :)
Mam pytanie, jak go zmodyfikować, by menu otwierało się jednocześnie z prawej i lewe strony.
Czyli po kliknięciu na przycisk menu otwiera się menu tak jak obecnie + dodatkowe menu z prawej strony.
Będę wdzięczny za informacje.
Pozdrawiam
Dość długo szukałam tego skryptu, ale mam jeden dość poważny problem.
Jak to wszystko ze sobą skleić?
Przeczytaj dokładnie mój artykuł i przeanalizuj demo, które jest do pobrania. Jeśli to nie pomoże, to spróbuj poznać lepiej podstawy, bo to co tu pokazałem jest dość proste.
Cze
Mam dwa pytanka:
1. Po zmianie kodu przycisku aktywującego wysuwanie okna:
“Edit:
—-
Jeśli chcesz, żeby panel wysuwał się po najechaniu (rollover, hover) wystraczy zamienić linię:
… ”
Nie zmienia sie ikona przycisku po otwarciu okna. Czy to jest błąd u mnie czy raczej zabieg
wynikający ze zmiany kodu?
2. Zrobiłem sobie pięć takich przycisków (jeden pod drugim). Każdy otwiera inne okno oraz otwierając pierwszy od góry , reszta przycisków wtym momencie się chowa. Wykorzystałem do tego tylko tój kod nic nowego nie wpisując. Działa to tak że podczas akcji otwierania okna reszta przycisków ma za zadanie się przesunąć poza ekran a podczas zamykania okna ma wrócić na swoje miejsce. Problem sie pojawia w momencie jeśli najadę na ikonę dowolnego przycisku, okno zaczyna sie otwierać i wtym momencie uciekne kursorej z pola otwieranego okna. Okna sie chowa a wraz z nim reszta przycisków pod nim. Wiem dlaczego sie tak dzieje ponieważ nie została dokończona pierwsza część funkcji “otwierania”
a druga “zamykająca” nie została aktywowana to i przyciski pozostają w ukryciu. Żeby były wiidoczne musze wtedy najechać ponownie na przycisk i pozwolić mu otworzyć okno w 100% i podczas zamykania otwierają sie przyciski.
Poniżej pokazuje część przerobionego kodu:
$(function(){
$(“#panel1″).css(“left”,”-220px”);
$(“#panel1″).hover(function(){
$(“#panel1″).animate({left: “0px”}, {queue:false,duration:500} );
$(“#panel2″).animate({left: “-440px”}, {queue:false,duration:500} );
$(“#panel3″).animate({left: “-440px”}, {queue:false,duration:500} );
$(“#panel4″).animate({left: “-440px”}, {queue:false,duration:500} );
$(“#panel5″).animate({left: “-440px”}, {queue:false,duration:500} );
$(this).addClass(“zamknij”);
return false;
},
function(){
$(“#panel1″).animate({left: “-220px”}, {queue:false,duration:500} );
$(“#panel2″).css(“left”,”-320px”);
$(“#panel3″).css(“left”,”-220px”);
$(“#panel4″).css(“left”,”-320px”);
$(“#panel5″).css(“left”,”-220px”);
$(this).removeClass(“zamknij”);
return false;
});
});
gdzie: panel1, panel2 … to otwierane okna za pomocą przycisków 1, 2 itd.
Problem nie wystepuje przy otwieraniu przycisku pierwszą metodą z wiadomych względów. Tam otwieramy i zamykamy okno za pomocą przycisku.
Jeśli mógłbyś mi pomóc to byłbym wdzięczny.
A co do skryptu jest rewelka oraz metoda ukrywania części przycisku. Zawsze mnie denerwowało stosując podmianę obrazków przycisków, że znikały na moment.
pzdr
a co zrobić żeby panelik wysuwał się z góry na dół lub z dołu do góry (z górnej lub z dolnej krawędzi strony)?
A czy można zamienić id na class (np. #panel na .panel)., ponieważ mam problem, gdyż szablon strony jest oparty na divach, a jak wiadomo identyfikator może być tylko jeden. Czy jest jakieś wyjście z tej sytuacji?
Nie do końca rozumiem z czym masz problem. Możesz sobie nazwać ten panel jak chcesz. Pozmieniaj wszędzie #panel na #panel2 czy na cokolwiek innego i wcale nie musisz używać class.
Zrobiłem to na forum i nie wiem dlaczego gdy kliknę to chowa się on pod tematy , nie widać go jak się go wysunie , gdzie może być błąd ?
Super skrypcik, fajny tutorial, mam pytanie – jak zmniejszyć szerokość panelu ??
W CSS musisz zmienić wpis odpowiedzialny za szerokość
/*———-panel———-*/
#panel
{
background: #223344;
padding: 10px;
width: 100px; <=== Zmienione z 200
ale to nie wszystko bo musisz w skrypcie zmienić
$("#panel").animate({left: "-120px"} <=== -120 zmienione z -220
dwukrotnie musisz zmienić; p
Wsio
czy da się zrobić dwa takie menu(jedno pod drugim?
Tak. 4 komentarze wyżej masz odpowiedź.
no jest z tego że nie chce się zamknąć ten panel
A ja mam taki problem…
Da się jakoś przerobić ten panel tak, aby można go było dodać do phpbb 3?
Nie mogę zaimportować kolejnego stylu tylko po to, aby załadować ten panel. Próbowałem już chyba każdego rozwiązania, ale modyfikacja plików .css stylu Forum na własną rękę kończyła się błędem MySQLi… Jakieś pomysły? :(
Witam, super tutek ;) Dobra robota. Mam pytanie jak taki panel wstawić do Joomla ? Podzieli sie ktos pomysłem ?
A ja mam pytanie odnośnie odstępu w środku, bo nie mogę zmienić w żaden mi znany sposób żeby np po wysunięciu menu wszystkie elementy tam umieszczone były bliżej krawędzi. Ktoś podpowie?
Witam,
wszystko fajnie działa, dzięki za zamieszczenie skryptu, ale jak go zmodyfikować, aby panel wysuwał się spod zdjęcia, po najechaniu myszką na to zdjęcie?
Pozdrawiam
Jak to wgrać do joomla!?
błagam, niech ktoś powie jak to wgrać
halo
Witam mam problem IE skrypt nie działa wszyzstko jest wysunięte a na podpalonym lisku działa jak należy. :/ W czym może być problem wszystko zerżnięte z gotowca- w celach edukacyjnych.
Diva #panel chowasz w js – $(“#panel”).css(“left”,”-220px”);
a powinieneś chować go w css – #panel{…..left:-220px;…}
Przy większych stronach (i większym divie #panel) unikniesz w ten sposób denerwującego załadowania go na ekranie przy wgrywaniu się strony.
Pozdrawiam
witam. a jak to musze przerobic, zeby wysuwalo mi sie okienko like it facebooka?? czy jest to duzy problem??
Jak to wgrać do joomla!? błagam, powiedzcie
super panel boczny. ja w nim umieściłem formularz mailowy. i wszystko jest fajnie do chwili jak go wypełnię i wybiorę przycisk wyślij. wtedy panel boczny się chowa. a chciałbym żeby po wysłaniu formularza był nadal widoczny. w jaki sposób ‘zabronić’ mu się chować? proszę o pomoc.
Witam, mam pewien problem z tym skryptem js. Mam postawiony sklep na hostingu home.pl na systemie PresaShop, chcę wrzucić taki panel boczny, lecz gdy tylko dodam ten skrypt to wywala stronę, zamiast strony wyświetla się taki komunikat: “500 Internal Error
The server encountered an internal error and could not complete your request. ”
Wie ktoś może jak temu zaradzić?
W jaki sposób uzyskać efekt płynnego wysunięcia panela menu zaraz po wejściu na stronę a potem powrót do pozycji wyjściowej. Takie chwilowe wysunięcie panela informuje użytkowników o istnieniu wysuwanego menu.
Witam. W jaki sposób zrobić żeby panele na przykład trzy otwierały się niezależnie od siebie? Zmieniłem kod tak jak kilka postów wcześniej ale wszystkie otwierają się naraz i zamykają tak samo …
Super Website…
[...] that is the end of this article. Here you’ll find some sites that we think you’ll appreciate, just click the links over[...]…
… [Trackback]…
[...] Read More here: websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu [...]…
[...] Chcę zrobić slide panel wg. tego skryptu: http://websta.pl/tutoriale/jquery-wysuwa…panel-menu [...]
… [Trackback]…
[...] There you will find 71300 more Infos: websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu [...]…
… [Trackback]…
[...] Find More Informations here: websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu [...]…
… [Trackback]…
[...] There you will find 72289 more Infos: websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu [...]…
Check %BLOGTITLE%…
Read More:%USERURL%…
…[Trackback]…
More info…
…[Trackback]…
Indeed this is a useful post…