Cara Menggunakan jQuery tiny-fab Navigation Plugin

Berjumpa kembali dengan saya Hernowo di tips dan trik Dumet School, pada kesempatan kali ini saya akan memberikan tips bagaimana Cara Menggunakan jQuery tiny-fab Navigation Plugin dimana plugin ini sangat menarik sekali untuk memberikan warna – warni design website kalian. Oke di bawah ini adalah screen shoot nya yang nanti kita akan buat

Ketika di klik maka akan muncul hover seperti ini

Langsung saja kita implementasikan Cara Menggunakan jQuery tiny-fab Navigation Plugin, nanti teman – teman tinggal ikutin dulu aja dari latihan kali ini, jika sudah jadi baru teman – teman bisa eksperimen sendiri, pertama – tama siapkan terlebih dahulu text editornya dan copy script di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Cara Menggunakan jQuery tiny-fab Navigation Plugin</title>
</head>
<body>
<h1>Cara Menggunakan jQuery tiny-fab Navigation Plugin</h1>
<div class="jquery-script-ads" align="center">
   <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
  <div class="zoom">
    <a class="zoom-fab zoom-btn-large" id="zoomBtn"><i class="fa fa-bars"></i></a>
    <ul class="zoom-menu">
      <li><a class="zoom-fab zoom-btn-sm zoom-btn-person scale-transition scale-out"><i class="fa fa-user"></i></a></li>
      <li><a class="zoom-fab zoom-btn-sm zoom-btn-doc scale-transition scale-out"><i class="fa fa-book"></i></a></li>
      <li><a class="zoom-fab zoom-btn-sm zoom-btn-tangram scale-transition scale-out"><i class="fa fa-dashboard"></i></a></li>
      <li><a class="zoom-fab zoom-btn-sm zoom-btn-report scale-transition scale-out"><i class="fa fa-edit"></i></a></li>
      <li><a class="zoom-fab zoom-btn-sm zoom-btn-feedback scale-transition scale-out"><i class="fa fa-bell"></i></a></li>
    </ul>
    <div class="zoom-card scale-transition scale-out">
      <ul class="zoom-card-content">
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      </ul>
    </div>
  </div>
</body>
</html>

Save dengan nama index.html, kemudian kita load library font, jquery dan lain – lainnya.

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Copy link di atas ini di dalam tag <head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>

Dan taruh link ini di atas tag tutup </body>, jika sudah kita berikan css nya

body { background-color: #f5f7fa; font-family:'Roboto'; text-align:center; }
h1 { margin:50px auto;}
.zoom {
  position: fixed;
  bottom: 45px;
  right: 24px;
  height: 70px;
}
.zoom-fab {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: #009688;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  transition: 0.2s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: #FFF;
}
.zoom-fab:hover {
  background-color: #4db6ac;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.zoom-btn-large {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.zoom-btn-person { background-color: #F44336; }
.zoom-btn-person:hover { background-color: #e57373; }
.zoom-btn-doc { background-color: #ffeb3b; }
.zoom-btn-doc:hover { background-color: #fff176; }
.zoom-btn-tangram { background-color: #4CAF50; }
.zoom-btn-tangram:hover { background-color: #81c784; }
.zoom-btn-report { background-color: #2196F3; }
.zoom-btn-report:hover { background-color: #64b5f6; }
.zoom-btn-feedback { background-color: #9c27b0; }
.zoom-btn-feedback:hover { background-color: #ba68c8; }
.zoom-menu {
  position: absolute;
  right: 70px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 500px;
  list-style: none;
  text-align: right;
}
.zoom-menu li {
  display: inline-block;
  margin-right: 10px;
}
.zoom-card {
  position: absolute;
  right: 150px;
  bottom: 70px;
  transition: box-shadow 0.25s;
  padding: 24px;
  border-radius: 2px;
  background-color: #009688;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  color: #FFF;
}
.zoom-card ul {
  -webkit-padding-start: 0;
  list-style: none;
  text-align: left;
}
.scale-transition { transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; }
.scale-transition.scale-out {
  transform: scale(0);
  transition: transform 0.2s !important;
}
.scale-transition.scale-in { transform: scale(1); }

Kemudian selanjutnya kita berikan script jquery nya

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
$('#zoomBtn').click(function() {
  $('.zoom-btn-sm').toggleClass('scale-out');
  if (!$('.zoom-card').hasClass('scale-out')) {
    $('.zoom-card').toggleClass('scale-out');
  }
});
$('.zoom-btn-sm').click(function() {
  var btn = $(this);
  var card = $('.zoom-card');
  if ($('.zoom-card').hasClass('scale-out')) {
    $('.zoom-card').toggleClass('scale-out');
  }
  if (btn.hasClass('zoom-btn-person')) {
    card.css('background-color', '#d32f2f');
  } else if (btn.hasClass('zoom-btn-doc')) {
    card.css('background-color', '#fbc02d');
  } else if (btn.hasClass('zoom-btn-tangram')) {
    card.css('background-color', '#388e3c');
  } else if (btn.hasClass('zoom-btn-report')) {
    card.css('background-color', '#1976d2');
  } else {
    card.css('background-color', '#7b1fa2');
  }
});

Letakkan script jQuery nya di bawah tag tutup </body>, jika sudah save dan jalankan pada browsernya. Maka yang akan tampil adalah menu ada di kanan bawah

Ketika di klik maka hover akan muncul

Cukup menarik bukan..??

Baik, sekian pada artikel kali ini tentang Cara Menggunakan jQuery tiny-fab Navigation Plugin kita berjumpa kembali pada artikel berikutnya semoga bermanfaat.

Terimakasih dan Sampai Jumpa.