auto hide navbar
membuat navbar seolah-olah auto hide pada saat dihover dan pada saat halaman digulung(discroll) kebawah navbar tetap nampak tidak ikut naik.
langkah-langkahnya :
Buka blog lalu login seperti biasa, Edit layout template dengan klik bagian
layout --> edit HTML dan klik bagian expand widget templates,
cari bagian dengan kode :
langkah-langkahnya :
Buka blog lalu login seperti biasa, Edit layout template dengan klik bagian
layout --> edit HTML dan klik bagian expand widget templates,
cari bagian dengan kode :
]]></b:skin>
kemudian taruh kode dibawah ini diatas kode ]]></b:skin>
kemudian save dan liat hasilnya.
#navbar-iframe{
opacity:0.1;filter:alpha(Opacity=0); /*mengatur opacity*/
position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#navbar-iframe:hover{ /*mengatur opacity saat kursor berada diatas navbar*/
opacity:0.8;filter:alpha(Opacity=100, FinishedOpacity=80)
}
keterangan:
opacity:0.1;filter:alpha(Opacity=0);
tag tersebut untuk mengatur transparansi dari navbarnya, untuk mengatur kadar transparansinya tinggal ganti nilai opacitynya --> opacity:0.1
position:fixed;_position:absolute;top:0px; left:0px;
tag ini untuk mengatur posisi dari navbar, secara default navbar berada diposisi atas. Namun dapat dirubah posisinya dengan mengganti tag tersebut top menjadi bottom.
*top untuk posisi navbar diatas
*bottom untuk posisi navbar dibawah
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
tag tersebut untuk mengatur agar pada saat halaman dugulung (discroll) kebawah/keatas navbar tetap pada posisinya tidak ikut naik atau turun.
#navbar-iframe:hover{
opacity:0.8;filter:alpha(Opacity=100, FinishedOpacity=80)
}
untuk megatur saat cursor berada diatas navbar supaya keliahatan auto hide, padahal disini hanya mengatur opacity . Saat cursor tidak berada diatas navbar navbar tersebut tidak nampak, tetapi saat cursor berada diatas navbar akan muncul.
--=o{Selamat mencobA}0=--
Komentar
Posting Komentar