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>

• result

Dedi  Tuesday, March 10, 2015 

CSS Javascript Jquery Tips Blogger