× İletişim Formu CSS Duyarlı Hareketli Akordeon Arlina Design 11/19/2017 Etiketler : CSS javaScript Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato'); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} table{border-collapse:collapse;border-spacing:0} *{box-sizing:border-box} body{font-family:'Lato';margin:0;padding:20px} .heading-primary{font-size:2em;padding:2em;text-align:center} .accordion dl,.accordion-list{border:1px solid #ddd} .accordion dl:after,.accordion-list:after{content:"";display:block;height:1em;width:100%;background-color:#2ba659} .accordion dd,.accordion__panel{background-color:#eee;font-size:1em;line-height:1.5em} .accordion p{padding:1em 2em 1em 2em} .accordion{position:relative;background-color:#eee} .container{max-width:960px;margin:0 auto;padding:2em 0 2em 0} .accordionTitle,.accordion__Heading{background-color:#38cc70;text-align:center;font-weight:700;padding:2em;display:block;text-decoration:none;color:#fff;-webkit-transition:background-color 0.5s ease-in-out;transition:background-color 0.5s ease-in-out;border-bottom:1px solid #30bb64} .accordionTitle:before,.accordion__Heading:before{content:"+";font-size:1.5em;line-height:0.5em;float:left;-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out,-webkit-transform 0.3s ease-in-out} .accordionTitle:hover,.accordion__Heading:hover{background-color:#2ba659} .accordionTitleActive,.accordionTitle.is-expanded{background-color:#2ba659} .accordionTitleActive:before,.accordionTitle.is-expanded:before{-webkit-transform:rotate(-225deg);transform:rotate(-225deg)} .accordionItem{height:auto;overflow:hidden;max-height:50em;-webkit-transition:max-height 1s;transition:max-height 1s} @media screen and (min-width:48em){.accordionItem{max-height:15em;-webkit-transition:max-height 0.5s;transition:max-height 0.5s}} .accordionItem.is-collapsed{max-height:0} .no-js .accordionItem.is-collapsed{max-height:auto} .animateIn{-webkit-animation:accordionIn 0.45s normal ease-in-out both 1;animation:accordionIn 0.45s normal ease-in-out both 1} .animateOut{-webkit-animation:accordionOut 0.45s alternate ease-in-out both 1;animation:accordionOut 0.45s alternate ease-in-out both 1} @-webkit-keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @-webkit-keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg)}} @keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg)}} </style> </head> <body> <div class="container"> <h2 class="heading-primary">CSS Duyarlı Hareketli Akordeon</h2> <div class="accordion"> <dl> <dt> <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Birinci Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> <dt> <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">İkinci Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> <dt> <a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">Üçüncü Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> </dl> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ (function(){var d=document,accordionToggles=d.querySelectorAll('.js-accordionTrigger'),setAria,setAccordionAria,switchAccordion,touchSupported=('ontouchstart'in window),pointerSupported=('pointerdown'in window);skipClickDelay=function(e){e.preventDefault();e.target.click();} setAriaAttr=function(el,ariaType,newProperty){el.setAttribute(ariaType,newProperty);};setAccordionAria=function(el1,el2,expanded){switch(expanded){case"true":setAriaAttr(el1,'aria-expanded','true');setAriaAttr(el2,'aria-hidden','false');break;case"false":setAriaAttr(el1,'aria-expanded','false');setAriaAttr(el2,'aria-hidden','true');break;default:break;}};switchAccordion=function(e){console.log("triggered");e.preventDefault();var thisAnswer=e.target.parentNode.nextElementSibling;var thisQuestion=e.target;if(thisAnswer.classList.contains('is-collapsed')){setAccordionAria(thisQuestion,thisAnswer,'true');}else{setAccordionAria(thisQuestion,thisAnswer,'false');} thisQuestion.classList.toggle('is-collapsed');thisQuestion.classList.toggle('is-expanded');thisAnswer.classList.toggle('is-collapsed');thisAnswer.classList.toggle('is-expanded');thisAnswer.classList.toggle('animateIn');};for(var i=0,len=accordionToggles.length;i<len;i++){if(touchSupported){accordionToggles[i].addEventListener('touchstart',skipClickDelay,false);} if(pointerSupported){accordionToggles[i].addEventListener('pointerdown',skipClickDelay,false);} accordionToggles[i].addEventListener('click',switchAccordion,false);}})(); //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "CSS Duyarlı Hareketli Akordeon" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
CSS Duyarlı Hareketli Akordeon Arlina Design 11/19/2017 Etiketler : CSS javaScript Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lato'); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} table{border-collapse:collapse;border-spacing:0} *{box-sizing:border-box} body{font-family:'Lato';margin:0;padding:20px} .heading-primary{font-size:2em;padding:2em;text-align:center} .accordion dl,.accordion-list{border:1px solid #ddd} .accordion dl:after,.accordion-list:after{content:"";display:block;height:1em;width:100%;background-color:#2ba659} .accordion dd,.accordion__panel{background-color:#eee;font-size:1em;line-height:1.5em} .accordion p{padding:1em 2em 1em 2em} .accordion{position:relative;background-color:#eee} .container{max-width:960px;margin:0 auto;padding:2em 0 2em 0} .accordionTitle,.accordion__Heading{background-color:#38cc70;text-align:center;font-weight:700;padding:2em;display:block;text-decoration:none;color:#fff;-webkit-transition:background-color 0.5s ease-in-out;transition:background-color 0.5s ease-in-out;border-bottom:1px solid #30bb64} .accordionTitle:before,.accordion__Heading:before{content:"+";font-size:1.5em;line-height:0.5em;float:left;-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out,-webkit-transform 0.3s ease-in-out} .accordionTitle:hover,.accordion__Heading:hover{background-color:#2ba659} .accordionTitleActive,.accordionTitle.is-expanded{background-color:#2ba659} .accordionTitleActive:before,.accordionTitle.is-expanded:before{-webkit-transform:rotate(-225deg);transform:rotate(-225deg)} .accordionItem{height:auto;overflow:hidden;max-height:50em;-webkit-transition:max-height 1s;transition:max-height 1s} @media screen and (min-width:48em){.accordionItem{max-height:15em;-webkit-transition:max-height 0.5s;transition:max-height 0.5s}} .accordionItem.is-collapsed{max-height:0} .no-js .accordionItem.is-collapsed{max-height:auto} .animateIn{-webkit-animation:accordionIn 0.45s normal ease-in-out both 1;animation:accordionIn 0.45s normal ease-in-out both 1} .animateOut{-webkit-animation:accordionOut 0.45s alternate ease-in-out both 1;animation:accordionOut 0.45s alternate ease-in-out both 1} @-webkit-keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @-webkit-keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg)}} @keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.9) rotateX(-60deg);transform:scale(0.9) rotateX(-60deg)}} </style> </head> <body> <div class="container"> <h2 class="heading-primary">CSS Duyarlı Hareketli Akordeon</h2> <div class="accordion"> <dl> <dt> <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Birinci Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> <dt> <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">İkinci Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> <dt> <a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">Üçüncü Akordeon Başlık</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true"> <p><a href="https://bloggereklentileri.blogspot.com" title="Blogger Eklentileri">Blogger Eklentileri</a>, özel yeni nesil blog eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.</p><p>Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </dd> </dl> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ (function(){var d=document,accordionToggles=d.querySelectorAll('.js-accordionTrigger'),setAria,setAccordionAria,switchAccordion,touchSupported=('ontouchstart'in window),pointerSupported=('pointerdown'in window);skipClickDelay=function(e){e.preventDefault();e.target.click();} setAriaAttr=function(el,ariaType,newProperty){el.setAttribute(ariaType,newProperty);};setAccordionAria=function(el1,el2,expanded){switch(expanded){case"true":setAriaAttr(el1,'aria-expanded','true');setAriaAttr(el2,'aria-hidden','false');break;case"false":setAriaAttr(el1,'aria-expanded','false');setAriaAttr(el2,'aria-hidden','true');break;default:break;}};switchAccordion=function(e){console.log("triggered");e.preventDefault();var thisAnswer=e.target.parentNode.nextElementSibling;var thisQuestion=e.target;if(thisAnswer.classList.contains('is-collapsed')){setAccordionAria(thisQuestion,thisAnswer,'true');}else{setAccordionAria(thisQuestion,thisAnswer,'false');} thisQuestion.classList.toggle('is-collapsed');thisQuestion.classList.toggle('is-expanded');thisAnswer.classList.toggle('is-collapsed');thisAnswer.classList.toggle('is-expanded');thisAnswer.classList.toggle('animateIn');};for(var i=0,len=accordionToggles.length;i<len;i++){if(touchSupported){accordionToggles[i].addEventListener('touchstart',skipClickDelay,false);} if(pointerSupported){accordionToggles[i].addEventListener('pointerdown',skipClickDelay,false);} accordionToggles[i].addEventListener('click',switchAccordion,false);}})(); //]]> </script> </body> </html>
Yorum Gönder