Sprawdź najnowsze wpisy:

[jQuery] Wysuwany boczny panel menu

By

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

Be Sociable, Share!

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: , , ,


136 Komentarzy
  1. 96th (Reply) wtorek 5 Maj , 2009

    Już mi z tym pomogli na IRC jQuery, ale to chyba jest o wiele czystsze i prostsze, dzięki :D

  2. damian (Reply) piątek 15 Maj , 2009

    jak zrobić by menu było i otwierało się z drugiej strony (prawym boku)????

  3. Websta (Reply) piątek 15 Maj , 2009

    Pierwsze co musisz zrobić, to przygotować odpowiedni przycisk w Photoshopie.
    Kod XHTML zostaw bez zmian.

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

    I tyle. U mnie śmiga.

  4. damian (Reply) piątek 15 Maj , 2009

    dzięki piękne działa!!! : ) : )

    • Paweł (Reply) niedziela 31 Maj , 2009

      Jednak nie działa pod IE6

      • Websta (Reply) niedziela 31 Maj , 2009

        Dla IE6 trzeba zmienić niestety position: fixed na position: absolute.
        Ew. zastosować hacka dla fixed.
        Z kolei jQuery nie wpsiera 5.5 więc w tym wypadku odpada i panel jest cały czas otwarty.

        P.S. Postaram się na dniach dodać do postu opcję dla IE6

  5. by_ikar (Reply) piątek 26 Czerwiec , 2009

    Ślicznie podziękował! Normalnie wszędzie szukałem sposobu na to żeby zrobić właśnie takie menu na swoją stronę :D teraz już nie muszę szukać dodane do zakładek :D piękna sprawa :D

  6. Catter (Reply) piątek 14 Sierpień , 2009

    Wszystko gra… Dopóki nie na podstronie nie pojawia się prosty kod php wstawiający komentarze:

    Wtedy przy ładowaniu strony panel boczny jest przez moment widoczny. Nie wiem czemu, bo funkcję include w php łyka to to bez problemu.

    Ja chciałam zrobić tak, żeby wysuwały mi się komentarze w takim panelu bocznym, ale kiedy w tym panelu jest ten ww. kod php, to miga mi wtedy przy ładowaniu strony i nie mogę go też zmusić do wyświetlenia linku-obrazka.

    Czy ktoś wie, jak to obejść? A może powinnam poszukać jakiegoś innego rozwiązania? Podpowiedzi?

  7. matkli110 (Reply) środa 21 Październik , 2009

    Bardzo fajne menu jesli chodzi o prostote kodu. Mam tylko jedna uwage. Nie wszyscy kapuja ze trzeba kliknac zarówno zeby otworzyc jak i przede wszystkim zamknac, najezdzajac na panel obrazka. Wydaje sie, ze fajniejsze by bylo gdyby zamiast klikniecia menu otwieralo sie po najechaniu kursora i bylo otwarte tak dlugo jak kursor jest w obrebie pola menu a zamykalo by sie jak kursor opuszcza pole menu. Chyba ciekawiej i prosciej dla visitorsów.
    Ja niestetu w JavaSripcie jestem noga i dla mnie to magia – jeszcze? :-(
    Ale może Ty?

    • Websta (Reply) środa 21 Październik , 2009

      Dodałem rozwiązanie na końcu postu.

  8. matkli110 (Reply) środa 21 Październik , 2009

    Hej! Jeszcze raz, bo mi sę przypomniało :-)))))))
    Mnie bardzo by się przydało coś takiego jak to menu lecz ciut inne i też oparte na css. Chodzi mianowicie o link graficzny np w formie np bannera a po najechaniu wysuwa się nadół panel z linkami lub ikonami itp po zjechaniu kursora zamyka się. Jest cos takiego np na stronie: http://pl.html.net/tutorials/css/ w srodkowej szpalcie u góry i nazywa się „ATT THIS”.
    To jakby przróbka Twojego panelu. Czy jest gdzieś dostępny taki wariant?
    Pozdro
    Matti

    • Websta (Reply) środa 21 Październik , 2009

      Jak się dobrze zastanowisz, to opcja, której szukasz to dokładnie to samo, co rozwijane menu. Różnica jest taka, że zamist znajdować się w liście jest pojedyńczym przyciskiem.
      Wystarczy poszukać „jQuery drop down”. Masz tu np. coś podobnego http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/. Ogólnie znajdziesz całą masę takich menu z różnymi efektami.

  9. matkli110 (Reply) środa 21 Październik , 2009

    Dzięki serdeczne za pomoc, faktycznie najpierw strzeliłem a potem się zastanowiłem. Można przecież zastosować kodowanie prostego drop menu.
    Ale jak już mam się przyczepić, to bardzo liczyłem na Twoją pomoc w moim pytaniu na http://www.webmastertalk.pl/pozycjonowanie-w-css-t-2602.html
    męczy mnie to a wydaje się chyba w miarę prostą sprawą, supermoderatorze :-))))))

    Dzięki i pozdrowienia
    Matti

    • Websta (Reply) środa 21 Październik , 2009

      Hehe .. świat jest mały. Te sprawy to już na forum :)

  10. Asaurus (Reply) czwartek 12 Listopad , 2009

    Witam

    Na wstępie bardzo dziękuję za zamieszczenie powyższego kodu i wytłumaczenie krok po kroku co do czego służy. Po lekkim uproszczeniu użyłem go na stronie, którą właśnie tworzę:

    http://www.angelsdream.yoyo.pl/

    w wersji automatycznie rozwijającej się po najechaniu na krawędź. Działa świetnie poza małym szczegółem, którego z braku wiedzy nie jestem w stanie rozwiązać. Mianowicie mam szeroki ekran i po lewej stronie okna z treścią strony mam w przeglądarce kolumnę z kartami i drugą z zakładkami, tak że mój pasek menu na stronie wypada pomiędzy kartami i zakładkami przeglądarki a treścią strony. Problem polega na tym, że menu mi się otwiera i natychmiast zamyka jak przejeżdżam znad paneli do treści strony. Jeszcze lepiej jest jak kilka razy przejedzie się nad menu w lewo i prawo, przez opóźnienie w rozwijaniu potrafi ładnych parę sekund rozwijać się i zwijać jak szalone. Wiem, że mógłbym ten problem rozwiązać przerzuceniem menu na prawo ale byłby to samo gdyby ktoś chciał przewinąć stronę paskiem przewijania a nie rolką w myszce, ewentualnie mógłbym skrócić wysokość menu aby nie była na całą wysokość strony ale przy większej ilości tekstów zabraknie mi miejsca. Więc pomyślałem aby zmodyfikować kod tak aby poza wykrywaniem czy się najechało (hover) nad menu też sprawdzał czy nadal kursor jest nad nim i ewentualnie przerywał wysuwanie jeżeli tylko się śmignęło nad menu.

    Mam nadzieję, że nie zagmatwałem za bardzo.
    Jeszcze raz dziękuję i pozdrawiam.

    • Websta (Reply) piątek 13 Listopad , 2009

      Głównym założeniem panelu była akcja click, a głównym załozeniem tutka (jak większości na tym blogu) jest prostota. Raczej rodaje tutaj wędki niż ryby :).

      Żeby rozwiązać Twój problem najlepszym wyjściem będzie rozbudowanie skryptu o $.special.event.hover, który sprawdza szybkość poruszania się myszki. W tym celu musisz użyć pluginu, tutaj masz opis http://blog.threedubmedia.com/2008/08/eventspecialhover.html
      Drugim jeszcze prostszym wyjściem jest hoverIntent, jest to również dodatkowy plugin do jQuery http://cherne.net/brian/resources/jquery.hoverIntent.html

      Są to już rzeczy wykraczające poza ten tutorial i nie będę ich tu niestety opisywać. Chyba, że kiedyś powstanie nowa wersja tutka :)

      Pozdrawiam.

      • Asaurus (Reply) niedziela 15 Listopad , 2009

        Dziękuję za naprowadzenie, nie lubię otrzymywać gotowych rozwiązań bo w ten sposób nic się nie nauczę. Jeszcze raz dzięki za tutorial, i że w ogóle ci się chce użerać z takimi żółtodziobami jak ja ;)

        • Websta (Reply) czwartek 19 Listopad , 2009

          Każdy kto chce się uczyć zasługuje na pomoc :)
          Jak dałeś radę to już taki żółtodziób nie jesteś.

          Pozdrawiam i zapraszam ponownie

      • Asaurus (Reply) niedziela 15 Listopad , 2009

        Właśnie wypróbowałem oba sposoby do ,których podałeś linki i działają świetnie. Różnice są bardzo subtelne. Pierwszy $.special.event.hover zajmuje o 1kb mniej na serwerze ale drugi hoverIntent jest mniej obciążający dla komputera co objawia się mniejszym skakaniem menu zrobionym na półprzezroczystym png’u. Wybór padł stanowczo na hoverIntent.

        Pozdrawiam serdecznie.

  11. pawel (Reply) środa 20 Styczeń , 2010

    Witam,
    jak zmnijeszysc szerokosc menu? bo jakos nie moge do tego dojsc

    • Websta (Reply) środa 20 Styczeń , 2010

      Szerokość to width w CSS i left w jQuery

  12. pawel (Reply) środa 20 Styczeń , 2010

    jeszcze jedno niestety nie dziala pod IE czy jest jakies rozwiazanie dla tej przegladarki?

    • Websta (Reply) środa 20 Styczeń , 2010

      Pod IE7 działa bo testowałem. Dla 6 zamiast fixed, trzeba dać absolute, o czym już pisałem w komentarzach, ew. zastosować jakiś hack. W 5.5 nie działa, bo jQuery nie wspiera tej przeglądarki.

  13. Sławek (Reply) sobota 27 Luty , 2010

    Miałbym malutką prośbę. Próbowałem wykorzystać ten tutorial do zrobienia wysuwanego bocznego panela , z Fanboxem facebooka, tak jak jest zrobione na demotywatory.pl. Wszytsko jest w miare ok, obrazek sie wysuwa po najechaniu, ale nie wyświetla się nic. W którym miejscu powinienem wkleic kod fanboxa zeby wyswietlao sie prawidlowo ? Bo jak zamieniam kod facebooka z tym menu w body, to nic sie nei wyswietla :/

    • Websta (Reply) sobota 27 Luty , 2010

      Nie mam konta na FB, więc nie próbowałem. Kod musisz wstawić zamiast ul o id=menu najlepiej w jakimś div-ie. Zacznij od tego, żeby wyświetlał się ten fanbox, bo pewnie tu robisz błąd, a potem dopiero dodaj jQuery. Wątpię, że kod js panelu powoduje to, że Ci się nie wyświetla.

  14. Slawek (Reply) sobota 27 Luty , 2010

    No wlasnie wstawiam zamiast ul, w divie ale nie wyswietla sie nic.
    Kod jest na 100% sprawny, bo wszedzie indziej działa.

    • Websta (Reply) sobota 27 Luty , 2010

      A bez jQuery działa Ci ten panel?
      Daj link do tej strony może coś poradzę.

    • Websta (Reply) sobota 27 Luty , 2010

      Sprawdziłem panel dział bez zastrzeżeń (otwiera się i zamyka, wstawiłem tam zwykły tekst i też działał), a to że nie pokazuje Ci się fanbox to pewnie wina konstrukcji Twojej strony. Masz tam ponad 50 błędów i ponad 100 ostrzeżeń, więc może to być cokolwiek. Chyba czas tam posprzątać.

  15. Sebastian (Reply) środa 5 Maj , 2010

    Świetny plugin. Stosując go na swojej stronie, natrafiłem jednak na spory problem. Istnieje możliwość wprowadzenia zmian do kodu, aby cały box wyświetlany był nad treścią strony, a nie pod nią?

    • Websta (Reply) środa 5 Maj , 2010

      To już zależy od Twojej strony. Jeśli dobrze Cię rozumiem to daj mu np. z-index: 100; w CSS lub 1000, trudno powiedzieć co tam masz wyżej.

      • Sebastian (Reply) czwartek 6 Maj , 2010

        dzięki, działa i wreszcie nareszcie dobrze się prezentuje.

  16. Sebastian (Reply) czwartek 6 Maj , 2010

    aktualnie wykorzystując zmianę na „$(„#panel”).hover(function(){” pojawił się taki problem, że panel pojawia się i chowa pojawia się i chowa pojawia się i chowa (bezustannie lub tylko kilkakrotnie) po najechaniu na przycisk.

  17. Artur (Reply) poniedziałek 17 Maj , 2010

    co zrobić by panel w wersji hover, przy ładowaniu strony był schowany? Bo teraz pokazuje mi się cały i jak się wszystko załaduje, to dopiero się chowa.

    • Websta (Reply) poniedziałek 17 Maj , 2010

      Zapomniałeś o jednej linijce kodu, tej która go zamyka.

      • Artur (Reply) poniedziałek 17 Maj , 2010

        dzięki, nie zauważyłem wcześniej ;)

  18. latino (Reply) czwartek 27 Maj , 2010

    Witam. Posiadam szablon pod EF dodalem efekt wszystko ladnie pieknie dziala jednakze nie wyswietla mi przycisku :(

  19. latino (Reply) czwartek 27 Maj , 2010

    Ok mój błąd podałem złą ścieżkę do grafiki :D

  20. latino (Reply) czwartek 27 Maj , 2010

    Mam tylko pytanie w jaki sposób mogę ten panel wrzucić na górę mojej stronki aby animacja postępowała w pionie a nie w poziomie. Czyli panel na gorze strony animowany ku dołowi…

  21. latino (Reply) czwartek 27 Maj , 2010

    Dziękuję za pomoc :) Pozdrawiam :)

  22. Krystian (Reply) czwartek 17 Czerwiec , 2010

    Chcę zrobić panel z prawej strony i zrobiłem tak jak napisałeś:

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

    panel dalej jest po lewej i jest cały czas widoczny/”rozwinięty” Co jest nie tak ?

    Gdybyś mógł, napisać jeszcze co zrobić aby panel wysuwał się z tłem, dokładnie tak jak na demotywatorach.

    • Websta (Reply) czwartek 17 Czerwiec , 2010

      Coś w takim razie robisz źle :) To działa. Sprawdź czy zrobiłeś wszystko, bo mi się wydaje, że tylko w js zmieniłeś, a w pliku css nie, no ale wróżką nie jestem. Dasz radę ;)

  23. Mati (Reply) czwartek 17 Czerwiec , 2010

    A jak zrobić kilka takich paneli, jeden pod drugim ? Próbowałem wszystko kopiować i pozmieniałem nazwy ale nic nie działa :/

    • ad (Reply) sobota 31 Lipiec , 2010

      podpinam się do pytania

  24. Mati (Reply) piątek 18 Czerwiec , 2010

    juz działa ;)

  25. mts (Reply) poniedziałek 28 Czerwiec , 2010

    Witam.

    Bardzo fajny efekt.
    Ale mam z nim problem. Mianowicie chcialbym aby ramka chowała się nie poza przeglądarką lecz pod innym divem.. Nie moge nic z tym wykombinowac. Próbowałem juz z z-index i nic.

    Jest na to jakis sposob?

    pozdr

    • Websta (Reply) piątek 2 Lipiec , 2010

      Nie do końca wiem jakby to miało wyglądać, ale jak sam widzisz to jest „taki” panel, a nie inny i może akurat tego nie da się zrobić w ten sposób :)

  26. mts (Reply) niedziela 4 Lipiec , 2010

    Chodziło o to aby panel wyjeżdżał „spod ” div’a tak jak np. by sie chował pod tą białą kolumną z komentarzami, a nie pozakrawędzą przeglądarki.

    juz sobie poradziłem nagrzebałem kilka divów z position relative i absolute do tego z-index jedno w drugim trzecim i czwatym i jakos wyszlo :P

    miałem problem bo tła z cieniami i w ogole.

    ale juz ładnie wszystko działa.

    pozdrawiam

  27. gosc (Reply) środa 21 Lipiec , 2010

    siemka. swietny txt. mam pytanie ale odnosnie css. w slide_button mamy ceche text-indent: -9999px. dlaczego tak duza wartosc ujemna?

  28. gosc (Reply) środa 21 Lipiec , 2010

    tzn. widze ze jak sie nie da w tej regule text-indent to napis Menu nie znika ale po co wogole sie to robi. nie lepiej wogole nie pisac Menu w znaczniku ?

    sorry za 2 posty

  29. ad (Reply) sobota 31 Lipiec , 2010

    Wielkie dzięki szukałem takiej wtyczki do wordpress’a ale nie znalazłem i to mi ratuje skórę ! :D

  30. Websta (Reply) sobota 31 Lipiec , 2010

    @ ad i gosc odpowiedź macie tu: http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css W tym wypadku nie jest niezbędne dodawanie tekstu i ukrywanie go, ale to dobry zwyczaj.

  31. Piotrek (Reply) środa 25 Sierpień , 2010

    Po załadowaniu strony jest ok, ale w trakcie nie. Czy mogę coś zrobić, aby ten panel nie pokazywał się na „dzień dobry”? Nie wiem jakieś livejuery dodać? Czy jak?

    • Websta (Reply) środa 25 Sierpień , 2010

      Nie wiem jaką masz tam kolejność wczytywania i umieszczania kodów itd. Spróbuj po prostu zamknąć go w CSS, zamiast w js (robi to 3 linijka kodu) czyli daj w pliku ze stylami left: -220px;

  32. rafał (Reply) wtorek 31 Sierpień , 2010

    czesc… swietne to jest tylko jak mozna ustawic aby ten panel pokazywal sie dopiero po zaladowaniu?
    probowalem z {display:none;} ale nie dziala…

    prosze o szybka odpowiedz dzieki

    moje gadu 8105326

    • Websta (Reply) wtorek 31 Sierpień , 2010

      Zobacz komentarz powyżej.

  33. rafał (Reply) wtorek 31 Sierpień , 2010

    tak tylko za bardzo nie rozumiem o co chodzi…

    Spróbuj po prostu zamknąć go w CSS, zamiast w js (robi to 3 linijka kodu) czyli daj w pliku ze stylami left: -220px;???

    a tak bardziej lopatologicznie?

  34. Vega (Reply) piątek 10 Wrzesień , 2010

    Witam,
    mam pytanie dotyczące pozycji tego menu. Stronę mam ustawioną na środku (wycentrowaną).
    Strona składa się z 3 divów (lewy, środkowy, prawy). Chcę umieścić to menu w tym lewym i to mi się udało. Jednakże wystaje on poza div’a. Myślałem, że jak zdefiniuję szerokość div’a to menu się dopasuje jednakże tak nie jest. Panel mam umieszczony w tym divie :)

    Pozdrawiam

  35. DiKey (Reply) poniedziałek 13 Wrzesień , 2010

    Witam, prawie wszystko śmiga. Prawie… Skrypt biblioteki IE8 podany w linku jest nieaktualny (link not found), przez co źle wyświetla ten panelek na Internet Explorer. Można by to uaktualnić :)

    Pozdrawiam
    DiKey

    • Websta (Reply) poniedziałek 13 Wrzesień , 2010

      Skrypt dla IE nie jest niezbędny, ale i tak działa. Demo po IE funkcjonuje poprawnie, więc problem jest na Twojej stronie.

  36. BanQ (Reply) piątek 1 Październik , 2010

    Cześć, czy jest gdzieś przetłumaczona wersja tego tutoriala http://blog.threedubmedia.com/2008/08/eventspecialhover.html ?
    Bo potrzebny mi jest special hover.

  37. maven (Reply) piątek 1 Październik , 2010

    Fajny tutorial, ale mam pewnien problem. po przerobieniu tego menu na element menu, wszystko dziala ale do momentu az wkleje kod do mojej strony, na stronie „testowej” jest wszystko ok.

    po wgraniu tego na moja strone panel w ogole sie nie chowa caly czas jest w miejscu… :) wiecie może w czym problem ? http://screenshooter.net/3446442/skrin_60

  38. wm (Reply) niedziela 10 Październik , 2010

    Po zamianie $(„.slide_button”).toggle(function(){ na $(„#panel”).hover(function(){ rzeczywiście panel wyjeżdża po najechaniu na grafikę, jednakże w momencie najechania w pewne miejscie (pod znaczkiem menu) czasami panel zaczyna świrować tj: wysuwa iś i chowa kilkakrotnie. Jak usunąć ten bug? Być może przyczyną moze być jquery ui tabs użyte wewnątrz panelu.

    • Websta (Reply) niedziela 10 Październik , 2010

      Ta sprawa była już poruszana w komentarzach, żeby działało to elegancko najlepiej użyj dodatkowo tego http://cherne.net/brian/resources/jquery.hoverIntent.html Naprawia to problem i daje kilka dodatkowych opcji do kontrolowania hover.

      • wm (Reply) niedziela 10 Październik , 2010

        Samo dołączenie biblioteki nie poskutkowało.

      • wm (Reply) niedziela 10 Październik , 2010

        Niestety nie pomoglo, na stronie podanej ten problem tez występuje.

        • Websta (Reply) czwartek 14 Październik , 2010

          Zrobiłem mały update tutorialu dla hover, to rozwiąże Twój problem.

  39. Danio (Reply) piątek 22 Październik , 2010

    Witam. Mam problem. Używam danego skryptu:

    [code]

    $(function(){

    $("#panel").css("left","-720px");

    $(".slide_button").toggle(function(){

    $("#panel").animate({left: "0px"}, 500 );
    $(this).addClass("zamknij");
    return false;
    },
    function(){
    $("#panel").animate({left: "-720px"}, 500 );
    $(this).removeClass("zamknij");
    return false;
    });

    });

    fasdadfavfasdfvadfvad
    Serwery

    #panel
    {
    background: #223344;
    padding: 10px;
    width: 700px;
    height: 150px;

    position: fixed;
    margin-top: -100px;
    z-index: 1000;
    left: 0px;
    top: 50%;

    }

    #main_menu a
    {
    color: #ffffff;
    text-decoration: none;
    }

    #main_menu a:hover
    {
    text-decoration: underline;
    }

    .slide_button
    {
    background: url(http://i56.tinypic.com/21l3k2o.png);
    display: block;
    height: 60px;
    text-indent: -9999px;
    width: 20px;

    position: absolute;
    right: -20px;
    top: 0px;
    }

    .zamknij
    {
    background-position: -20px 0px;
    }

    a:focus {
    outline:none;
    }

    [/code]

    Tam, gdzie się umieszcza treść spróbowałem umieścić tabelkę i się nie udało. Proszę o pomoc.

    • Websta (Reply) piątek 22 Październik , 2010

      Niezbyt rozumiem co znaczy „nie udało się”. Ogólnie musi być przycisk i div#panel, a to co w niego wstawisz nie ma znaczenia (obrazek, tabela, menu itd.).

      Musisz mieć błąd gdzieś indziej.

  40. Danio (Reply) sobota 23 Październik , 2010

    Gdy wstawiam tabelę na forum przycisk do wysuwania znika. Gdy wstawię dowolną treść działa poprawnie.

  41. Danio (Reply) piątek 5 Listopad , 2010

    Już sobie poradziłem, po prostu źle wstawiałem. Teraz mam następne pytanie. Czy jest możliwość wstawić 2-3 takie same przyciski? Jak to zrobić?

  42. SLAiDEREK (Reply) niedziela 21 Listopad , 2010

    Witam
    Może mi ktoś podpowie zrobiłem za pomocą tego tutoriala przyciski do widgetow social takich jak fb, tw i nk każdy jest jeden pod drugim lecz ich ustawienia położenia wobec się są ściśle uzależnione od wielkości okna przeglądarki strikta tego kto jaką ma rozdzielczość i monitor. Może mi ktoś podpowie jak mogę ustawić im statyczną pozycję np 100-150px od top i każdy o 50-60px niżej od siebie ?. Proszę o pomoc. Pozdrawiam

    • Websta (Reply) poniedziałek 22 Listopad , 2010

      Ustaw pierwszemu #panel zamiast top: 50%; top 150px; kolejnemu 200px; kolejnemu 250px; Jeśli dobrze zrozumiałem.

  43. SLAiDEREK (Reply) wtorek 23 Listopad , 2010

    Pomogło super wielkie dzięki !!. Pozdrawiam

  44. Gregor (Reply) wtorek 23 Listopad , 2010

    No niby wszystko cacy, ale jak wyciąłem sobie java script i wprowadziłem na stronę, wszystko działało, zrobiłem CSSa itd, ale… tylko na FF. Na chrome miałem cały czas wysunięty sidebar i nie dało się go chować. Co prawda ten, który dałeś do ściągnięcia działał super, ale już jak sam napisałem to tylko w FF bez poblemu.

    • Websta (Reply) środa 24 Listopad , 2010

      Sam widzisz, że problem leży po Twojej stronie. FF często dość luźno traktuje błędy. Trudno powiedzieć co może być nie tak. Stawiam, że masz jakieś konflikty js, może oprócz jQuery używasz też Prototype… mogę tylko strzelać…

  45. Gregor (Reply) środa 24 Listopad , 2010

    To może jeszcze inaczej zapytam… Czy można załadować 2 różne CSSy i 2 różne pliki JS na starcie? Sorry, że takie lamerskie pytania, ale uczę się ciągle ;)

    • Websta (Reply) piątek 26 Listopad , 2010

      Oczywiście można ;)
      BTW czym mniej plików tym lepiej.

  46. Kamil (Reply) piątek 31 Grudzień , 2010

    Chciał bym zrobić u siebie na stronie takie coś, ale żeby najpierw było otwarte zamiast zamknięte i żeby do tego była opcja zamknięcia.. Dużo to przeróbek? I jeszcze jedno pytanie.. Można tam w środku umieścić zamiast tekstu np jakąś grafike? Mogą być 2 takie np jedno z lewej a drugie z prawej strony?

  47. lukasz (Reply) wtorek 11 Styczeń , 2011

    Witam,
    Mam mały problem, ponieważ w IE 8 menu nie jest na wierzchu. Jeżeli pod menu znajduje się jakiś link, to menu się zamyka… Myślę, że problem tkwi w przeźroczystości. Tylko zbytnio nie wiem jak się do tego zabrać.
    Proszę o pomoc.

  48. Jan2612 (Reply) czwartek 27 Styczeń , 2011

    Witam chciałbym umieścić ten panel w cms joomla ale nie chce działać nie wysuwa sie. Prosze o pomoc moje gg: 9190834

  49. Łukasz (Reply) środa 9 Luty , 2011

    Witam, mam pewien problem, a mianowicie nie wiem jak zmienić zakres marginesu. Przerobiłem nieco skrypt i zamiast menu zrobiłem z niego wysuwany panel facebook lubie i zamiast koloru tła dałem obrazek, niestety ramka z kodem facebooka wkleiła sie nieco dalej od krawędzi obrazka, jak to zmienić?

  50. Łukasz (Reply) czwartek 10 Luty , 2011

    Ok już sobie poradziłem :)