wtorek, 18 czerwca 2013

Accordion - freebies

Ach, w końcu udało mi się dodać jakieś freebies. Mam nadzieję, że poprzednie były ciekawe, a także przydatne. Accordion to myślę dosyć interesująca i można by nawet powiedzieć zagadkowa opcja, aczkolwiek naprawdę pomaga zaoszczędzić przestrzeń na blogu. Można jej używać i w gadżecie, i w poście, w zależności od tego cóż chcemy stworzyć. 
Jeśli ktoś miałby ochotę na troszkę anatomii tej funkcji zapraszam tutaj.
Niestety, będą to tylko dwa freebiesy, gdyż ich "instalacja" to istne piekło, a poza tym robi niekiedy niezły bałagan w kodzie ( oczywiście w ilościach większych niż jedna paczka ). 

Paczki to kody CSS, a także kod umieszczenia w gadżecie lub poście; niestety zawiera tylko dwie "zakładki" tworzone przeze mnie, resztę należy uzupełnić samodzielnie, ale oczywiście podam jak to zrobić. 
Paczka 1
Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum adipiscing ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.
Phasellus gravida bibendum sapien, sed luctus risus tristique at. Sed posuere urna vel diam dictum posuere. Donec adipiscing urna ac tellus vehicula volutpat. Sed semper leo et est placerat hendrerit. Proin iaculis ante quis sem venenatis ultricies. Mauris vel auctor dui. Aenean sed ante non diam blandit faucibus a vitae tortor. Nulla vitae eleifend odio. Aliquam erat volutpat. Nullam quis ligula vitae erat lacinia auctor. Integer quis tortor nec nunc consectetur ultrices. Quisque nunc nulla, semper et rhoncus nec, auctor nec est. Donec neque turpis, interdum dignissim congue eu, eleifend sit amet arcu. Proin nisi tortor, molestie eu vehicula vitae, gravida ornare turpis. Morbi at lacinia lacus. Integer dignissim viverra ligula ut tristique. Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum adipiscing ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.

Poniższy kod umieszczamy pomiędzy <body> i </body> lub wchodzimy w projektanta szablonów i całość dodajemy jako arkusz CSS.
.p-box label{font-family:Text Me One; background-color: #d3dedb; text-transform: uppercase; padding: 5px; position: relative; z-index: 0; display: block; cursor: pointer; color: #666; font-size: 10px; margin-bottom: 1px; line-height: 100%; letter-spacing: 3px; font-weight: lighter;}
.p-box input:checked + label {color: #fff;}
.p-box label:hover:after, .j-box input:checked + label:hover:after{content: ''; position: absolute; font-size: 24px; width: 24px; height: 24px; right: 13px; top: 4px; color: #eee;  background: transparent url(http://2.bp.blogspot.com/-fEhH2yP2OdM/UajWO5UZipI/AAAAAAAAAkE/v50MnJh8qbc/s1600/arrow2_s.gif) no-repeat top right;}
.p-box input:checked + label:hover:after{background-image: url(http://3.bp.blogspot.com/-hU6lXxz4Cds/UajWO2YF3eI/AAAAAAAAAkA/78y-IOU8dBg/s1600/arrow2_n.gif);}
.p-box 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;}
.p-box 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;}
.p-box article p {color: #222; font-size: 11px; padding: 5px 0px;}
.p-box article h2 {font-family: Fjalla One; font-weight: normal; font-size: 14px; margin:0px; margin-top: 20px; text-transform: uppercase;}
.p-box a
{font-size: 8px; color: #d3dedb; letter-spacing: 2px; text-transform: uppercase; padding: 0px 2px; font-family: arial;}
.p-box a:hover {background-color: #fff; color: #000;}
PRE {margin: 10px 20px; margin-bottom: 20px;  background-color: #fafafa; padding: 10px;  border-left: 10px solid #222;  white-space: pre-line;}
.p-box ul, .j-box ol {margin: 10px 40px;}
.p-box input{display: none;}
.p-box input:checked ~ article.p-p{height: 58px;}
.p-box input:checked ~ article.p-m{height: 138px;}
Umieszczając w poście lub w gadżecie kopiujemy, przy czym niebieski tekst zamieniamy na własny:
<section class="p-box" style="margin-top: 2px;">
<div>
<input id="p-p" name="accordion-1" type="checkbox" />
<label for="p-p">Paczka 1-1</label>
<br />
<article class="p-p" style="text-align: justify;">
Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum <a href="http://graphical-thoughts.blogspot.com/">adipiscing</a> ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.</article></div></section>
Kolejne boxy umieszczamy dodając arkusze CSS w projektancie szablonów, kierując się poniższym schematem:
.p-box input:checked ~ article.p-r{height: 58px;}
Literkę r zmieniamy przy tworzeniu kolejnych artykułów, jest to ID osobne dla każdego boxu. Dlatego też w przypadku literki r, kod HTML artykułu mającego pojawić się w gadżecie lub poście wyglądać będzie tak:
<section class="p-box" style="margin-top: 2px;">
<div>
<input id="p-r" name="accordion-1" type="checkbox" />
<label for="p-r">Nazwa artykułu</label>
<br />
<article class="p-r" style="text-align: justify;">
Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum  ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. </article></div></section>

Paczka 2
Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum adipiscing ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.
Phasellus gravida bibendum sapien, sed luctus risus tristique at. Sed posuere urna vel diam dictum posuere. Donec adipiscing urna ac tellus vehicula volutpat. Sed semper leo et est placerat hendrerit. Proin iaculis ante quis sem venenatis ultricies. Mauris vel auctor dui. Aenean sed ante non diam blandit faucibus a vitae tortor. Nulla vitae eleifend odio. Aliquam erat volutpat. Nullam quis ligula vitae erat lacinia auctor. Integer quis tortor nec nunc consectetur ultrices. Quisque nunc nulla, semper et rhoncus nec, auctor nec est. Donec neque turpis, interdum dignissim congue eu, eleifend sit amet arcu. Proin nisi tortor, molestie eu vehicula vitae, gravida ornare turpis. Morbi at lacinia lacus. Integer dignissim viverra ligula ut tristique. Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum adipiscing ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.

Arkusz CSS:
.w-box label{font-family:Fjalla One; background-color: #eee; text-transform: uppercase; padding: 10px; position: relative; z-index: 0; display: block; cursor: pointer;border-left:12px solid #444;color: #666; font-size: 10px; margin-bottom: 1px; line-height: 100%; letter-spacing: 2px; font-weight: lighter;}
.w-box input:checked + label {color: #222;text-shadow:1px 1px 0px #e0d6de;}
.w-box label:hover:after, .w-box input:checked + label:hover:after{content: ''; position: absolute; font-size: 24px; width: 24px; height: 34px; right: 7px; top: 8px; color: #eee;  background: transparent url(http://1.bp.blogspot.com/-NJ6as3OpjCI/Uargd9b8zkI/AAAAAAAAAlI/x18sKUZcjCY/s1600/add.gif) no-repeat top right;}
.w-box input:checked + label:hover:after{background-image: url(http://4.bp.blogspot.com/-2_PDDPfCIMw/UargbdYAobI/AAAAAAAAAlA/ntmQayu7G88/s1600/close.gif);}
.w-box article{font-size:11px;text-align: justify;font-family:trebuchet ms; 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;}
.w-box 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;}
.w-box article p {color: #222; font-size: 12px; padding: 5px 0px;}
.w-box article h2 {font-family: Fjalla One; font-weight: normal; font-size: 14px; margin:0px; margin-top: 20px; text-transform: uppercase;}
.w-box a
{font-size: 8px; color: #1a1a1a; letter-spacing: 2px; text-transform: uppercase; padding: 0px 2px; }
.w-box a:hover {background-color: #fff; color: #e0d6de;}
PRE {margin: 10px 20px; margin-bottom: 20px;  background-color: #fafafa; padding: 10px;  border-left: 10px solid #222;  white-space: pre-line;}
.w-box ul, .j-box ol {margin: 10px 40px;}
.w-box input{display: none;}
.w-box input:checked ~ article.w-p{height: 58px;}
.w-box input:checked ~ article.w-m{height: 138px;}

Kod HTML ( do postu lub gadżetu ):
<section class="w-box" style="margin-top: 2px;">
<div>
<input id="w-p" name="accordion-1" type="checkbox" />
<label for="w-p">Nazwa artykułu</label>
<article class="w-p" style="text-align: justify;">
Proin nisi arcu, tincidunt vel porttitor vitae, condimentum eget nisl. Nam semper auctor mattis. Phasellus mattis lobortis aliquam. Nam nulla magna, elementum <a href="http://graphical-thoughts.blogspot.com/">adipiscing</a> ullamcorper et, sagittis vel ipsum. Morbi dapibus mi vitae nisl accumsan posuere. Vivamus vulputate dui vel massa gravida vitae convallis libero mattis. Aliquam ullamcorper, leo et sagittis tristique, risus neque ultrices enim, ultricies posuere quam justo ut enim.
</article></div>
</section>

Kolejne artykuły tworzymy w sposób podany przy Paczce 1!

Ja już dziękuję za uwagę i mam ogromną nadzieję, że moje propozycje accordion'ów będą chociaż w najmniejszym stopniu przydatne.
Oczywiście zachęcam do składania swoich propozycji na kolejne posty, piszcie śmiało, a właśnie taki post na pewno się w przyszłości pojawi. ( również chętnie pomogę indywidualnie, ale każde Wasze pytanie to większa ilość instrukcji na blogu co jest równoznaczne z większą liczbą osób, którym mój bloga był w stanie pomóc! );) Do kolejnego postu!

Brak komentarzy:

Prześlij komentarz

- +
Szablon wykonany przez Tyler