Animated Toolbar Icon by Daniela B

Kali ini saya akan bagikan cara membuat Animated Toolbar.

Tambahkan link CSS berikut di atas </head>
Pastikan Blog sobat terpasang Jquery yg terbaru

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">

Widget ini menggunakan Font Awesome

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Cara Membuat :

1. Tambahkan kode berikut diatas kode </style>

#DarkWrap{text-align:center;font-family:'Lato',sans-serif;text-transform:uppercase}
#toolbar{width:100%;max-width:670px;min-width:550px;margin:70px auto}
.button{width:70px;height:70px;border-radius:50%;background-color:#3AB09E;color:#fff;text-align:center;font-size:3.5em;position:relative;left:50%;margin-left:-35px;z-index:1}
.button,.icons{-webkit-transition:-webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);transition:all 1s cubic-bezier(.87,-.41,.19,1.44)}
.button:after{content:"+"}
.button.active{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:60px}
.icons{width:0;overflow:hidden;height:36px;list-style:none;padding:16px 10px 10px 50px;background-color:#fff;box-shadow:1px 1px 1px 1px #DCDCDC;margin:-68px 0 0 45%;border-radius:2em}
.icons.open{width:80%;margin:-68px 0 0 5%;overflow:hidden}
.icons li{display:none;width:10%;color:#3AB09E}
.icons.open li{width:16%;display:inline-block}
.icons li a{color:#3AB09E;}

2. Tambahkan javascript berikut diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );
});
//]]>
</script>

3. Tempatkan kode pemanggil berikut di dalam kode outer-wrapper setiap blog berbeda-beda (kalau tidak tau silahkan berkomentar nanti saya akan kasi tau)

<div id="DarkWrap">
<div id="toolbar">
  <div class="button"></div>
  <ul class="icons">
    <li><a href='/'><i class="fa fa-home fa-2x" aria-hidden="true"></i></a></li>
    <li><a href='#'><i class="fa fa-user fa-2x" aria-hidden="true"></i></a></li>
    <li><a href='#'><i class="fa fa-star fa-2x" aria-hidden="true"></i></a></li>
    <li><a href='#'><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></a></li>
    <li><a href='#'><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></a></li>
  </ul>
</div>
</div>

Konfigurasi

Opsi	Keterangan
Background Colour	Ganti #3AB09E dengan Warna sesuai dengan template anda
Link	Ganti # pada kode diatas dengan link yang sobat tuju

Hasil Akhir :

See the Pen Animated toolbar icons by Daniela B (@violelune) on CodePen.

Dedi  Saturday, January 07, 2017 

Blogging CSS Javascript