Jom Follow !

3/19/2011

Tutorial:Hide Navbar

Okay,kali neyy tutorial pasal cara-cara nak hilangkan navbar dri pandangan mata kasar korang semua
(act tak hilang ke mana pun,dy just invisible,bila cursor sentuh baru dy muncul)
navbar bende alahh nye mcm kat gambar bawah neyy
                                       *contoh mcm kat blog Ainol punya
Tanpa buang masa lagii
Jom kita start !

Macam biasa ~
Sign in blogger ?Design ?Add Gadget ?HTML/JavaScript
Kemudian korang copy code yang Ainol bagi kat bawah neyy
*(CTRL+C untuk copy)
  (CTRL+V untuk paste)

```````````````````````````````````````````````````````````````
    <!-- 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 -->
```````````````````````````````````````````````````````````````
lepas copy code tuu,paste jea kat HTML/JavaScript tady
Done ! senang jea kan ?

Cuba-cubalahh,semoga berjaya !
Bye,salam !

No comments:

Post a Comment