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)