Wysuwany panel boczny w CSS3
Na ogromnej ilości stron używane są panele z niebieską zakładką, które po najechaniu na nie myszką pokazują ostatnie posty opublikowane na FB lub zdjęcia osób, które lubią jakiś fanpage. Przedstawię Wam teraz sposób, dzięki któremu uzyskamy podobny efekt bez korzystania z jQuery czy innych skryptów JavaScript. Stworzymy wysuwany pasek z dowolną zawartością HTML.
Do wypozycjonowania i nadania animowanego efektu wykorzystamy wyłącznie właściwości CSS obsługiwane przez najnowsze przeglądarki. Zapewniam, że efekt końcowy jest estetyczny, a sam pasek bardzo funkcjonalny.
Zaczniemy od kodu HTML. Nasz panel będzie składał się ze zbiorczego elementu blokowego panel, a wewnątrz niego będą znajdowały się dwa inne divy – content, zawierający treść, a także title, wewnątrz którego jak sama nazwa wskazuje umieścimy widoczny tytuł. Wyglądać będzie to tak:
<div id="panel"> <div id="title"> Panel </div> <div id="content"> Jakaś zawartość </div> </div>
Prawda, że bardzo prosto się to prezentuje? Dlatego więc będzie trzeba użyć stylu CSS, by odpowiednio ustawić te trzy boksy. Aby uzmysłowić, do czego dążymy, posłużę się przygotowanym schematem.
Jak widać, musimy doprowadzić do sytuacji, aby na stałe widoczny był tylko div o identyfikatorze title. W moim przypadku zachodzi on lekko na content, a właściwie chowa się za nim. Na granicy tych dwóch elementów zaznaczyłem linię, która pokazuje, że w tym właśnie miejscu będzie prawa krawędź okna przeglądarki. Oczywiście tylko w “spoczynku”, gdy kursor myszy nie najedzie na zakładkę. Gdy to się stanie, wysunie się całość.
W moim przykładzie, wysuwane okienko będzie miało szerokość 250px. Tak więc, jego domyślna odległość od ekranu względem prawej strony musi wynosić -272px. Dlaczego 272 a nie 250? Otóż zastosowałem 10-pikselowy obustronny margines wewnętrzny oraz obramowanie z lewej strony o szerokości 2px. Razem daje to więc 272px (250+2*10+2). Oczywiście, wymiary te można dowolnie zmieniać, zaznaczam tylko że przy każdej zmianie należy poprawić pozycję całości.
Tak wygląda zastosowany przeze mnie styl:
#panel { position: fixed; top: 50px; right: -272px; z-index: 99999; transition: right 0.5s ease-out 0s; } #panel:hover { right: 0; } #panel #content { width: 250px; height: 300px; padding: 10px; border-top: 2px solid #C30011; border-right: none; border-bottom: 2px solid #C30011; border-left: 2px solid #C30011; z-index: 20; background: #FFFFFF; position: relative; border-radius: 10px 0 0 10px; } #panel #title { width: 150px; border: 2px solid #C30011; background: #E61B2D; color: #FFFFFF; font-weight: bold; border-radius: 10px; padding: 5px 5px 25px 5px; text-align: center; position: relative; top: 140px; left: -90px; transform: rotate(-90deg); z-index: 1; }
Przykładowy pasek będzie miał czerwony kolor, oczywiście wszystko jest kwestią odpowiedniego stylu. Dowolnie można edytować tło, obramowanie, zaokrąglenie czy dodać cień.
Trzeba zwrócić uwagę na użyte przeze mnie własności transition, border-radius i transform. Aby zapewnić kompatybilność naszego panelu ze wszystkim przeglądarkami, może okazać się niezbędne dodanie do nich przedrostków takich jak -moz- czy -webkit-.
Tak właśnie będzie wyglądał panel, który wykonasz z użyciem tego kodu 🙂
Jeśli masz problem lub pytanie – zostaw komentarz.
Oczywiście zachęcam do zapoznania się z innymi moimi poradnikami.
Jak zrobić aby menu wysuwało się od lewej do prawej ,a nie od prawej do lewej?
Działa! Dzięki wielkie.
Super! Dzięki!
Super, dziękuję!!! O to mi właśnie chodziło. Kod prosty jak budowa cepa, a wygląd ma oszałamiający 🙂
A jak zmodyfikować skrypt aby div wysuwał się po kliknięciu i zostawał w pozycji wysuniętej aż do następnego kliknięcia title? Da się tak bez js ?
Jak stworzyć tak rozwijalną zakładkę, ale z inną treścią na każdej z podstron/.
demko nie działa hihihiihhi
Rewelacja dzięki
Dobry kawałek kodu. Trzeba będzie doszlifować nieco na mobile, ale to jest tak – ile telefonów i wersji os tyle poprawek 😉 Chociaż można spróbować zrobić odwołanie do mobile css kiedy wyniucha w ogóle androida (lub inny mobilny os).
Dzięki wielkie, bardzo przydatne
Nie wiem co gdzie wkleić. CSS wrzucam do arkuszu CSS3 a kod HTML w index i nie działa. ;/
Nic się nowego nie wyświetliło? Nawet żadne nieostylowane elementy?
Ten skrypt działa tylko na wordpressie? Jak mam wkleić ten kod do zwyklej strony ?
Po prostu do kodu strony, nie mam pojęcia jaką strukturę plików ma Twoja strona. A kod CSS do arkusza stylów.
Nie wiem czy autor jeszcze przegląda komentarze, ale jest możliwość przerzucenia całego panelu na lewą stronę?
Dobra, spróbowałem z transform: rotate i jakoś to wyszło.
Świetny tutorial, bardzo dziękuję autorowi. Jestem amatorką, a sobie sama z nim poradziłam. Próbowałam innego, ale nie był tak przejrzysty, aby wprowadzić swoje zmiany. Muszę jeszcze tylko dojść do tego, jak zrobić (w nie amartoski sposób, bo w amatorski o wiadomo – portal1, portal2…) kilka “suwaczków” jeden pod drugim.
Przydatny tutorial.
Jednak ważniejsze dla mnie jest sposób w jaki piszesz tego typu porady – naprawdę rzetelnie i z dbaniem o każdy detal – patrz legenda obrazkowa do kodu 🙂
Dzięki i czekam na więcej! 🙂
Andrzej ostatnio opublikował Zimowo-Wiosenna inwazja muzyczna na Poznań!
Panel jest świetny. Troszkę go przystosowałem do potrzeb strony i spisuje się całkiem nieźle.
Mam tylko jeszcze 2 problemy do poprawienia. Jeden to czcionka tytułu panelu trochę mi się nie podoba (napis jest trochę słabo czytelny). A drugi problem mam taki, że mam na stronie jeszcze dwa inne, stałe elementy w dolnej części strony i są też “fixed” i jeśli najadę myszką na którykolwiek z tych obszarów lub ich poziom, to panel się wysuwa. Nie jest to bardzo złe, ale jednak powoduje wysuwanie panelu w sposób niezamierzony.
Czy ktoś może podpowiedzieć, jak to uzdrowić?
Krzysztof ostatnio opublikował Filtr PRAKTICA C-Pol 28mm
Krój czcionki można zawsze zmienić poprzez font-family.
Czy przypadkiem kod tych innych elementów fixed nie dostała się do div-a zawierającego panel?
Racja, czcionka zmieniona.
Zmieniłem też miejsce wstawienia kodu html i jest teraz tak, jak powinno być. Wcześniej był po nim jeszcze skrypt php, teraz jest na samym końcu, bezpośrednio przed .
Wielkie dzięki za pomoc i oczywiście za sam panel.
Pozdrawiam.
Krzysztof ostatnio opublikował Aparat cyfrowy PRAKTICA luxmedia 20-Z35 W (czarny)
zastosowalem nieco inne rozwiazanie css:)
Super!!! Dziękuję 🙂
Troszkę koduję, jednak nie wszystko potrafię 😉
Twój sposób podany na stronie jest rewelacyjny. Szybki i bez problemowy. Musiałem to zaadoptować do WordPress – super !
To ja mam cięższy orzech do zgryzienia 😛 Chciałabym żeby ten dodatek wyświetlał się dopiero po zjechaniu do poziomu komentarzy i sam wyskakiwał. Po powrocie na górę strony znikałby. Wyświetlałby się tam losowy post z mojej strony. Da się to tak przerobić?
shelly007 ostatnio opublikował Emocjonujący wrzesień!
Może to http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling trochę naprowadzi
A jak zrobić żeby pasek był z lewej, z góry, albo z dołu? 😀 Które wartości należy pozmieniać? 🙂
Trzeba pobawić się z top, right, bottom, left dodatkowo wymiary – width i, jeśli potrzeba, height oraz kąt obrotu przy transform.
Filipie doskonałe rozwiązanie. jako panel sugestii lub szybkiego kontaktu wręcz idealne. POLECAM
A jaki atrybut muszę dodać bądź zmienić w arkuszu stylów, żeby panelu (po wysunięciu) nie zasłaniał mi slider?
W CSS z-index panelu musi być większy od slidera.
Mogę prosić o bardziej “łopatologiczną” instrukcję? Przyznam, że jestem dopiero na etapie nauki kodowania w css.
W kodzie CSS, którego użyłem w tym tutorialu, przy #panel dopisz kilka dziewiątek do cechy z-index:
Myślę, że powinno to pomóc.
Dzień dobry
Dziękuję za wszystkie cenne wskazówki. Jednak niestety zmiana cechy z-index nie przyniosła większego rezultatu. Można coś jeszcze zrobić?
Piotr ostatnio opublikował Jak uczynić pierwszy krok czyli nawiązanie współpracy
Witaj!
Twój poradnik przydał mi się, lecz potrzebuję go przerobić, by był proporcjonalny do tekstu.
Dałem width i height na 100%, lecz ta nazwa nie za bardzo chce współpracować.
Mógłbyś mi pomóc? 🙂
Dzięki
Radzę wpisywać wymiary w pikselach, ewentualnie w procentach, jeżeli to umożliwi responsywność.
Możesz zrobić menu, które samo się zwiększa i zmniejsza? Ew. dodać max-width/height do iluś px.
Menu, które jest stałe w wielkości nie przyda mi się za bardzo.
Dzięki.
maciasbarlinek ostatnio opublikował Religia i wiara • Mini-regulamin
Dokładnie tego szukałem i tu znalazłem.
Gotowe, podane jak na tacy.
Dziękuję bardzo.
igor ostatnio opublikował VOICE OF THE WIND – muzyka relaksacyjna do pobrania
A jak zrobić żeby panel był na dole strony i wysuwał się od dołu do góry?
Podobnie, tylko musisz pobawić się z position – użyj bottom.
Serdecznie dziękuję za pomoc. Zaproponowany kod jest dla mnie wręcz idealnym rozwiązaniem.
Od rana tego szukałem, trochę dostosowałem do swoich potrzeb. Rozwiązanie świetne 🙂
Witam, bardzo dobre rozwiązanie, jednak mam dwa pytania: Gdzie należy wkleić podany kod? Jak umieścić w nim treść lub obrazek?
Kod CSS najlepiej do arkusza stylów (najczęściej plik w rodzaju style.css), a HTML może być przed zamknięciem tagu body, czyli przed </body>. Treść dodajesz oczywiście w div-ie o id content.
Dzięki za odpowiedź. Problem polega na tym, że w tym temacie jestem “zielony” :). Rozumiem, że należy wkleić dwa kody, które są podane w tym wpisie. Czy pierwszy kod html ma być wklejony w pliku footer.php na samym końcu, pomiędzy a ? Natomiast w pliku style.css, w którym miejscu należy wkleć ten drugi kod? Pozdrawiam 🙂
W pliku footer.php kod HTML tuż przed </body>, a CSS może być na końcu pliku style.css. Powinno działać.
Niestety nie działa 🙁
a jak podłączyć do tego facebooka?
Ze strony Facebooka dla developerów pobierz kod dla iframe, wcześniej podając adres swojego fanpage’a. Wklej ten kod do elementu o id content. Iframe’owi, żeby było najłatwiej możesz nadać wymiary takie jak zrobiłem w przykładzie czyli 250px szerokości na 300px wysokości.
Ciekawy i przydatny tutorial. Szukałem ostatnio czegoś takiego w postaci plugina do WordPressa (w sensie – plugin dodający X takich zakładek z dowolnie modyfikowaną treścią, np: obrazkiem, linkiem, kodem html – coś jak “WP FlyBox” ale jeszcze bardziej uniwersalny) i niestety nie znalazłem odpowiedniego. (Hm, przez sekundę pomyślałem o modyfikacji motywu potomnego i wpakowania zakładek do theme’a, ale już mi przeszło 🙂 ).
Kenatas ostatnio opublikował Kursy Nordic Walking
Co zrobic żeby okienko wysuwało się po kliknięciu na nie a nie po najechaniu ?
Musisz użyć do tego JavaScriptu. Polecam jQuery i click()/animate().
Poniżej użyty przeze mnie styl. Działa w Chrome i Operze a w IE10 nie. Co jest nie tak?
#panel {
position: fixed;
top: 50px;
right: -372px;
z-index: 99999;
transition: right 0.5s ease-out 0s; -webkit-transition: right 0.5s ease-out 0s; -ms-transition: right 0.5s ease-out 0s; -moz-transition: right 0.5s ease-out 0s; -o-transition: right 0.5s ease-out 0s;
}
#panel:hover {
right: 0;
}
#panel #content {
width: 350px;
height: 800px;
padding: 10px;
border-width: 2px 0 2px 2px;
border-style: solid;
border-color: #C30011;
z-index: 20;
background: #FFFFFF;
position: relative;
border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; -ms-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -o-border-radius: 10px 0 0 10px;
}
#panel #title {
width: 250px;
border: 2px solid #C30011;
background: #E61B2D;
color: #FFFFFF;
font-weight: bold;
font-family: Tahoma, Arial, Helvetica, sans-serif;
border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;
padding: 5px 5px 25px 5px;
text-align: center;
position: relative;
top: 200px;
left: -140px;
transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);
z-index: 1;
}
Znakomity artykuł, świetnie działa to IE ale w chromie jest problem, nie działa
transform: rotate(-90deg);
w title. Nie udało mi się stwierdzić dlaczego 🙁
Spróbuj dodać:
Poza tym wydaje mi się, że masz nieaktualna wersję Chrome.
Bingo! Zaproponowana zmiana pomogła. Dzięki za pomoc!
…a jeśli chodzi o wersję Chrome to mam najnowszą. Jeszcze raz dzięki za pomoc!
http://caniuse.com/transforms2d to rozwiewa wszelkie wątpliwości nawet chrome dev (33) trzeba przedrostka producenta.
Obecnie działa:
• IE10-11
• Chrome 36-43
• Firefox 16-38
• Opera 24
bez przedrostków producenta.
Miałem ten sam problem. Czy nie będzie się gryzło ze sobą -webkit-transform: rotate(-90deg); z transform?
Nie będzie się gryzło. Cechy -webkit, -moz i bez żadnych przedrostków nawet powinny występować razem, żeby zapewnić pełne wsparcie starszych przeglądarek.
Dzięki za artykuł, bardzo się przydał!
Dzięki temu postowi, przyszedł mi do głowy całkiem fajny i praktyczny pomysł na wykorzystanie 🙂 Trzeba będzie pogrzebać trochę, lekko poprzerabiać, ale efekt końcowy może być ciekawy 🙂
PS. u mnie na najnowszym FF lekko wystaje lewa krawędź obramowania.
mtl ostatnio opublikował Promocja Getin Bank na kredyt samochodowy
A jak to przenieść na lewo? Wiem że samodzielnie mogę ale jakoś nie wychodzi.
Musisz wyedytować styl CSS. Własności left i right trzeba wszędzie zamienić na przeciwne, dodatkowo przy #title obrót rotate(-90deg) zamień na rotate(90deg). Powinno działać.
Zmiana ta powoduje przejście na lewo ale musiałem trochę przesunąć #tilte bo znikał po za ekran.
Bardzo ciekawym efektem jest zmiana left na right, bo jak tak zmieniam to muszę do wartości dodać minus lub jak jest to go usunąć. Tak na szczęście jest tylko z #title.
Do dopracowania zostaje zmiana border-radius by wyglądało to normalnie.
Jeszcze znalazłem coś takiego http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/
Czegoś takiego szukałem! Ale nie wiem dlaczego skrypt jest w poziomie a nie obraca mi się o 90 stopni :/ Jakaś rada na to?
Już sobie dałem radę:)
Osobiście – wolał bym aby się na mobilnych wcale nie pojawiał. Można by to było jakoś wyłączyć? Może korzystając z odpowiednich fragmentów CSS w responsywnym układzie?
my-motivator ostatnio opublikował Czy „Skeret” można odnaleźć w książce?
Za pomocą media queries i display: none; można bez problemu wyłączyć wyświetlanie tego paska na urządzeniach o określonej rozdzielczości.
Dziękuję za pomoc 🙂 Powoli buduję własny theme do mojego bloga (w tej chwili korzystam z gotowej skórki) i jak pewnie rozumiesz – różne rady są jak znalazł:) Dzięki temu rozwiązaniu mógł bym nie używać tych pluginów dla FB lub Twitera (jeśli się odpowiednio długo pomęczę 🙂 Zobaczymy co z tego wyjdzie.
PS. Comment Lov coś poszalał i podpiął mi nie mój blog
Poprawiłem. Szczerze mówiąc nie mam pojęcia dlaczego tak się stało.
A jak to będzie się zachowywać na mobilnych przeglądarkach?
PS. Zainstaluj sobie jakiś plugi do powiadomień o odpowiedziach w komentarzach.
SpeX ostatnio opublikował Zapowiedź: Crossover pomiędzy serialami Suits a Covert Affairs
Najprawdopodobniej panel pojawi się w podanym miejscu, ale na większości przeglądarek mobilnych raczej nie będzie jeszcze reagował.
Już możesz subskrybować komentarze.