Membuat sticky menu lengkap

Ada beberapa posting pada blog ini yang membahas tentang cara membuat menu navigation bar:
1. http://caraeditblogger.blogspot.co.id/2014/12/cara-membuat-navigasi-pada-blog.html
2. http://caraeditblogger.blogspot.co.id/2014/09/membuat-tab-menu-di-blog.html
3. http://caraeditblogger.blogspot.co.id/2015/10/cara-membuat-navigation-bar-melayang.html
4. http://caraeditblogger.blogspot.co.id/2014/07/cara-membuat-menu-bar-horizontal.html
5. http://caraeditblogger.blogspot.co.id/2015/10/membuat-sticky-menu-lengkap.html, dan
6. http://caraeditblogger.blogspot.co.id/2015/10/membuat-sticky-menu-lengkap.html

Membuat sticky menu lengkap

Semoga saja salah satu atau semua posting tersebut bermanfaat bagi yang membutuhkan.
Dan kali ini kita coba membahas tentang cara Membuat sticky menu lengkap
- Tentunya kita harus login ke blogger ya.
- Cari kode

<div class='header

- masukkan kode berikut dibawahnya :

<div class='stickymenu'>
<ul class="stickymenu">
<li><a href="http://caraeditblogger.blogspot.co.id">Home</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">About</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">Contact</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">Kategori</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">Mbuh opo</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">tulisan</a></li>
<li><a href="http://caraeditblogger.blogspot.co.id">Artikel</a></li>
</ul>
</div>

- Lanjutkan dengan menemukan kode

</body>

Lalu tambahkan kode ini di bawahnya :

.stickymenu{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; padding:0 20px;}

.stickymenu {
background: red;
margin:0 0 20px 0;
}
.stickymenu li {
list-style-type:none;
float:left;
display:inline-block;
padding:10px;
}

- Cari lagi kode

</head>

- Masukkan kode ini diatasnya :

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery("document").ready(function($){

var nav = $('.stickymenu');

$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("stickymenu");
} else {
nav.removeClass("stickymenu");
}
});
});
</script>

Semoga bermanfaat