Azi este Marti, 23 de Septembrie.2017

cu reduceri

Efecte acordeon

EFECT ACORDEON CU JAVASCRIPT
Un efect foarte interesant de acordeon pe verticala (vezi aici acelasi efec dar pe orizontala)
Ori de cate ori efectuam orice actiune pe o eticheta si dam clic pe ea pentru a interactiona, doar cu CSS nu este suficient, avem nevoie de JavaScript pentru ca browser-ului sa actioneze efectul acordeoane, vezi exemplul de mai jos:

Primul efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where

Al doilea efect

Proin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.

Al treilea efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where


Un acordeon este o serie de link-uri care ne permit sa afiam sau sa ascundem un continut, astfel incat numai unul este vizibila atunci cand facem selectia, asa castigam spatil pe blog.

Pentru inceput mergi la Aspect --> Editati HTML/Javascript si cauta linia </head> adaugi urmatorul cod javascript:
<script>
//<![CDATA[
var abierto = "primero";
function demoacordeon(cual) {
var mostrar = document.getElementById(cual);
var actual = document.getElementById(abierto);
if(mostrar==actual) {return false;}
// permutamos sus clases
actual.className="novisible";
mostrar.className="visible";
abierto = cual;
}
//]]>
</script>
in continuare cauta linia ]]></b:skin> exact inaintea ei adaugi codul CSS urmator:
<style>
#demoA { /* div dimensionare si centrare */
margin: 0 auto;
width: 500px;
}
#demoA a { /* propietati link si butoane */
background-color: #456;
box-shadow: 0 0 4px #ABC inset;
display: block;
font-size: 16px;
height: 2em;
line-height: 2em;
margin: 1px 0;
padding-left: 20px;
}
#demoA a:hover {
box-shadow: 0 0 12px #ABC inset;
color: #EEE;
}
#demoA div { /* los contenidos */
overflow:hidden;
text-align: center;
/* fiecare schimbare se realizeaza cu efect anumat¨*/
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#demoA div.visible {
border: 1px solid #456;
height:100px;
}
#demoA div.novisible {
border: 1px solid transparent;
height:0px;
}
</style>

salveaza modificarile si acum deschizi un post nou si adaugi codul HTML urmator:
<div id="demoA">
<a onclick="demoacordeon('primero');" href="javascript:void(0);">TEXT 1</a>
<div id="primero" class="visible">
<p> ....... CONTINUT 1 ....... </p>
</div>
<a onclick="demoacordeon('segundo');" href="javascript:void(0);">tEXT 2</a>
<div id="segundo" class="novisible">
<p> ....... CONTINUT 2 ....... </p>
</div>
<a onclick="demoacordeon('tercero');" href="javascript:void(0);">TEXT 3</a>
<div id="tercero" class="novisible">
<p> ....... CONTINUT 3 ....... </p>
</div>
</div>

Related Posts:

  • Widget pentru cititorii tai, pentru a trimite un mesaj vocalAstăzi va prezint un widget util care permite cititorilor, să-ti trimită un mesaj chiar prin intermediul blog-ul tau.Speakpipe oferă acest widget si se poate instala pe blog-ul nostru, permitand cititorilor să trimită un mesa… Read More
  • ResizeBrowser: O unealta online de mare ajutor!Nu este ceva din alta lume dar resizebrowser este o unealta online de verificare, de cum se vede un site/blog in diferite rezolutii de ecran in special in zilele noastre cand progresele monitoarelor fac din aceasta o problema… Read More
  • Cum se realizeaza un scroll pentru blogLa rugamintea unui prieten care a vazut pe o pagina web un cod pentru scrolls dar care functiona numai in limbajul php, un cod ce nu poate fi folosit in sablonul blogger, azi voi prezenta cateva coduri html folosind <marqu… Read More
  • Panglici blog pentru Jocurile Olimpice, (Londra 2012)La cererea expresa a catorva persoane care detin bloguri cu dedicatie sportiva, am pus cateva decoratiuni simple, dar frumos, care fac aluzie la Jocurile de la Londra 2012.Există şapte panglici pe care le-am proiectat astfel … Read More
  • Un stick USB - ce mai poti face cu elStickul tău de încredere este mai versatil decât ai crede. Poate fi mai mult decât un dispozitiv de memorare.Câteva trucuri puţin cunoscute pot fi utilizate atât de către începători dar şi de cunoscători ai computerului, vezi… Read More

2 comentarios:

  1. Atentie! rog sa punti intrebarea sau intrebarile cat mai explicit. thamara nu am inteleg la ce te referi!!!

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc