SAMSURY SITES Tutorial Blog

SIMPLE FLAT UI CSS ACCORDION

Simple Flat UI CSS Accordion - Menerapkan efek animasi unik baik menggunakan jquery ui, css3 maupun javascripttentunya akan menambah keindahan setiap tampilan blog, apalagi seperti trend design dengan gaya Flat UI. Sebagaicontoh kali ini adalah simple css accordion yang dibalut dengan palet warna Flat UI color, seperti simple flat ui menumodal dialog, dan simple menu ui efek flip css3.

DEMO CODE

Untuk konsep pembentuknya adalah sebagai berikut :

CSS

HOME ACCORDION CSS3 FLAT UI Simple Flat UI CSS Accordion

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body { font-family: 'Lato';}

h1 { font-size: 2em; padding: 2em; text-align: center;}

.accordion dl {}

.accordion dt > a { text-align: center; font-weight: 700; padding: 2em; display: block; text-decoration: none; color: #fff; -webkit-transition: background-color 0.5s ease-in-out;}.accordion dd { background-color: #1abc9c; color:#fafafa; font-size: 1em; line-height: 1.5em;}.accordion dd > p { padding: 1em 2em 1em 2em;}

.accordion { position: relative; background-color: #16a085;}

.container { max-width: 960px; margin: 0 auto; padding: 2em 0 2em 0;}

.accordionTitle { background-color: #22313F; border-bottom: 1px solid #2c3e50;}.accordionTitle:before { content: "+"; font-size: 1.5em; line-height: 0.5em; float: left;

Javascript

/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */

/*jshint browser: true, strict: true, undef: true *//*global define: false */( function( window ) {'use strict';function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");}var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };}else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) {

elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };}

function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );}var classie = { hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass};if ( typeof define === 'function' && define.amd ) { define( classie );} else { window.classie = classie;}})( window );var $ = function(selector){ return document.querySelector(selector);}var accordion = $('.accordion');accordion.addEventListener("click",function(e) { e.stopPropagation(); e.preventDefault(); if(e.target && e.target.nodeName == "A") { var classes = e.target.className.split(" "); if(classes) { for(var x = 0; x < classes.length; x++) { if(classes[x] == "accordionTitle") { var title = e.target; var content = e.target.parentNode.nextElementSibling; classie.toggle(title, 'accordionTitleActive'); if(classie.has(content, 'accordionItemCollapsed')) { if(classie.has(content, 'animateOut')){ classie.remove(content, 'animateOut'); } classie.add(content, 'animateIn'); }else{ classie.remove(content, 'animateIn'); classie.add(content, 'animateOut'); } classie.toggle(content, 'accordionItemCollapsed'); } } } }});

HTML

<div class="container"> <h1>Simple Flat UI CSS Accordion</h1> <div class="accordion"> <dl> <dt><a class="accordionTitle" href="#">Test Simple Flat UI CSS Accordion 1</a></dt> <dd class="accordionItem accordionItemCollapsed"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdumporttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus neclobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enimsit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p> </dd> <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt> <dd class="accordionItem accordionItemCollapsed"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdumporttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus neclobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enimsit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p> </dd> <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 3</a></dt> <dd class="accordionItem accordionItemCollapsed"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdumporttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus neclobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enimsit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p> </dd> </dl> </div></div>

Konsep diatas hanyalah contoh saja untuk pengembangan silakan anda kreasikan sendiri sesuai kebutuhan.

Demikian semoga bermanfaat.

23 COMMENT COMMENT