Sprawdź najnowsze wpisy:
[jQuery] Wysuwany boczny panel menu

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.


Demo | Pobierz (.zip)

Co będzie potrzebne?

Podstawy XHTML, średnia znajomość CSS i jeden plik graficzny widoczny poniżej oraz jakaś podstawowa wiedza co to jest jQuery.

przycisk

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:

panel001

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;
}

panel002

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
}

panel003

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.


Zapisz się na newsletter

Nienawidzę spamu tak samo jak Ty, dlatego obiecuję, że nigdy nie sprzedam, ani nie udostępnię nikomu Twojego adresu e-mail.

(W każdej chwili możesz się wypisać, klikając link na końcu każdego maila.)

Tagi: , , ,


  1. King (Reply) czwartek 17 Luty , 2011

    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 ?

  2. King (Reply) piątek 18 Luty , 2011

    Już sobie poradziłem.

  3. jojco (Reply) sobota 5 Marzec , 2011

    Witam, co zrobic zeby panel byl domyslnie wysuniety??
    dziekuje i pozdrawiam

    • Websta (Reply) poniedziałek 7 Marzec , 2011

      Pozmieniaj trochę w skrypcie js. Wywal linię 3, natomiast 7 i 8 zamień miejscami z 12 i 13.

  4. Świetne (Reply) niedziela 6 Marzec , 2011

    Świetne ;). Naprawdę się przydało. No cóż… Dla nie to najlepszy tutorial.

    • Websta (Reply) poniedziałek 7 Marzec , 2011

      Dzięki, polecam się na przyszłość i pozdrawiam.

  5. Rado (Reply) wtorek 15 Marzec , 2011

    A dlaczego nie chce się wysuwać ??

  6. Miłek (Reply) niedziela 20 Marzec , 2011

    Bardzo łatwe do instalacji , przydatne i można z tego zrobić coś fajnego porostu miodzio tutorial ;)

  7. Damian (Reply) piątek 15 Kwiecień , 2011

    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??:).

    • Websta (Reply) poniedziałek 18 Kwiecień , 2011

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

  8. Jacek (Reply) piątek 15 Kwiecień , 2011

    Witam
    A jak zrobić żeby panel był po prawej a nie po lewej stronie?

    • Websta (Reply) poniedziałek 18 Kwiecień , 2011

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

  9. Hi (Reply) wtorek 19 Kwiecień , 2011

    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?

    • Websta (Reply) wtorek 19 Kwiecień , 2011

      Strzelam, że to jakiś konflikt bibliotek. Poczytaj o jQuery.noConflict() na 99% to załatwi sprawę.

      • Hi (Reply) czwartek 5 Maj , 2011

        Rzeczywiście jQuery.noConflict() załatwiło sprawę, chociaż trochę czasu mi zeszło, bo manual sklepu sote5 swoje, a życie swoje :)

        • Websta (Reply) czwartek 5 Maj , 2011

          Najważniejsze, że już działa :)
          Pozdrawiam.

  10. brylinx (Reply) piątek 22 Kwiecień , 2011

    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

  11. NiKo (Reply) wtorek 3 Maj , 2011

    Dość długo szukałam tego skryptu, ale mam jeden dość poważny problem.
    Jak to wszystko ze sobą skleić?

    • Websta (Reply) środa 4 Maj , 2011

      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.

  12. gurol (Reply) piątek 13 Maj , 2011

    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

  13. Marcin (Reply) czwartek 26 Maj , 2011

    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)?

  14. Piotrek (Reply) poniedziałek 20 Czerwiec , 2011

    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?

    • Websta (Reply) poniedziałek 20 Czerwiec , 2011

      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.

  15. młodyyy (Reply) czwartek 23 Czerwiec , 2011

    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 ?

  16. DWito11 (Reply) piątek 22 Lipiec , 2011

    Super skrypcik, fajny tutorial, mam pytanie – jak zmniejszyć szerokość panelu ??

  17. Marcin (Reply) niedziela 24 Lipiec , 2011

    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

  18. Kacper (Reply) sobota 13 Sierpień , 2011

    czy da się zrobić dwa takie menu(jedno pod drugim?

    • Websta (Reply) sobota 13 Sierpień , 2011

      Tak. 4 komentarze wyżej masz odpowiedź.

  19. Kacper (Reply) sobota 13 Sierpień , 2011

    no jest z tego że nie chce się zamknąć ten panel

  20. michi (Reply) poniedziałek 15 Sierpień , 2011

    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? :(

  21. roome (Reply) poniedziałek 22 Sierpień , 2011

    Witam, super tutek ;) Dobra robota. Mam pytanie jak taki panel wstawić do Joomla ? Podzieli sie ktos pomysłem ?

  22. CICHY (Reply) niedziela 28 Sierpień , 2011

    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?

  23. Gosia (Reply) piątek 2 Wrzesień , 2011

    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

  24. pyta (Reply) niedziela 4 Wrzesień , 2011

    Jak to wgrać do joomla!?

  25. pyta (Reply) poniedziałek 5 Wrzesień , 2011

    błagam, niech ktoś powie jak to wgrać

  26. pyta (Reply) poniedziałek 19 Wrzesień , 2011

    halo

  27. ekicam2 (Reply) poniedziałek 19 Wrzesień , 2011

    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.

  28. Maciej (Reply) piątek 7 Październik , 2011

    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

  29. Bart (Reply) czwartek 13 Październik , 2011

    witam. a jak to musze przerobic, zeby wysuwalo mi sie okienko like it facebooka?? czy jest to duzy problem??

  30. pyta (Reply) sobota 15 Październik , 2011

    Jak to wgrać do joomla!? błagam, powiedzcie

  31. neo23 (Reply) poniedziałek 7 Listopad , 2011

    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.

  32. elo (Reply) wtorek 15 Listopad , 2011

    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ć?

  33. pedro (Reply) wtorek 22 Listopad , 2011

    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.

  34. Gabriela Malczewska (Reply) piątek 9 Marzec , 2012

    mam taki problem. skrypt mi działa bez problemu jesli umieszcze go w nowej stronie. nie działa mi (penie zle to robie)gdy go dodaje do mojej istniejącej juz strony. prosze o pomoc

    • Websta (Reply) piątek 9 Marzec , 2012

      Trudno zgadnąć, co to może być ;) Może po prostu nie dodajesz biblioteki jQuery (7 linia pierwszego kodu).

      • gabriela malczewska (Reply) piątek 9 Marzec , 2012

        dodałam wszystko . wyświetla mi tylko ten pasek, ale sie nie chowa ani nie wysówa

        • gabriela malczewska (Reply) piątek 9 Marzec , 2012

          * nie wysuwa

        • Websta (Reply) piątek 9 Marzec , 2012

          Nie jestem w stanie zgadnąć co to może być.
          Podaj link do strony.

  35. Maciej Kukulka (Reply) środa 18 Kwiecień , 2012

    Nareszcie piękny tutorial. Wielkie dzięki. Super napisane!

    • Websta (Reply) niedziela 22 Kwiecień , 2012

      Dzięki, cieszę się, że się przydało ;)

  36. Tomasz Kozik (Reply) środa 16 Maj , 2012

    Skrypcik super. Mam FF wersja 12. Przy odświeżeniu każdorazowo strony okienko samoczynnie wysuwa się, po czym chowa się z powrotem. W czym może być problem? Akurat mam sklep i nie chce tutaj robić jakiejś celowej reklamy. Jeżeli ktoś mógłby sprawdzić jak u niego się zachowuje to menu i napisać na jakiej przeglądarce i w jakiej wersji to testuje, będę wdzięczny. http://www.planszowe.eu Pozdrawiam Tomek

    • Justyna Zwolska (Reply) środa 12 Grudzień , 2012

      Pewnie dla Ciebie to już jest mocno nieaktualne, ale może komuś się przyda:)
      Powiedzmy jeżeli mam ten div z prawej stronyi ukrywa mi się on za pomocą js o 333px w prawo to dla tego diva w css trzeba ustawić też right:-333px; Wtedy przy przeładowaniu strony będzie on ukryty a nie przeszkodzi to w jego wysuwaniu.
      Przy małej ilości kodu nie widać tego efektu i to nie przeszkadza, jednak jeżeli plik ma dużo divów i załączanych skryptów ładowanie trwa więcej niż powiedzmy sekundę i przy każdorazowym przeładowaniu strony slider jest widoczny.
      Niedopatrzenie:)

  37. Sylwester Adam Mandziuk (Reply) niedziela 20 Maj , 2012

    powoduje błedy jeżeli uzywa sie razem z kodem mapy google :(

  38. Marek Adam (Reply) poniedziałek 4 Marzec , 2013

    Jak dla mnie skrypt nie działa na najnowszym jquery :/

  39. Maciek Zachara (Reply) sobota 1 Czerwiec , 2013

    Witam, mam problem jeden. Robię właśnie tym poradnikiem panel użytkownika. Tylko natknąłem się na problem. Jak zrobić to że gdy kliknie się w coś to "otwiera" nowy "panel boczny" i tam są opcje? Proszę o pomoc.

  40. Szefowa Klanu (Reply) piątek 13 Grudzień , 2013

    Witaj…nie umiem sobie z tym poradzić…proszę daj cały kod
    Pozdrawiam

  41. Szefowa Klanu (Reply) piątek 13 Grudzień , 2013

    Witaj…nie umiem sobie z tym poradzić…proszę daj cały kod
    Pozdrawiam

  42. Tomek Szymański (Reply) piątek 14 Luty , 2014

    Witam, a gdyby zamiast animate zrobić to za pomocą jQueryUi ? :) myślę że zdało by egzamin a do wyboru byśmy mieli parę dodatkowych fajnych efektów :) co o tym myślicie?

  43. Maciej Wiktorski (Reply) wtorek 24 Listopad , 2015

    Witam mam pytanie jak najlepiej wstawić to pod cms joomla jak najłatwiej i najszypciej to zrobić?