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
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;}Umieszczając w poście lub w gadżecie kopiujemy, przy czym niebieski tekst zamieniamy na własny:
.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;}
<section class="p-box" style="margin-top: 2px;">Kolejne boxy umieszczamy dodając arkusze CSS w projektancie szablonów, kierując się poniższym schematem:
<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>
.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
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