Jak zrobić wysuwany element na blogu

18.10.2015


Były już pytania o wysuwane ikonki społecznościowe, a ostatnio pojawiło się sporo pytań o wysuwany element na blogu, a dokładnie chodzi o rozwijany opis "więcej o autorce", który znajduje się w kolumnie bocznej mojego bloga. Nie będę ukrywać, że jest to bardzo przydatna opcja, dzięki niej możemy ukryć np. banery, aby nie śmieciły nam kolumny bocznej. Tak, możemy to użyć nawet do banerów, linków, zrobić podstrony, nie jest to opcja tylko dla tekstu. Do zrobienia tego wysuwanego elementu, będziemy potrzebować gadżetu HTML/JavaScript i CSS. Jak widać nie będziemy nic mieszać w kodzie.

1. Układ - dodaj gadżet - HTML/JavaScript



2. Wklejamy kod:

<section class="j-jbox" style="font-weight: normal; margin-top: 2px;"><div><input id="j-1" name="accordion-1" type="checkbox" /><label for="j-1">TYTUŁ</label><article class="j-1">MIEJSCE NA TEKST<br /><a href="LINK"><span style="font-weight: bold;">NAZWA LINKU</span></a><br /></article></div><br /></section>

Podany wyżej kod, jest na podstawie kodu, który znajduje się u mnie. Jeśli nie chcemy mieć linku wystarczy usunąć
 <a href="LINK"><span style="font-weight: bold;">NAZWA LINKU</span></a>

3.  Kiedy nasz kod jest już uzupełniony, klikamy zapisz i przechodzimy do szablon - dostosuj.


4. Znajdziemy się w projektancie szablonów. Przechodzimy do zaawansowane  - dodaj arkusz CSS.


5. Obecnie nasz wysuwany element prezentuje się tak:


Żeby nasz element prezentował się jak należy musimy wesprzeć się kodem CSS, który pozwoli nam dopasować odpowiednio wygląd oraz zadba o to, aby nasz element się wysuwał. Nasz kod będzie wyglądał tak:

.j-jbox label{font-family:Verdana; border: solid 2px #000; padding: 15px; position: relative; z-index: 0; display: block; cursor: pointer; color: #ff8d8e; font-size: 13px; letter-spacing: 2px; text-align: center;}
.j-jbox input:checked + label {color: #ff8d8e; background: #ccc; border: solid 2px #ccc;}
.j-jbox input{display: none;}
.j-jbox article{text-align: justify; margin: 10px; margin-top: -1px; margin-bottom: 0px; overflow: hidden; height: 0px; position: relative; z-index:0; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out;  -o-transition: height 0.5s ease-in-out;}
.j-jbox input:checked ~ article{margin-top: 10px; margin-bottom: 10px; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out;}
.j-jbox article {color: #fff; font-size: 11px; padding: 10px;}
.j-jbox input:checked ~ article.j-5{height: 85px;}

Wszystkie pogrubione wartości są zmienne. Poniżej analiza kodu

.j-jbox label{font-family:Verdana; border: solid 2px #000; background: #fff; padding: 15px; position: relative; z-index: 0; display: block; cursor: pointer; color: #ff8d8e; font-size: 13px; letter-spacing: 2px; text-align: center;}

Ta część kodu odpowiada za wygląd części stałej naszego rozwijanego elementu czyli naszego przycisku z tekstem. Jak widzimy możemy zmienić czcionkę, rodzaj, grubość oraz kolor ramki, kolor tła, marginesy wewnętrzne, kolor tekstu, wielkość tekstu, odstęp między literami i wyrównanie tekstu

.j-jbox input:checked + label {color: #ff8d8ebackground: #cccborder: solid 2px #ccc;}

Ta część odpowiada za wygląd części stałej (przycisk z tekstem) po kliknięciu w niego. Możemy zmienić kolor tekstu, kolor tła oraz rodzaj, grubość i kolor ramki

.j-jbox article{text-align: justify; margin: 10px; margin-top: -1px; margin-bottom: 0px; overflow: hidden; height: 0px; position: relative; z-index:0; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out;  -o-transition: height 0.5s ease-in-out;}

Ta część kodu odpowiada za tekst oraz rozwinięcie w części rozwijanej. Jak widzimy możemy zmienić tu tylko wyrównanie tekstu

.j-jbox article {color: #fff; font-size: 11px; padding: 10px;}

Ta część kodu odpowiada za tekst w części rozwijanej. Możemy zmienić kolor, czcionkę, oraz marginesy

.j-jbox input:checked ~ article.j-5{height: 85px;}

Ta część kodu odpowiada za długość wysuwanego elementu

Efekt końcowy: 


4 komentarze:

  1. Super instrukcja, skorzystam. ;)

    OdpowiedzUsuń
  2. Faktycznie przydatna opcja :) Może i u nas kiedyś się to pojawi :)

    OdpowiedzUsuń
  3. Metr Sześćdziesiąt20 października 2015 22:56

    Bardzo fajny blog +klikam obserwuj :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia