02 Ogos 2010

Blog Tutorial:Hilangkan/Sembunyikan Navbar

Tiada ulasan:
 
Ada orang yang suka ngan navbar ni,ada yang tak.










Jangan risau,aku ada dua cara untuk korang

Cara pertama(Hilangkan Terus)(Ramai Blogger Yang Buat Camni)

Korang cuma perlu letak kod ni,kat dalam template korang,seelok-eloknya letakkan sebelum kod body {


#navbar {
height: 0px;
visibility: hidden;
display: none;
}


Cara kedua(Sembunyikan,navbar akan muncul bila di 'mouse hover')


Letakkan kod ni sebagai gadget html


<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

Nota Tapak Kaki:
  • Pilihla mana-mana satu yang korang suka.
  • Untuk cara yang kedua tu,cuba pilih navbar transparent,memang smart^^

    Tiada ulasan:

    Catat Ulasan

    TERIMA KASIH UNTUK KOMENKOMEN TERBARU

     
    © 1986. Aideal Fitri - fitri1986 Malaysian Blogger