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>
Semoga Bermanfaat ^_^
Selamat Berkreasi ^_^
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.