Ketika kita berbicara mengenai menu navigasi yang cocok untuk kasus data yang terlalu besar, ada kalanya kita menerapkan navigasi dengan fixed position. Maksudnya, membuat menu navigasi yang selalu muncul dan berada di atas. Berikut contohnya:
HTML
<ul class="nav cf">
<li><a href="">Home</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SEO</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Wordpress</a></li>
<li><a href="">Services</a></li>
</ul>
CSS
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; padding:0 20px;} /* ini yang membuat menu menjadi melayang (fixed) */
.nav {
background: rgba(26, 37, 82, 0.24);
margin:0 0 20px 0;
}
.nav li {
list-style-type:none;
float:left;
display:inline-block;
padding:10px;
}
jQuery
<!-- jquery library -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery("document").ready(function($){
var nav = $('.nav');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
</script>
Sumber: yudiyusti[dot]com
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon