Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Saturday, January 07, 2017

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
OpsiKeterangan
Background ColourGanti #3AB09E dengan Warna sesuai dengan template anda
LinkGanti # pada kode diatas dengan link yang sobat tuju

Hasil Akhir :


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


forum  
playlist_add

Tuesday, March 10, 2015

Scroll Hide Nav (jQuery)


Scroll Hide Nav | Kali ini saya akan membagikan menu yang cukup menarik juga.

Berikut Langkah-langkahnya :


1. Pastikan template anda terdapat jQuery. Jika belum tambahkan kode di bawah ini tepat diatas kode </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

2. Tambahkan CSS dibawah ini tepat di bawah kode <style>
nav#menu{display:block;background:#eee;margin:0;font-size:0;border:1px solid #eaeaea;border-top:none;position:fixed;width:100%}
.menu{display:block;margin:0;padding:0 0 0 20px}
.menu .home a{background:#4791d2;color:#fff!important}
.menu.home a:hover{background:#4f9adb}
.menu li{display:inline-block;position:relative;margin:0}
.menu li a{font-family:'font-size:14px;font-weight:400;text-decoration:none;padding:20px 15px;display:block;color:#888;transition:all .5s ease;font-style:normal}
.menu li a:hover,.menu li:hover{background:#4791d2;color:#fff}
.menu ul{display:none;margin:0;padding:0;width:100%;min-width:160px;position:fixed;left:0;background:#f9f9f9;z-index:99;transition:all .5s ease}
.menu ul li{display:block;float:none;margin:0;padding:0}
.menu ul li a{font-size:12px;font-weight:700;display:block;background:#333;color:#fff;transition:all .3s ease-out}
.menu ul li a:hover,.menu ul li:hover > a{background:#4791d2;color:#fff}
ul.menu > li > a > i{margin-right:5px;font-weight:400}
ul.menu > li > a:hover > i,ul.menu > li:hover > a > i{color:#fff}
.menu li:hover > ul{display:block}
.menu ul ul{left:160px;top:0;display:none;transition:all .5s ease}
.menu li > ul ul:hover{display:block}
.responsive-menu{display:none;padding:20px 15px;background:#fff;color:#aaa;text-transform:uppercase;font-weight:400;font-family:'font-size:16px}
.responsive-menu a{color:#aaa}
li{list-style:none!important}
@media only screen and (max-width:640px) {
.menu .searchbutton{display:none}
.menu{display:none;padding:0}
a#resp-menu{color:#aaa}
.responsive-menu{display:block}
nav{margin:0;background:none}
.menu li{display:block;margin:0}
.menu li a{background:#f9f9f9;color:#666}
.menu ul{visibility:hidden;opacity:0;top:0;left:0;width:100%;transform:initial}
.menu li:hover > ul{visibility:visible;opacity:1;position:relative;transform:initial}
.menu ul ul{left:0;transform:initial}
.menu li>ul ul:hover{transform:initial}
}

3. Tambahkan kode di bawah ini tepat dibawah kode outer-wrapper setiap blog berbeda-beda (kalau tidak tau silahkan berkomentar nanti saya akan kasi tau)
<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>
<ul class='menu'>
    <li class='home'><a href='#'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
    <li><a href='#'>Link Exchange</a></li>
    <li><a href='#' title='Off Topic Page'>Off Topic</a></li>
</ul>
</nav>

4. Tambahkan Javascript diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  var prevScroll = 0,
      curDir = 'down',
      prevDir = 'up';
  $(window).scroll(function(){
        if($(this).scrollTop() >= prevScroll){
          curDir = 'down';
          if(curDir != prevDir){
          $('#menu').stop();
              $('#menu').animate({ top: '-60px' }, 300);
          prevDir = curDir;
          }
      } else {
          curDir = 'up';
          if(curDir != prevDir){
          $('#menu').stop();
          $('#menu').animate({ top: '0px' }, 300);
          prevDir = curDir;
          }
      }
      prevScroll = $(this).scrollTop();
  });
})

//Main Menu
$(document).ready(function(){var e=$("#resp-menu");var t=$(".menu");$(e).on("click",function(e){e.preventDefault();t.slideToggle()});$(window).resize(function(){var e=$(window).width();if(e>767&&t.is(":hidden")){t.removeAttr("style")}})})
//]]>
</script>

2forum  
playlist_add