Auto Hide Navbar dengan CSS3

Auto Hide Navbar merupakan pengembangan Cara Membuat Show Hide Navbar, Cara Membuat Navbar Otomatis ataupun Cara Membuat Efek Transparansi di Navbar Blogger dengan memanfaatkan kemajuan yang telah di capai CSS3. Meskipun saat ini belum semua browser mendukung CSS3 secara total, namun masalah ini hanya tinggal menunggu waktu serta kesiapan browser dalam melengkapi diri dengan software yang support CSS3. Beberapa browser kuat seperti Mozila Firefox secara simultan terus berpacu diri melakukan penyempurnaan dukungannya terhadap CSS3 yang terbukti dengan telah diluncurkannya Mozilla Firefox 4.0 beta 1 hingga saat ini telah direlease versi beta 6. Tampaknya Mozilla juga tak mau kehilangan pasar besarnya akibat mengabaikan CSS3. Terlebih kini Google Chrome begitu gencar melakukan berbagai promosi hingga tampak kemajuan pesat yang terbukti dengan semakin meningkatnya jumlah pengguna browser yang sebelumnya amat jarang dilirik ini. Opera bahkan sudah lepas dari versi betanya. Opera 1063 sudah banyak dipersenjatai dengan beberapa dukungan CSS3 hingga yang terakhir berupa CSS3 transition. Jika Anda menggunakan Google Crhome dan Safari maka banyak hal lain yang lebih spektakuler dapat dibuat dengan CCS3. Ke dua browser ini sudah support terhadap CSS3 animation yang mampu memberikan berbagai efek animasi terhadap desain blog tanpa perlu penambahan javascript. Ya..., dimasa ke depan kode CSS ini memang akan menjadi pilar pembangunan website/blog.

Jika anda melihat kode CSS dalam tutorial di gubhug reyot, maka mungkin anda juga bisa melakukan sedikit pengembangan dengan menambahkan efek transparansi hingga saat navbar tersembunyi dia akan terlihat sedikit samar-samar (seperti terlihat di atas!). Efek seperti ini tercipta berkat ditambahkannya efek opacity. Jika anda menyukai hal ini, anda bisa menggantikan kode CSS yang terdapat di tutorial dengan kode baru seperti yang terlihat di bawah ini:

#navbar-iframe{
   height:30px;
   padding-bottom:30px;
   background: url(http://i51.tinypic.com/2h2jh3c/gubhugreyot/images/navbar.gif) bottom right no-repeat;
   background-position:99.5% 30px;
   position:absolute; 
   margin-top:-30px;
  -o-transition:all 1.5s ease-in;
  -moz-transition:all 1.5s ease-in;
  -webkit-transition: all 1.5s ease-in;
   opacity:0.5;
}
#navbar-iframe:hover{
   margin-top:0px;
   cursor:pointer;
   opacity:1.0; /* original code by: gubhugreyot.blogspot.com */
}

Simpan kode CSS di atas syntax body { .... }, atau di atas kode ]]></b:skin>

Back to Tutorial

Tutorial: Show Hide Navbar Using CSS3 (gubhug reyot)

Tutorial by: http://gubhugreyot.blogspot.com