Cara Membuat Menu Blog Melayang (Sticky)

keliling selama ini pilih scrift buat sticky navbar, ane shared gan hasil keliling ane sama wkwkwkw
dan pasti sticky cocok untuk berbagai macam themplet
ok langsung kita gas...

Cara Menjadikan Menu Tetap Muncul Saat Discroll 

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ditag menu sobat

<div id='sticky-menu'>

/* Tag Pembuka HTML Menu Blog Sobat */
<div id='menu-nav' class='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/menu1'>Menu1</a></li>
<li><a href='/menu2'>Menu2</a></li>
<li><a href='/menu3'>Menu3</a></li>
<li><a href='/menu4'>Menu4</a></li>
</ul>
</div>
/* Tag Penutup HTML Menu Blog Sobat */

</div>

Copas kode berikut ini di atas kode ]]>

#sticky-menu{
position:fixed;
top: 0;
left: 0;
width: 100%
}

Copas kode Javascript berikut ini di atas kode

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#sticky-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#sticky-menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

selesai

pengen lebih jelas disini sumbernya

Bagikan Artikel ini

ARTIKEL TERKAIT: