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 :

]]></b:skin>


kemudian taruh kode dibawah ini diatas kode ]]></b:skin>

#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)
}
kemudian save dan liat hasilnya.

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

Postingan populer dari blog ini

Getting Better Accuracy with Google Maps API v3

mengaktifkan library cURL php

mengaktifkan web font cross domain via htaccess nginx dan apache