jueves, 24 de mayo de 2007

Jugando con la Navbar 3 (ocultar/mostrar)

Para ocultar y mostrar la Navbar automáticamente según la posición del mouse; o mejor dicho, mantener oculta la Navbar y mostrarla cuando se coloca el mouse en parte superior de la pagina, conozco dos métodos, uno con CSS puro y otro con Javascript y CSS

El método CSS puro lo aprendí en Recursos Blog & Web, en el artículo Ocultar la barra Blogger (navbar) automáticamente. Es muy fácil, solo tienes que agregar el siguiente código en tu plantilla (Edición HTML) justo antes de la linea que dice "</head>" (casi al final).

<style type="text/css">
#navbar-iframe {
opacity: 0.0;
filter: alpha(Opacity=0)
}

#navbar-iframe:hover {
opacity: 1.0;
filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>

Este código fija la opacidad del div cuyo id es "navbar-iframe" en un 0%, osea “invisible” y cuando el mouse esta sobre (hover) este div, le da una opacidad de 100%, osea “totalmente visible”. Puedes usar este código junto con el que hay en Jugando con la Navbar 2 (opacidad) para tener una Navbar semi-translúcida que se oculta/muestra automáticamente; o mejor aun, le puedes hacer una modificación para conseguir el mismo efecto:

<style type="text/css">
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}

#navbar-iframe:hover {
opacity: 0.5;
filter: alpha(Opacity=50,FinishedOpacity=50)
}
</style>


El otro método, con Javascript y CSS es bastante mas complejo, pero quiero mencionarlo de todas maneras. Este código lo extraje de Blogger Hacked y le hice pequeñas modificaciones. Con este método se consigue lo mismo que con el anterior, pero este lo consigue agregando eventos mouseover y mouseout al div “navbar”, para detectar la presencia del mouse y aplicar un estilo CSS que hace visible o invisible el div según corresponda.

<style type="text/css">
.navbar-show {
filter:alpha(opacity=50);
opacity:.5;
-moz-opacity:0.5;
}

.navbar-hide {
filter:alpha(opacity=0);
opacity:0;
-moz-opacity:0.0;
}
</style>

<script type='text/javascript'>
function show_navbar() {
var nbar=document.getElementById ("navbar");
nbar.className="navbar-show";
}

function hide_navbar() {
var nbar=document.getElementById("navbar");
nbar.className="navbar-hide";
}

function navbar_hack() {
var nbar=document.getElementById ("navbar");
nbar.className="navbar-hide";
if (nbar.addEventListener) {
nbar.addEventListener ("mouseover",show_navbar,false);
nbar.addEventListener ("mouseout",hide_navbar,false);
} else if (nbar.attachEvent) {
nbar.attachEvent ("onmouseover",show_navbar);
nbar.attachEvent ("onmouseout",hide_navbar);
} else {
nbar.onmouseover = show_navbar;
nbar.onmouseout = hide_navbar;
}
}

function addLoadEvent(func) {
var old = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
old();
func();
}
}
}

addLoadEvent(navbar_hack);
</script>


Aaaahhhhh!!! es muuucho mas complejo!!! pero quise mencionarlo porque este código me dio la idea para el siguiente método, que es le mejor de todos y es mucho mas elegante...

Viene desde: Jugando con la Navbar 2 (opacidad)
Continua en: Jugando con la Navbar 4 (ocultar/mostrar con scriptaculous)

2 comentarios:

Farabundo dijo...

Muy buen truco...

* dijo...

bueno mae pura vida por la publicación, ta barbra.. ahora cuando ingreso estas lineas todo barbaro, me aparece el efecto, ahora lo guardo y cuanod quiero crear una entrada, o un gadget me aparece el error titulado bX-hs4p5v. la verdad que no se que es.. al quitar las lineas que nos provees.. el error desaparece... que puede ser???
gracias por tu apoyo