Mostrar/ocultar la navbar con efecto Hover Over

Hoy vamos a ver otra forma de personalizar un poco la navbar; esta vez haremos que la navbar sea casi invisible o que una parte sea visible, de modo que al pasar el mouse sobre esta parte se muestre toda la navbar.

Pueden ver la DEMO en este blog de pruebas, sólo pasen el mouse sobre la raya azul en la parte superior donde debería de estar la navbar para que vean a qué me refiero.

Y para conseguirlo, es bastante sencillo:

1.§ Ingresamos a Diseño/ Edición de HTML y buscamos ]]></b:skin> y encima de este pegaremos el siguiente código:

#navbar-iframe {
height:5px;
}

/* IE7, IE8, IE6 */
#navbar-iframe { height/*\**/: 30px\9; }

#navbar-iframe:hover {
height:40px; !important;
}

Damos click a guardar y listo. Como ven es bastante sencillo.

Si desean otras formas de ver la navbar, pueden ver estos post:

» Navbar transparente (ver entrada).
» Botón para mostrar y ocultar la navbar (ver entrada).
» La barra de navegación (navbar) (ver entrada).