Tab Accordion Menu UI Awesome

Tab Accordion Menu UI Awesome - Dengan memanipulasi efek tampilan accordion pada tab menu akan membuat tampilan lebih hidup dengan css animasi tabion, yang mengusung gaya metro ui ke dalam blog design UI. Baik menggunakan jquery ui maupun css3 efek, seperti artikel sebelumnya Simple Flat UI Css Accordion  yang kemudian dikombinasikan dengan font awesome untuk menghasilkan efek gambar minimalis sebagai perwakilan menu yang kita masukkan. Kombinasi menu metro ui dengan font awesome dan Menu metro ui efek modal dialog. 

• DEMO CODE

Untuk dapat menggunakan fungsi tabion menu ini silakan masukkan kode dibawah ini sebelum kode </head>

<link href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/animate-custom.css" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/tabion-css.css" type="text/css">
<link rel="stylesheet" href="css/tabion-css-ie8.css" type="text/css" />

Kemudian untuk markup HTMLnya sepertidi bawah ini :

<div id="mainform">
    <!-- START TABION -->
    <ul class="tabion height-500">

        <!-- Start Tab 1 -->
        <li>
       
             <!-- Start Tab Button -->
<label for="tab11" class="tabtile tabtile-small solid-blue-2 hovershadow-blue light-text">
                <i class="fa fa-group fa-3x"></i>
                <span class="light-text">Group</span>
            </label>
            <input type="radio" name="tabion" id="tab11">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-rollIn solid-blue-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-group"></i> GROUP CONTENT</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 1 -->
       
       
        <!-- Start Tab 2 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab12" class="tabtile tabtile-small solid-red-2 hovershadow-red light-text pos-left-100">
                <i class="fa fa-download fa-3x"></i>
                <span class="light-text">Download</span>
            </label>
            <input type="radio" name="tabion" id="tab12" checked="">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceIn solid-red-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-download"></i> Download</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                 
                </p>

            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 2 -->

        <!-- Start Tab 3 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab13" class="tabtile tabtile-small solid-orange-2 hovershadow-orange light-text pos-left-200">
                <i class="fa fa-comments fa-3x"></i>
                <span class="light-text">Comments</span>
            </label>
           
            <input type="radio" name="tabion" id="tab13">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInY solid-orange-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-comments"></i> Comments</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 3 -->


        <!-- Start Tab 4 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab14" class="tabtile tabtile-small solid-green-2 hovershadow-green light-text pos-left-300">
                <i class="fa fa-male fa-3x"></i>
                <span class="light-text">About Me</span>
            </label>
           
            <input type="radio" name="tabion" id="tab14">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-lightSpeedIn solid-green-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-male"></i> About Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 4 -->
       
       
        <!-- Start Tab 5 -->
        <li>
            <!-- Start Tab Button -->
<label for="tab15" class="tabtile tabtile-small solid-red hovershadow-red light-text pos-left-400">
                <i class="fa fa-youtube-play fa-3x"></i>
                <span class="light-text">Play</span>
            </label>
           
            <input type="radio" name="tabion" id="tab15">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flip solid-red light-text pos-top-100">
                <p class="title"><i class="fa fa-youtube-play"></i> Play Video</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 5 -->

        <!-- Start Tab 6 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab16" class="tabtile tabtile-small solid-green hovershadow-green light-text pos-left-500">
                <i class="fa fa-bell fa-3x"></i>
                <span class="light-text">Notification</span>
            </label>
           
            <input type="radio" name="tabion" id="tab16">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInX solid-green light-text pos-top-100">
                <p class="title"><i class="fa fa-bell"></i> Notification</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 6 -->
       
       
        <!-- Start Tab 7 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab17" class="tabtile tabtile-small solid-black hovershadow-black light-text pos-left-600">
                <i class="fa fa-envelope-o fa-3x"></i>
                <span class="light-text">Contact</span>
            </label>
           
            <input type="radio" name="tabion" id="tab17">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceInRight solid-black light-text pos-top-100">
                <p class="title"><i class="fa fa-envelope-o"></i> Contact Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI CONTENT BLA BLA BLA........dan sebagainya.....
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 7 -->

    <!-- Radio is used to close tabion content -->
    <input type="radio" name="tabion" class="none" id="close_tabion">
   
    </ul>
    <!-- END TABION -->
    <div class="clearspace"></div>
</div>

Anda cukup mengganti tulisan bercetak tebal ( isi content ) pada HTML diatas dengan apa yang ingin ditampilkan.

Simple Flat UI CSS Accordion

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

• DEMO CODE

Untuk konsep pembentuknya adalah sebagai berikut :

CSS

@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;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
  background-color: #2c3e50;
}

.accordionTitleActive {
  background-color:#34495e;
}
.accordionTitleActive:before {
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

.accordionItem {
  height: auto;
  overflow: hidden;
}
@media all {
  .accordionItem {
    max-height: 50em;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
  }
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -moz-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}

.accordionItemCollapsed {
  max-height: 0;
}

.animateIn {
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: normal;
  -moz-animation-duration: 0.65s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionIn;
  animation-duration: 0.65s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

.animateOut {
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: accordionOut;
  -moz-animation-duration: 0.75s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionOut;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes accordionIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes accordionOut {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

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 interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit 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 interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit 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 interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit 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.