Animowany, wysuwany panel boczny

Wysuwany panel, z prawej lub lewej strony, napisany i animowany przy użyciu CSS3. Idealny do umieszczenia pluginów Facebook, Twitter, LinkedIn czy Pinterest.

Animowany, wysuwany panel boczny

Tytuł panelu
Treść lub obrazek naszego panelu:
Prawy panel
Treść lub obrazek naszego panelu:

Chciałbym przedstawić jak w prosty i szybki sposób, za pomocą HTML i CSS, dodać wyskakujące z lewej bądź prawej strony okno. Założenia "pluginu" są następujące: ma być prosty w instalacji, animowany i musi płynnie działać. Do stworzenia tego przydatnego narzędzia wystarczy nam podstawowa znajomość HTML i CSS3. Jeżeli bie masz czasu na czytanie tego wpisu skopiuj kod znajdujące się pod nagłówkiem HTML i wkleić go, w zależności od semantyki strony, do sekcji <body> - ważne aby znajdował się w wewnątrz tej sekcji. Kolejnym krokiem będzie skopiowanie i wklejenie kodu CSS, znajdującego się pod nagłówkiem "CSS". Wklejamy go do naszego arkusza CSS. I to już wszystko! DEMO "pluginu" można zobaczyć w górnej części tego wpisu po prawej lub lewej stronie. Jeżeli potrzebujecie zmienić stronę, z której moduł będzie się wysuwał, bądź zmienić jego treść, tytuł, wielkość czy szybkość wysuwania. Zapraszam do lektury:

HTML:

<div class="box">
  <div class="box__content">
    <div class="box__title">Tytuł panelu</div>
    <div class="box__description">
      Treść i obrazek naszego panelu:
    </div>
  </div>
</div>

CSS:

.box {
    background: #ffc000;
    border-radius: 0px 4px 4px 0px;
    left: -304px;
    padding: 4px 4px 4px 0px;
    position: fixed;
    top: 100px;
    transition: transform 0.4s;
    width: 300px;
}

.box:hover {
    transform: translateX(304px);
}

.box .box__content {
    background: #fff;
    min-height: 200px;
    padding: 10px;
    position: relative;
}

.box .box__title {
    background: #fff;
    border: solid #ffc000;
    border-radius: 0px 0px 4px 4px;
    border-width: 0px 4px 4px;
    cursor: default;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: -74px;
    text-align: center;
    top: 70px;
    transform: rotate(-90deg);
    width: 106px;
}

Konfiguracja:

Zmiana treści panelu

Aby zmienić treść panelu, wystarczy zmiana zawartości <div class="box__description">. Kod panelu z tekstem "Piątkowe piwo smakuje najlepiej" będzie wyglądał następująco:

<div class="box">
  <div class="box__content">
    <div class="box__title">Tytuł panelu</div>
    <div class="box__description">
      Piątkowe piwo smakuje najlepiej
    </div>
  </div>
</div>

Zmiana tytułu

Aby zmienić tytuł panelu, postępujemy analogicznie co do powyższego przykładu, tym razem zmieniając <div class="box__title">:

<div class="box">
  <div class="box__content">
    <div class="box__title">Tytuł panelu</div>
    <div class="box__description">
      Piątkowe piwo smakuje najlepiej
    </div>
  </div>
</div>

Zmiana strony

"Plugin" domyślnie znajduje się z lewej strony ekranu, co nie przeszkadza jednak aby wysuwał się z prawej strony. Aby tego dokonać musimy wprowadzić kilka zmian w kodzie według poniższego przykładu:

Dodajemy modyfikator który pozwoli nam nadpisać domyślne styl-e "pluginu":

<div class="box box--right">

Za pomocą modifikatora nadpisujemy domyślne style, dodając do naszego arkuszu następujące elementy:

.box--right:hover {
  transform: translateX(-304px);
}

.box--right .box__title {
  border-radius: 4px 4px 0px 0px;
  border-width: 4px 4px 0px;
  position: absolute;
  left: -74px;
}

Po naszych modyfikacjach, arkusz styli powinien wyglądać następująco:

.box {
  background: #ffc000;
  border-radius: 0px 4px 4px 0px;
  left: -304px;
  padding: 4px 4px 4px 0px;
  position: fixed;
  top: 100px;
  transition: transform 0.4s;
  width: 300px;
  z-index: 1;
}

.box--right {
  border-radius: 4px 0px 0px 4px;  
  left: auto;
  right: -304px;
  padding: 4px 0px 4px 4px;
}
            
.box:hover {
  transform: translateX(304px);
}

.box--right:hover {
  transform: translateX(-304px);
}
            
.box .box__content {
  background: #fff;
  min-height: 200px;
  padding: 10px;
  position: relative;
}
            
.box .box__title {
  background: #fff;
  border: solid #ffc000;
  border-radius: 0px 0px 4px 4px;
  border-width: 0px 4px 4px;
  cursor: default;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: -74px;
  text-align: center;
  top: 70px;
  transform: rotate(-90deg);
  width: 106px;
}

.box--right .box__title {
  border-radius: 4px 4px 0px 0px;
  border-width: 4px 4px 0px;
  position: absolute;
  left: -74px;
}

Jeżeli chcemy aby nasz moduł domyślnie znajdował się z prawej strony, wystarczy nadpisać style przeznaczone dla modułu lewostronnego tymi z prawostronnwgo.

Zmiana szybkości animacji

Zmiana szybkości animacji następuje poprzez edycje właściwości transition elementu <div class="box">

.box {
  background: #ffc000;
  border-radius: 0px 4px 4px 0px;
  left: -304px;
  padding: 4px 4px 4px 0px;
  position: fixed;
  top: 100px;
  transition: transform 0.4s; // W tym mejscu zmieniamy wartość 0.4, jeżeli chcemy aby cała animacja trwała jedną sekundę, wprowadzamy wartość 1s.
  width: 300px;
  z-index: 1;
}

Zakończenie

W przypadku problemów zapraszam do kontaktu, link znajduje się w stopce. Zachęcam do komentowania wpisu i zapraszam na mój profila na FB

Gotowe szablony stron www z wdrożeniem!

Komentarze:

Admin

07.05.2019
@Wika - Oczywiście, wystarczy zamiast tytułu dodać zdjęcie. Jeżeli sobie nie poradzisz, napisz na daniel@compsoul.pl

Wika

07.05.2019
Czy zamiast tytułu panelu można dodać ikonkę na przykład Facebooka lub Instagrama?

Admin

01.05.2019
Istnieje taka możliwość, wystarczy dodać trzy takie same boxy wklejając trzy razy HTML po czym nadać indywidualne klasy dla boxów i odpowiednie style.

lechu

30.04.2019
witam, a czy istnieje możliwość posiadania np. 3 takich paneli z lewej strony jeden pod drugim, oczywiście z jakimś odstępem???

Admin

28.03.2019
@Adam - Proszę o dokładniejsze opisanie błędu, wraz z adresem strony. Ciężko powiedzieć co dolega Pańskiej stronie bez kodu.

Adam

28.03.2019
Witam można jakoś poprawić to , aby panel boczny był ciągle pod innym elementem (zdjęcie) i przy scrollowaniu strony nie zmieniał swojego położenia?

Admin

22.02.2019
@Kamil - Dodaj wyższą wartość z-index do momentu aż uzyskasz satysfakcjonujący Cię efekt.

Kamil

22.02.2019
Witam, dodałem do panelu z index: 1 ale pomimo to jeszcze chowa się pod niektórymi elementami na stronie. Czy można to jakoś poprawić? :)

Cumulus

15.12.2018
Dziękuję za pomoc. Pozdrawiam

Admin

29.11.2018
@Cumulus - Dodał Pan poprawnie style CSS do strony?

Cumulus

29.11.2018
Niestety u mnie nie działa.Z całego panelu mam tylko dwa zdania na końcu strony.

Admin

09.10.2018
Cieszę się że mogłem pomóc, zachęcam do oceny moich skryptów na naszym FB! Odnośnie z-index musi być on ustalany indywidualnie do strony, mogłem dodać domyślnie większe wartości ale nie należy to do dobrych praktyk.

camtech

07.10.2018
Zapomniał bym, box chowa mi się pod obrazkami : ) trzeba jeszcze nadać mu z index. Pozdrawiam!

cam-tech

07.10.2018
Super, tego mi było trzeba! Dzięki i pozdrawiam Emil.

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".