Hallo guys.. Kali ini saya akan membagikan tutorial yg ciamik banget.. Top pokoknya..
Langsung aja..
Tambahkan link CSS berikut di atas
Pastikan Blog sobat terpasang Jquery yg terbaru
Google Font
</head>Pastikan Blog sobat terpasang Jquery yg terbaru
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">Google Font
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"/>Jquery Animated Sticky Header Markup
Kita akan membuat 2 menu yang berbeda. Yang pertama akan tetap dengan header dan akan terlihat menyatu dengan header dan menu itu sendiri.<!-- [ Normal Navbar ] -->
<nav class="top">
<a href="/" class="logo">Dark Poseidon</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Dream</a></li>
</ul>
</nav>Ketika halaman di scroll, Normal Header akan digantikan oleh Sticky Header.
<!-- [ Sticky Navbar ] -->
<nav class="top fixed">
<a href="#" class="logo">D</a>
<ul>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Dream</a></li>
</ul>
</ul>
</nav>Styling
Pertama-tama kita akan melakukan beberapa perubahan dasar pada logo kita. Kita mempunyai 2 logo yg berbeda, logo untuk yang standard dan sticky header./* normal navbar */
nav.top {
position: fixed;
top: 0;
width: 100%;
height: 70px;
z-index: 99;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Fixed Navbar*/
.scrolled nav.top {
-webkit-transform: translate3d(0, -70px, 0);
transform: translate3d(0, -70px, 0);
}
.top.fixed > ul {
margin: 0 0px 0 0;
}
nav.top.fixed {
-webkit-transform: translate3d(0, -80px, 0);
transform: translate3d(0, -80px, 0);
background: #fff;
box-shadow: rgba(0, 0, 0, 0.09804) 0px 2px 4px;
}
.scrolled nav.top.fixed {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
nav.top.fixed ul a {
color: #404B55;
}
nav .logo {
color: #fff;
float: left;
font-family: "Lobster", cursive;
font-size: 25px;
height: 42px;
margin: 20px 0 0 20px;
}
.top.fixed > .logo {
background: #0091de none repeat scroll 0 0;
border-radius: 50%;
color: #fff;
float: left;
font-family: "Lobster", cursive;
font-size: 40px;
height: 52px;
margin: 10px 0 0 20px;
padding: 0;
text-align: center;
width: 52px;
}Style untuk menu
/* menu style */
nav.top ul {
list-style-type: none;
margin: 0 20px 0 0;
padding: 0;
float: right;
line-height: 4.375rem;
}
nav.top ul li {
display: inline-block;
}
nav.top ul li a {
color: #fff;
text-decoration: none;
display: inline-block;
font-size: .9375rem;
font-weight: 700;
margin-left: 9px;
position: relative;
cursor: pointer;
line-height: 1em;
padding: 8px 7px 9px;
border-radius: 5px;
}
nav.top ul li a:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}Menambahkan Fungsi JavaScript
<script type='text/javascript'>
//<![CDATA[
$( document ).ready(function() {
var $body = $(document.body);
var _SCROLL_FIXED_CUTOFF = _SCROLL_FIXED_CUTOFF || ($(window).height() >= 825 ? 300 : 75),
_HEADER_HEIGHT = _HEADER_HEIGHT || 825;
$(window).scroll(function(e) {
if ($('nav.top[data-no-scroll]').length)
return;
if (this.pageYOffset >= _SCROLL_FIXED_CUTOFF && !$body.hasClass('scrolled')) {
$body.addClass('scrolled');
} else if (this.pageYOffset < _SCROLL_FIXED_CUTOFF && $body.hasClass('scrolled')) {
$body.removeClass('scrolled');
}
if (this.pageYOffset >= _HEADER_HEIGHT) {
_header_carousel_active = false;
} else {
_header_carousel_active = true;
}
});
});
//]]>
</script>
Konfigurasi
| Opsi | Keterangan |
|---|---|
| Nama Sobat | Ganti Dark Poseidon dengan nama blog anda |
| Link | Ganti # pada kode diatas dengan link yang sobat tuju |
