Blog Tutorial:Hilangkan/Sembunyikan Navbar
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 {
Cara kedua(Sembunyikan,navbar akan muncul bila di 'mouse hover')
Letakkan kod ni sebagai gadget html
Nota Tapak Kaki:
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 -->
<!-- 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^^
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.