Kali ini mimin mau share cara membuat menu fix setelah scrooling. pada tutorial kali ini mimin mengunakan Boostrap dan Framework Codeigniter
1 Pertama-tama download source code yg telah disediakan
2 Letakan pada localhost komputer masing-masing
3 Buat database dengan nama latihan
4 Jalankan web melalui browser
Source Code
Javascript
Fungsi Javascript disini adalah untuk memanggil/mengganti pengaturan css saat scrolling
var nav = $('#wrap');
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
}); ?>
CSS
fungsi css mengatur letak menu setelah scrolling
/* menu fix after scrooll */
.f-nav{
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
/* logo */
.logo{
width:70px;
height:70px;
float:left;
margin-right:10px;
}
.logo_text{
font-family:Arial;
}
.banner_atas{
background-color:white;
}
Source Code Lengkap
Download Disini
Semoga Bermanfaat ^-^ ! Jangan Lupa Follow Blog nya ya :)
Tidak ada komentar:
Posting Komentar